feat: authentication examples
This commit is contained in:
zernonia
parent
6b747b14a4
commit
639129c816
5
apps/www/src/content/examples/authentication.md
Normal file
5
apps/www/src/content/examples/authentication.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script setup>
|
||||||
|
import AuthenticationExample from "@/examples/authentication/Example.vue"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<AuthenticationExample />
|
||||||
95
apps/www/src/examples/authentication/Example.vue
Normal file
95
apps/www/src/examples/authentication/Example.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import UserAuthForm from './components/UserAuthForm.vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { buttonVariants } from '@/lib/registry/default/ui/button'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- <div class="md:hidden">
|
||||||
|
<Image
|
||||||
|
src="/examples/authentication-light.png"
|
||||||
|
width={1280}
|
||||||
|
height={843}
|
||||||
|
alt="Authentication"
|
||||||
|
class="block dark:hidden"
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
src="/examples/authentication-dark.png"
|
||||||
|
width={1280}
|
||||||
|
height={843}
|
||||||
|
alt="Authentication"
|
||||||
|
class="hidden dark:block"
|
||||||
|
/>
|
||||||
|
</div> -->
|
||||||
|
<div class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
|
||||||
|
<a
|
||||||
|
href="/examples/authentication"
|
||||||
|
:class="cn(
|
||||||
|
buttonVariants({ variant: 'ghost' }),
|
||||||
|
'absolute right-4 top-4 md:right-8 md:top-8',
|
||||||
|
)"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</a>
|
||||||
|
<div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
|
||||||
|
<div class="absolute inset-0 bg-zinc-900" />
|
||||||
|
<div class="relative z-20 flex items-center text-lg font-medium">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
class="mr-2 h-6 w-6"
|
||||||
|
>
|
||||||
|
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
|
||||||
|
</svg>
|
||||||
|
Acme Inc
|
||||||
|
</div>
|
||||||
|
<div class="relative z-20 mt-auto">
|
||||||
|
<blockquote class="space-y-2">
|
||||||
|
<p class="text-lg">
|
||||||
|
“This library has saved me countless hours of work and
|
||||||
|
helped me deliver stunning designs to my clients faster than
|
||||||
|
ever before.”
|
||||||
|
</p>
|
||||||
|
<footer class="text-sm">
|
||||||
|
Sofia Davis
|
||||||
|
</footer>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:p-8">
|
||||||
|
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||||
|
<div class="flex flex-col space-y-2 text-center">
|
||||||
|
<h1 class="text-2xl font-semibold tracking-tight">
|
||||||
|
Create an account
|
||||||
|
</h1>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Enter your email below to create your account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<UserAuthForm />
|
||||||
|
<p class="px-8 text-center text-sm text-muted-foreground">
|
||||||
|
By clicking continue, you agree to our
|
||||||
|
<a
|
||||||
|
href="/terms"
|
||||||
|
class="underline underline-offset-4 hover:text-primary"
|
||||||
|
>
|
||||||
|
Terms of Service
|
||||||
|
</a>
|
||||||
|
and
|
||||||
|
<a
|
||||||
|
href="/privacy"
|
||||||
|
class="underline underline-offset-4 hover:text-primary"
|
||||||
|
>
|
||||||
|
Privacy Policy
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import LucideSpinner from '~icons/lucide/loader-2'
|
||||||
|
import GitHubLogo from '~icons/radix-icons/github-logo'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import { Input } from '@/lib/registry/default/ui/input'
|
||||||
|
import { Label } from '@/lib/registry/default/ui/label'
|
||||||
|
|
||||||
|
const isLoading = ref(false)
|
||||||
|
async function onSubmit(event: Event) {
|
||||||
|
event.preventDefault()
|
||||||
|
isLoading.value = true
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
isLoading.value = false
|
||||||
|
}, 3000)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="cn('grid gap-6', $attrs.class ?? '')">
|
||||||
|
<form @submit="onSubmit">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<div class="grid gap-1">
|
||||||
|
<Label class="sr-only" for="email">
|
||||||
|
Email
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
placeholder="name@example.com"
|
||||||
|
type="email"
|
||||||
|
auto-capitalize="none"
|
||||||
|
auto-complete="email"
|
||||||
|
auto-correct="off"
|
||||||
|
:disabled="isLoading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button :disabled="isLoading">
|
||||||
|
<LucideSpinner v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Sign In with Email
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute inset-0 flex items-center">
|
||||||
|
<span class="w-full border-t" />
|
||||||
|
</div>
|
||||||
|
<div class="relative flex justify-center text-xs uppercase">
|
||||||
|
<span class="bg-background px-2 text-muted-foreground">
|
||||||
|
Or continue with
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" type="button" :disabled="isLoading">
|
||||||
|
<LucideSpinner v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
<GitHubLogo v-else class="mr-2 h-4 w-4" />
|
||||||
|
GitHub
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user