65 lines
2.3 KiB
Vue
65 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import type { HTMLAttributes } from "vue";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Frown } from "lucide-vue-next";
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
const props = defineProps<{
|
|
class?: HTMLAttributes["class"];
|
|
}>();
|
|
|
|
const email = ref("");
|
|
const password = ref("");
|
|
|
|
const doLogin = async () => {
|
|
await authStore.signIn(email.value, password.value);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn('flex flex-col gap-6', props.class)">
|
|
<Card>
|
|
<CardHeader class="text-center">
|
|
<CardTitle class="text-xl">Login</CardTitle>
|
|
<CardDescription>Enter your email below to login</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form autocomplete="off" @submit.prevent="doLogin">
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel for="email">Email</FieldLabel>
|
|
<Input id="email" v-model="email" type="email" placeholder="m@example.com" required />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="password">Password</FieldLabel>
|
|
<Input id="password" v-model="password" type="password" required />
|
|
</Field>
|
|
<Field>
|
|
<Button type="submit">Login</Button>
|
|
<FieldDescription class="text-center">
|
|
Don't have an account?
|
|
<NuxtLink to="/member/auth/create-account">
|
|
<Button variant="link">Create account</Button>
|
|
</NuxtLink>
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field v-if="authStore.lastError" variant="error">
|
|
<FieldDescription class="text-destructive flex items-center gap-2">
|
|
<Frown /> {{ authStore.lastError }}
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
<FieldDescription class="px-6 text-center">
|
|
<NuxtLink to="/"><Button variant="link">Terms of Service</Button></NuxtLink>
|
|
<NuxtLink to="/"><Button variant="link">Privacy Policy</Button></NuxtLink>
|
|
</FieldDescription>
|
|
</div>
|
|
</template>
|