fix some signup ux issues

2026-08-25 07:57:50 +01:00
parent f7d4ed45b3
commit f63e2918ff
5 changed files with 114 additions and 2 deletions
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { enhance } from '$app/forms';
+	import { Button } from '$lib/components';
+
+	const famSlug = page.params.fam;
+	let name = $state('');
+	let otp = $state(page.url.searchParams.get('code') || '');
+	let { form } = $props();
+</script>
+
+<svelte:head><title>Join {famSlug}</title></svelte:head>
+
+<main class="mx-auto flex min-h-screen max-w-md flex-col items-center justify-center px-6">
+	<section class="w-full rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm">
+		<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-2xl">
+			🏠
+		</div>
+		<h1 class="text-xl font-bold text-slate-900">Join {famSlug}</h1>
+		<p class="mt-1 text-sm text-slate-500">
+			Enter your name and the code your parent gave you to get started.
+		</p>
+
+		<form
+			class="mt-6 flex flex-col gap-3"
+			method="POST"
+			use:enhance={() => {
+				return async ({ result, update }) => {
+					if (result.type === 'failure') {
+						name = (result.data as any)?.name || '';
+						otp = (result.data as any)?.otp || '';
+					}
+					await update();
+				};
+			}}
+		>
+			<input
+				type="text"
+				name="name"
+				bind:value={name}
+				placeholder="Your name"
+				autocomplete="name"
+				class="w-full rounded-lg border border-slate-300 px-4 py-3 text-center text-lg text-slate-900 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
+			/>
+			<input
+				type="text"
+				name="otp"
+				bind:value={otp}
+				inputmode="numeric"
+				maxlength="6"
+				placeholder="6-digit code"
+				autocomplete="one-time-code"
+				class="w-full rounded-lg border border-slate-300 px-4 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
+			/>
+			{#if form?.error}
+				<p class="text-sm font-medium text-rose-600">{form.error}</p>
+			{/if}
+			<Button type="submit" variant="primary" size="lg">Join</Button>
+		</form>
+
+		<p class="mt-6 text-xs text-slate-400">
+			Code is valid for 20 minutes. Ask your parent for a new one if it expires.
+		</p>
+	</section>
+</main>