63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<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>
|