added nanoid and signup form action

package.json

@@ -36,6 +36,7 @@
     "formsnap": "^0.4.1",
     "lucide-svelte": "^0.292.0",
     "mode-watcher": "^0.0.7",
+    "nanoid": "^5.0.3",
     "postgres": "^3.4.3",
     "sveltekit-superforms": "^1.10.1",
     "tailwind-merge": "^2.0.0",

src/routes/(auth)/login/+page.server.ts

@@ -5,6 +5,7 @@ import { formSchema } from './schema';
 import { db } from '$lib/db';
 import { user as userSchema } from '$lib/db/schema';
 import { eq } from 'drizzle-orm';
+import { nanoid } from 'nanoid';
 
 export const load = (async () => {
 	return {
@@ -16,7 +17,6 @@ export const actions: Actions = {
 	default: async (event) => {
 		const form = await superValidate(event, formSchema);
 
-		console.log(form);
 		if (!form.valid) {
 			return fail(400, {
 				form,
@@ -34,6 +34,12 @@ export const actions: Actions = {
 				user && (await Bun.password.verify(form.data.password, user.password));
 
 			if (user && matchPassword) {
+				const token = nanoid(32);
+				event.cookies.set('token', token, {
+					httpOnly: true,
+					sameSite: 'strict',
+					path: '/',
+				});
 				return {
 					form,
 				};

src/routes/(auth)/signup/(components)/user-auth-form.svelte

@@ -1,62 +1,32 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import { Loader2 } from 'lucide-svelte';
-	import { cn } from '$lib/utils';
+	import * as Form from '$lib/components/ui/form';
+	import { formSchema, type FormSchema } from '../schema';
+	import type { SuperValidated } from 'sveltekit-superforms';
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
-
-	let isLoading = false;
-	async function onSubmit(event: SubmitEvent) {
-		isLoading = true;
-
-		setTimeout(() => {
-			isLoading = false;
-		}, 3000);
-	}
+	export let form: SuperValidated<FormSchema>;
 </script>
 
-<div class={cn('grid gap-6', className)} {...$$restProps}>
-	<form on:submit|preventDefault={onSubmit}>
-		<div class="grid gap-4">
-			<div class="grid gap-1">
-				<Label for="email">Email</Label>
-				<Input
-					id="email"
-					placeholder="name@example.com"
-					type="email"
-					autocapitalize="none"
-					autocomplete="email"
-					autocorrect="off"
-					disabled={isLoading}
-				/>
-			</div>
-			<div class="grid gap-1">
-				<Label for="password">Password</Label>
-				<Input
-					id="password"
-					placeholder="••••••••"
-					type="password"
-					disabled={isLoading}
-				/>
-			</div>
-			<div class="grid gap-1">
-				<Label for="password_confirm">Password Confirm</Label>
-				<Input
-					id="password_confirm"
-					placeholder="••••••••"
-					type="password"
-					disabled={isLoading}
-				/>
-			</div>
-			<Button disabled={isLoading} type="submit" class="flex gap-2">
-				{#if isLoading}
-					<Loader2 class="animate-spin" />
-				{/if}
-				Sign Up
-			</Button>
-		</div>
-	</form>
-</div>
+<Form.Root method="POST" {form} schema={formSchema} let:config>
+	<Form.Field {config} name="email">
+		<Form.Item>
+			<Form.Label>Email</Form.Label>
+			<Form.Input placeholder="name@example.com" />
+			<Form.Validation />
+		</Form.Item>
+	</Form.Field>
+	<Form.Field {config} name="password">
+		<Form.Item>
+			<Form.Label>Password</Form.Label>
+			<Form.Input type="password" placeholder="••••••••" />
+			<Form.Validation />
+		</Form.Item>
+	</Form.Field>
+	<Form.Field {config} name="password_confirm">
+		<Form.Item>
+			<Form.Label>Password Confirm</Form.Label>
+			<Form.Input type="password" placeholder="••••••••" />
+			<Form.Validation />
+		</Form.Item>
+	</Form.Field>
+	<Form.Button class="w-full">Sign Up</Form.Button>
+</Form.Root>

src/routes/(auth)/signup/+page.server.ts

@@ -0,0 +1,71 @@
+import type { PageServerLoad, Actions } from './$types';
+import { fail } from '@sveltejs/kit';
+import { superValidate } from 'sveltekit-superforms/server';
+import { formSchema } from './schema';
+import { db } from '$lib/db';
+import { user as userSchema } from '$lib/db/schema';
+import { eq } from 'drizzle-orm';
+import { nanoid } from 'nanoid';
+
+export const load = (async () => {
+	return {
+		form: superValidate(formSchema),
+	};
+}) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	default: async (event) => {
+		const form = await superValidate(event, formSchema);
+
+		if (!form.valid) {
+			return fail(400, {
+				form,
+			});
+		}
+
+		if (form.data.password !== form.data.password_confirm) {
+			return fail(400, {
+				form,
+			});
+		}
+
+		try {
+			const users = await db
+				.select()
+				.from(userSchema)
+				.where(eq(userSchema.email, form.data.email));
+
+			const user = users[0];
+
+			if (user) {
+				await db
+					.insert(userSchema)
+					.values({ email: form.data.email, password: form.data.password });
+				const token = nanoid(32);
+				event.cookies.set('token', token, {
+					httpOnly: true,
+					sameSite: 'strict',
+					path: '/',
+				});
+				return {
+					form,
+				};
+			} else {
+				return fail(400, {
+					form,
+				});
+			}
+		} catch (error) {
+			if (error instanceof SyntaxError) {
+				return fail(400, {
+					form,
+				});
+			} else {
+				console.log(error);
+				return fail(400, {
+					form,
+				});
+			}
+		}
+	},
+};

src/routes/(auth)/signup/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+	import type { PageData } from './$types';
 	import ThemeToggle from '$lib/components/theme-toggle.svelte';
 	import UserAuthForm from './(components)/user-auth-form.svelte';
+
+	export let data: PageData;
 </script>
 
 <div
@@ -28,7 +31,7 @@
 					Enter your email below to create your account
 				</p>
 			</div>
-			<UserAuthForm />
+			<UserAuthForm form={data.form} />
 			<p class="px-8 text-center text-sm text-muted-foreground">
 				Already Have An Account? Login{' '}
 				<a

src/routes/(auth)/signup/schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const formSchema = z.object({
+	email: z.string().email(),
+	password: z.string().min(8),
+	password_confirm: z.string().min(8),
+});
+
+export type FormSchema = typeof formSchema;