GF-6, #8 Added auth.

app/components/SignupForm.vue

@@ -0,0 +1,81 @@
+<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 { authClient } from "~~/shared/utils/auth-client";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const name = ref("");
+const email = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+
+const createAccount = async () => {
+  await authClient.signUp.email({
+    name: name.value,
+    email: email.value,
+    password: password.value,
+    // callbackURL: "/",
+  });
+};
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-6', props.class)">
+    <ClientOnly>
+      <Card>
+        <CardHeader class="text-center">
+          <CardTitle class="text-xl">Create your account</CardTitle>
+          <CardDescription>Enter your email below to create your account</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form autocomplete="off" @submit.prevent="createAccount">
+            <FieldGroup>
+              <Field>
+                <FieldLabel for="name">Full Name</FieldLabel>
+                <Input id="name" v-model="name" type="text" placeholder="John Doe" required />
+              </Field>
+              <Field>
+                <FieldLabel for="email">Email</FieldLabel>
+                <Input id="email" v-model="email" type="email" placeholder="m@example.com" required />
+              </Field>
+              <Field>
+                <Field class="grid grid-cols-2 gap-4">
+                  <Field>
+                    <FieldLabel for="password">Password</FieldLabel>
+                    <Input id="password" v-model="password" type="password" required />
+                  </Field>
+                  <Field>
+                    <FieldLabel for="confirm-password">Confirm Password</FieldLabel>
+                    <Input id="confirm-password" v-model="confirmPassword" type="password" required />
+                  </Field>
+                </Field>
+                <FieldDescription>Must be at least 8 characters long.</FieldDescription>
+              </Field>
+              <Field>
+                <Button type="submit">Create Account</Button>
+                <FieldDescription class="text-center">
+                  Already have an account?
+                  <NuxtLink to="/member/auth/login">
+                    <Button variant="link">Log in</Button>
+                  </NuxtLink>
+                </FieldDescription>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </ClientOnly>
+    <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>