initial production version

src/routes/signin/+page.svelte

@@ -0,0 +1,102 @@
+<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 { PageData } from './$types';
+	import { signIn } from '@auth/sveltekit/client';
+
+	let { data }: { data: PageData } = $props();
+
+	let isSubmitting = $state(false);
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		isSubmitting = true;
+
+		const formData = new FormData(e.target as HTMLFormElement);
+		const username = formData.get('username') as string;
+		const password = formData.get('password') as string;
+
+		try {
+			await signIn('credentials', {
+				username,
+				password,
+				callbackUrl: '/dashboard'
+			});
+		} catch (error) {
+			console.error('Sign in error:', error);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+</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">Welcome Back</CardTitle>
+			<CardDescription>Sign in to your account</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			{#if data.registered}
+				<div class="bg-green-50 border border-green-200 text-green-700 dark:bg-green-950 dark:border-green-800 dark:text-green-300 px-4 py-3 rounded">
+					Account created successfully! Please sign in.
+				</div>
+			{/if}
+
+			{#if data.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">
+					Invalid username or password
+				</div>
+			{/if}
+
+			<form onsubmit={handleSubmit} class="space-y-4">
+				<div class="space-y-2">
+					<Label for="username">Username</Label>
+					<Input id="username" name="username" type="text" required />
+				</div>
+
+				<div class="space-y-2">
+					<Label for="password">Password</Label>
+					<Input id="password" name="password" type="password" required />
+				</div>
+
+				<Button type="submit" class="w-full" disabled={isSubmitting}>
+					{isSubmitting ? 'Signing in...' : 'Sign In'}
+				</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 in with {provider.name}
+					</Button>
+				{/each}
+			{/if}
+
+			<div class="text-center text-sm text-muted-foreground">
+				Don't have an account?
+				<a href="/signup" class="text-primary hover:underline">Sign up</a>
+			</div>
+		</CardContent>
+	</Card>
+</div>