From 8cec99715a47565bda78b649248de279b1f33509 Mon Sep 17 00:00:00 2001
From: JCEEE <0xjceee@proton.me>
Date: Thu, 3 Sep 2026 09:31:40 +0100
Subject: [PATCH] fix login confusion and enforce reactive subscription after
 login

---
 frontend/src/lib/components/AuthShell.svelte | 10 ++-
 frontend/src/lib/components/Sidebar.svelte   |  2 +-
 frontend/src/lib/server/session.ts           |  2 +-
 frontend/src/routes/[fam]/+layout.svelte     | 36 +++++----
 frontend/src/routes/join/+page.server.ts     | 34 ++++++++
 frontend/src/routes/join/+page.svelte        | 81 ++++++++++++++++++++
 frontend/src/routes/login/+page.svelte       | 57 +++++++++++++-
 7 files changed, 204 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/routes/join/+page.server.ts
 create mode 100644 frontend/src/routes/join/+page.svelte

diff --git a/frontend/src/lib/components/AuthShell.svelte b/frontend/src/lib/components/AuthShell.svelte
index 14b3e85..d6346ef 100644
--- a/frontend/src/lib/components/AuthShell.svelte
+++ b/frontend/src/lib/components/AuthShell.svelte
@@ -4,11 +4,13 @@
 	let {
 		title,
 		subtitle,
-		children
+		children,
+		secondary
 	}: {
 		title: string;
 		subtitle?: string;
 		children?: any;
+		secondary?: any;
 	} = $props();
 </script>
 
@@ -21,6 +23,9 @@
 		{/if}
 		{@render children?.()}
 	</div>
+	{#if secondary}
+		<div class="card secondary">{@render secondary?.()}</div>
+	{/if}
 </main>
 
 <style>
@@ -64,6 +69,9 @@
 		font-size: 0.9rem;
 		line-height: 1.5;
 	}
+	.card.secondary {
+		margin-top: 1rem;
+	}
 	@media (max-width: 480px) {
 		.card {
 			padding: 1.5rem;
diff --git a/frontend/src/lib/components/Sidebar.svelte b/frontend/src/lib/components/Sidebar.svelte
index b5f0a8a..e15a134 100644
--- a/frontend/src/lib/components/Sidebar.svelte
+++ b/frontend/src/lib/components/Sidebar.svelte
@@ -44,7 +44,7 @@
 			? [{ href: `/${famSlug}/${memberName}/settings`, label: 'Settings', icon: settingsIcon }]
 			: []),
 		{
-			href: session ? '/logout' : role === 'child' ? `/${famSlug}/join` : '/login',
+			href: session ? '/logout' : '/login',
 			label: session ? 'Log out' : 'Log in',
 			icon: logoutIcon
 		}
diff --git a/frontend/src/lib/server/session.ts b/frontend/src/lib/server/session.ts
index 0a06f64..9a8fdf2 100644
--- a/frontend/src/lib/server/session.ts
+++ b/frontend/src/lib/server/session.ts
@@ -7,7 +7,7 @@ import type { Cookies } from '@sveltejs/kit';
 // the token server-side via the layout load (pbToken) and seeds pb.authStore.
 // Secure flag is set in prod so it's only sent over HTTPS.
 export const SESSION_COOKIE = 'pb_token';
-const MAX_AGE = 60 * 60 * 24; // 24h, PB token exp is the real ceiling
+const MAX_AGE = 60 * 60 * 24 * 5; // 5 days — matches the PB users auth token duration
 
 export function setSessionCookie(cookies: Cookies, token: string) {
 	cookies.set(SESSION_COOKIE, token, {
diff --git a/frontend/src/routes/[fam]/+layout.svelte b/frontend/src/routes/[fam]/+layout.svelte
index 722427a..300ec1d 100644
--- a/frontend/src/routes/[fam]/+layout.svelte
+++ b/frontend/src/routes/[fam]/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { invalidateAll } from '$app/navigation';
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import { initRealtimePb, pb } from '$lib/pocketbase';
 	import { famStore } from '$lib/stores/fam.svelte';
 	import { chatStore } from '$lib/stores/chat.svelte';
@@ -146,20 +146,30 @@
 		);
 	});
 
-	onMount(() => {
+	// Client-only realtime wiring. Must be reactive (not onMount): after a
+	// member redeems their OTP on /{fam}/join/{username}, the 303 redirect is a
+	// client-side navigation that REUSES this layout instance, so onMount would
+	// never re-fire. Keying on data.famId ensures the PB client is re-seeded with
+	// the fresh token and famStore inits + subscribes the moment a session lands.
+	$effect(() => {
+		const famId = page.data.famId;
+		if (!famId) return;
 		initRealtimePb(page.data.pbToken || '');
-		if (page.data.famId) famStore.init(page.data.famId, page.data.fam);
+		famStore.init(famId, page.data.fam as any);
+	});
+
+	$effect(() => {
 		const chat = page.data.chat;
-		if (chat?.famId && chat?.actor) {
-			chatStore.init({
-				famId: chat.famId,
-				actorId: chat.actor.id,
-				actorType: chat.actor.type,
-				actorName: chat.actor.name,
-				actorColor: chat.actor.color || '#6366f1',
-				pbToken: page.data.pbToken || ''
-			});
-		}
+		if (!chat?.famId || !chat?.actor) return;
+		initRealtimePb(page.data.pbToken || '');
+		chatStore.init({
+			famId: chat.famId,
+			actorId: chat.actor.id,
+			actorType: chat.actor.type,
+			actorName: chat.actor.name,
+			actorColor: chat.actor.color || '#6366f1',
+			pbToken: page.data.pbToken || ''
+		});
 	});
 </script>
 
diff --git a/frontend/src/routes/join/+page.server.ts b/frontend/src/routes/join/+page.server.ts
new file mode 100644
index 0000000..8f37e1b
--- /dev/null
+++ b/frontend/src/routes/join/+page.server.ts
@@ -0,0 +1,34 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { redeemOtp } from '$lib/server/member-otp';
+import { slugify, handle } from '@shared/slugify';
+import { setSessionCookie, clearLegacyCookies } from '$lib/server/session';
+
+export const actions = {
+	default: async (event) => {
+		const fd = await event.request.formData();
+		const famName = (fd.get('family') || '').toString().trim();
+		const name = (fd.get('name') || '').toString().trim();
+		const otp = (fd.get('otp') || '').toString().trim();
+
+		if (!famName) return fail(400, { error: 'Enter your family name.', famName, name, otp });
+		if (!name) return fail(400, { error: 'Enter your name.', famName, name, otp });
+		if (!otp) return fail(400, { error: 'Enter the code shown by your parent.', famName, name, otp });
+
+		const famSlug = slugify(famName);
+		try {
+			const token = await redeemOtp({ famSlug, username: name, otp });
+			clearLegacyCookies(event.cookies);
+			setSessionCookie(event.cookies, token);
+		} catch (e) {
+			return fail(400, {
+				error: e instanceof Error ? e.message : 'Join failed',
+				famName,
+				name,
+				otp
+			});
+		}
+
+		const handleName = handle(name);
+		throw redirect(303, `/${famSlug}/${encodeURIComponent(handleName)}`);
+	}
+};
diff --git a/frontend/src/routes/join/+page.svelte b/frontend/src/routes/join/+page.svelte
new file mode 100644
index 0000000..62409bb
--- /dev/null
+++ b/frontend/src/routes/join/+page.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { Button } from '$lib/components';
+	import { homeIcon } from '$lib/components/icons';
+
+	let name = $state('');
+	let family = $state('');
+	let otp = $state('');
+	let { form } = $props();
+</script>
+
+<svelte:head><title>Join a family</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">
+			<span class="home-badge">{@html homeIcon}</span>
+		</div>
+		<h1 class="text-xl font-bold text-slate-900">Join the family</h1>
+		<p class="mt-1 text-sm text-slate-500">
+			Enter your family 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') {
+						family = (result.data as any)?.family || '';
+						name = (result.data as any)?.name || '';
+						otp = (result.data as any)?.otp || '';
+					}
+					await update();
+				};
+			}}
+		>
+			<input
+				type="text"
+				name="family"
+				bind:value={family}
+				placeholder="Family name"
+				autocomplete="organization"
+				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="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>
+
+<style>
+	.home-badge :global(svg) {
+		width: 1.75rem;
+		height: 1.75rem;
+	}
+</style>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 272dcd2..53b3383 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import AuthShell from '$lib/components/AuthShell.svelte';
+	import { readShortcut } from '$lib/shortcut';
 
 	let { form } = $props();
 	let email = $state('');
