JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix login confusion and enforce reactive subscription after login

Browse Source
This commit is contained in:
JCEEE
2026-09-03 09:31:40 +01:00
parent 1360799b60
commit 8cec99715a
7 changed files with 204 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/[fam]/+layout.svelte
+23 -13
View File
@@ -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>
frontend/src/routes/join/+page.server.ts
+34
View File
@@ -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)}`);
}
};
frontend/src/routes/join/+page.svelte
+81
View File
@@ -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>
frontend/src/routes/login/+page.svelte
+55 -2
View File
@@ -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>