update ui and other frontend updates

frontend/src/routes/signup/+page.server.ts

@@ -0,0 +1,35 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { signup, setSessionCookie, setPbTokenCookie } from '$lib/server/auth';
+
+export const actions = {
+	default: async (event) => {
+		const fd = await event.request.formData();
+		const email = fd.get('email') as string;
+		const password = fd.get('password') as string;
+		const famName = fd.get('famName') as string;
+		const parentName = fd.get('parentName') as string;
+
+		if (!email || !password || !famName) {
+			return fail(400, { error: 'All fields required', email, famName });
+		}
+		if (password.length < 8) {
+			return fail(400, { error: 'Password must be at least 8 characters', email, famName });
+		}
+
+		try {
+			const result = await signup(email, password, famName, parentName || email.split('@')[0]);
+			setSessionCookie(event, {
+				famId: result.famId,
+				userId: result.userId,
+				famSlug: result.famSlug,
+				memberName: result.memberName,
+				role: result.role,
+			});
+			setPbTokenCookie(event, result.token);
+			throw redirect(303, `/${result.famSlug}/${result.memberName}`);
+		} catch (e) {
+			if (e instanceof redirect) throw e;
+			return fail(400, { error: e instanceof Error ? e.message : 'Signup failed', email, famName });
+		}
+	},
+};

frontend/src/routes/signup/+page.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	let { form } = $props();
+	let email = $state('');
+	let password = $state('');
+	let famName = $state('');
+	let parentName = $state('');
+</script>
+
+<h1>Create your family</h1>
+
+<form method="POST">
+	{#if form?.error}
+		<p class="error">{form.error}</p>
+	{/if}
+
+	<label>
+		Family name
+		<input name="famName" bind:value={famName} required />
+	</label>
+
+	<label>
+		Your name (parent)
+		<input name="parentName" bind:value={parentName} placeholder="Mum / Dad" required />
+	</label>
+
+	<label>
+		Email
+		<input type="email" name="email" bind:value={email} required />
+	</label>
+
+	<label>
+		Password
+		<input type="password" name="password" bind:value={password} minlength={8} required />
+	</label>
+
+	<button type="submit">Create family</button>
+</form>
+
+<p>Already have an account? <a href="/login">Log in</a></p>
+
+<style>
+	form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto; }
+	label { display: flex; flex-direction: column; gap: 0.25rem; }
+	input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
+	button { padding: 0.75rem; background: #6366f1; color: white; border: none; border-radius: 4px; cursor: pointer; }
+	.error { color: #dc2626; padding: 0.5rem; background: #fef2f2; border-radius: 4px; }
+</style>