@@ -9,6 +10,12 @@
 	let forgotLoading = $state(false);
 	let forgotSuccess = $state(false);
 
+	// Child sign-in target: jump straight to the fam join page when we know the
+	// family from a previous session; otherwise fall back to the root /join
+	// picker where the family is entered by name.
+	const shortcut = typeof window !== 'undefined' ? readShortcut() : null;
+	const childJoinHref = shortcut?.famSlug ? `/${shortcut.famSlug}/join` : '/join';
+
 	async function handleForgot() {
 		if (!forgotEmail || forgotLoading) return;
 		forgotLoading = true;
@@ -27,12 +34,17 @@
 	}
 </script>
 
-<AuthShell title="Log in" subtitle="Welcome back to FamDone.">
+<AuthShell
+	title="Log in"
+	subtitle="Welcome back to FamDone."
+	secondary={secondaryChild}
+>
 	{#if showForgot}
 		{#if forgotSuccess}
 			<p class="form-ok">
 				If an account exists for <strong>{forgotEmail}</strong>, a reset link is on its way.
 			</p>
+
 			<button
 				class="row-btn centered"
 				type="button"
@@ -86,10 +98,19 @@
 		<p class="alt">
 			Don't have a family yet? <a href="/signup">Create one</a>
 		</p>
-		<p>Trying to join as a child? Ask your parent to issue your QR code.</p>
 	{/if}
 </AuthShell>
 
+{#snippet secondaryChild()}
+	<div class="child-card">
+		<div>
+			<p class="child-title">Signing in as a child?</p>
+			<p class="child-hint">Join your family with a code from your parent.</p>
+		</div>
+		<a class="child-cta" href={childJoinHref}>Join as a child</a>
+	</div>
+{/snippet}
+
 <style>
 	form {
 		display: grid;
@@ -178,4 +199,36 @@
 		text-decoration: none;
 		font-weight: 500;
 	}
+	.child-card {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	.child-title {
+		margin: 0;
+		font-size: 0.95rem;
+		font-weight: 700;
+		color: #374151;
+	}
+	.child-hint {
+		margin: 0.2rem 0 0;
+		font-size: 0.82rem;
+		color: #6b7280;
+	}
+	.child-cta {
+		display: inline-block;
+		white-space: nowrap;
+		background: #f5f3ff;
+		color: #4338ca;
+		font-size: 0.85rem;
+		font-weight: 600;
+		text-decoration: none;
+		padding: 0.55rem 0.9rem;
+		border-radius: 8px;
+		border: 1px solid #ddd6fe;
+	}
+	.child-cta:hover {
+		background: #ede9fe;
+	}
 </style>