mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-11 04:19:31 +00:00
57 lines
2.2 KiB
Vue
57 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { signIn } from '@/lib/auth-client.js'
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-screen flex justify-center items-center">
|
|
<Card class="mx-auto max-w-sm">
|
|
<CardHeader>
|
|
<CardTitle class="text-2xl">
|
|
Login
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Enter your email below to login to your account
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="grid gap-4">
|
|
<div class="grid gap-2">
|
|
<Label for="email">Email</Label>
|
|
<Input id="email" type="email" placeholder="m@example.com" required />
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<div class="flex items-center">
|
|
<Label for="password">Password</Label>
|
|
<a href="#" class="ml-auto inline-block text-sm underline">
|
|
Forgot your password?
|
|
</a>
|
|
</div>
|
|
<Input id="password" type="password" required placeholder="password" />
|
|
</div>
|
|
<Button type="submit" class="w-full">
|
|
Login
|
|
</Button>
|
|
<Button variant="outline" class="w-full" @click="async () => {
|
|
await signIn.social({
|
|
provider: 'google',
|
|
callbackURL: '/'
|
|
})
|
|
}">
|
|
Login with Google
|
|
</Button>
|
|
</div>
|
|
<div class="mt-4 text-center text-sm">
|
|
Don't have an account?
|
|
<a href="#" class="underline">
|
|
Sign up
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template> |