initial production version

src/routes/signup/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import type { ActionData, PageData } from './$types';
+	import { signIn } from '@auth/sveltekit/client';
+
+	let { form, data }: { form: ActionData; data: PageData } = $props();
+</script>
+
+<div class="min-h-screen flex items-center justify-center p-4">
+	<div class="absolute top-4 right-4">
+		<ThemeToggle />
+	</div>
+	<Card class="w-full max-w-md">
+		<CardHeader>
+			<CardTitle class="text-2xl">Create an Account</CardTitle>
+			<CardDescription>Sign up to manage your wishlists</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			{#if form?.error}
+				<div class="bg-red-50 border border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300 px-4 py-3 rounded">
+					{form.error}
+				</div>
+			{/if}
+
+			<form method="POST" class="space-y-4">
+				<div class="space-y-2">
+					<Label for="name">Name</Label>
+					<Input id="name" name="name" type="text" required value={form?.name || ''} />
+				</div>
+
+				<div class="space-y-2">
+					<Label for="username">Username</Label>
+					<Input id="username" name="username" type="text" required value={form?.username || ''} />
+				</div>
+
+				<div class="space-y-2">
+					<Label for="password">Password</Label>
+					<Input id="password" name="password" type="password" required minlength={8} />
+				</div>
+
+				<div class="space-y-2">
+					<Label for="confirmPassword">Confirm Password</Label>
+					<Input id="confirmPassword" name="confirmPassword" type="password" required minlength={8} />
+				</div>
+
+				<Button type="submit" class="w-full">Sign Up</Button>
+			</form>
+
+			{#if data.oauthProviders.length > 0}
+				<div class="relative">
+					<div class="absolute inset-0 flex items-center">
+						<span class="w-full border-t"></span>
+					</div>
+					<div class="relative flex justify-center text-xs uppercase">
+						<span class="bg-card px-2 text-muted-foreground">Or continue with</span>
+					</div>
+				</div>
+
+				{#each data.oauthProviders as provider}
+					<Button
+						type="button"
+						variant="outline"
+						class="w-full"
+						onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
+					>
+						Sign up with {provider.name}
+					</Button>
+				{/each}
+			{/if}
+
+			<div class="text-center text-sm text-muted-foreground">
+				Already have an account?
+				<a href="/signin" class="text-primary hover:underline">Sign in</a>
+			</div>
+		</CardContent>
+	</Card>
+</div>