[Closes #8] Added authentication

app/components/LoginForm.vue

@@ -0,0 +1,65 @@
+<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>