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

final flows including emails for passwords

Browse Source
This commit is contained in:
JCEEE
2026-09-01 11:58:43 +01:00
parent f491dbfbf1
commit 40d7bf7398
22 changed files with 1977 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+page.svelte
+153 -51
View File
@@ -40,14 +40,19 @@
<span class="pill">For busy families</span>
<h1>Chores done. <span class="accent">Allowance earned.</span></h1>
<p class="lede">
FamChore turns everyday household chores into points and pocket money. Assign the
chores, let your kids see their progress live, and FamChore calculates the allowance
automatically — no spreadsheets, no nagging.
FamChore turns everyday household chores into points and pocket money. Assign the chores,
let your kids see their progress live, and FamChore calculates the allowance automatically
— no spreadsheets, no nagging.
</p>
<ul class="hero-ticks">
<li><span class="tick">{@html checkCircleIcon}</span>Set up in under a minute</li>
<li><span class="tick">{@html checkCircleIcon}</span>Kids join with a simple invite code</li>
<li><span class="tick">{@html checkCircleIcon}</span>Allowance lands on payday, automatically</li>
<li>
<span class="tick">{@html checkCircleIcon}</span>Kids join with a simple invite code
</li>
<li>
<span class="tick">{@html checkCircleIcon}</span>Allowance lands on payday,
automatically
</li>
</ul>
</div>
@@ -56,7 +61,9 @@
<p class="card-sub">Free to get going. Takes about a minute.</p>
<a class="submit" href="/signup">Create my family</a>
<p class="card-alt">
<a href="/pricing">See pricing {@html chevronRightIcon}</a>
<a class="flex gap-2 self-center align-center justify-center" href="/pricing"
>See pricing {@html chevronRightIcon}</a
>
</p>
<p class="card-alt">
Already have a family? <a href="/login">Log in</a>
@@ -72,17 +79,26 @@
<article class="step">
<span class="step-num">1</span>
<h3>Create your family</h3>
<p>Set up chores and how much each one is worth. Your kids join in seconds with an invite code.</p>
<p>
Set up chores and how much each one is worth. Your kids join in seconds with an invite
code.
</p>
</article>
<article class="step">
<span class="step-num">2</span>
<h3>Kids do the work</h3>
<p>They see today's chores as a simple card board and tick them off as they go — points are added instantly.</p>
<p>
They see today's chores as a simple card board and tick them off as they go — points are
added instantly.
</p>
</article>
<article class="step">
<span class="step-num">3</span>
<h3>Allowance pays out</h3>
<p>Points add up, then turn into pocket money on payday. Rewards and monthly bonuses keep it fun.</p>
<p>
Points add up, then turn into pocket money on payday. Rewards and monthly bonuses keep it
fun.
</p>
</article>
</div>
</section>
@@ -97,7 +113,10 @@
</article>
<article class="feature">
<h3>Live progress</h3>
<p>Realtime sync across the whole family — see points and progress update the moment a chore is done.</p>
<p>
Realtime sync across the whole family — see points and progress update the moment a chore
is done.
</p>
</article>
<article class="feature">
<h3>Automatic allowance</h3>
@@ -109,17 +128,27 @@
</article>
<article class="feature">
<h3>Kid-friendly</h3>
<p>A simple, colourful interface kids love — big buttons, clear feedback, their own space.</p>
<p>
A simple, colourful interface kids love — big buttons, clear feedback, their own space.
</p>
</article>
<article class="feature">
<h3>Private by design</h3>
<p>Everything is scoped to your family. Kids join with an invite code and stay in your family.</p>
<p>
Everything is scoped to your family. Kids join with an invite code and stay in your
family.
</p>
</article>
</div>
<div class="cta">
<p>Ready to make chores painless?</p>
<a class="cta-btn" href="/signup">Create your family</a>
<p class="card-alt"><a href="/pricing">or see pricing {@html chevronRightIcon}</a></p>
<p class="card-alt">
<a
class="hover:underline self-center items-center justify-center flex gap-2"
href="/pricing">or see pricing {@html chevronRightIcon}</a
>
</p>
</div>
</section>
</main>
@@ -128,7 +157,10 @@
<style>
.landing {
font-family: system-ui, -apple-system, sans-serif;
font-family:
system-ui,
-apple-system,
sans-serif;
color: #1f2937;
}
@@ -149,7 +181,9 @@
text-decoration: none;
color: #1f2937;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition: border-color 0.15s, box-shadow 0.15s;
transition:
border-color 0.15s,
box-shadow 0.15s;
}
.return-chip:hover {
border-color: #c7d2fe;
@@ -214,7 +248,9 @@
line-height: 1.1;
margin: 0 0 1rem;
}
.accent { color: #4338ca; }
.accent {
color: #4338ca;
}
.lede {
font-size: 1.1rem;
line-height: 1.6;
@@ -230,7 +266,7 @@
gap: 0.6rem;
}
.hero-ticks li::before {
content: "";
content: '';
}
.hero-ticks .tick {
display: inline-flex;
@@ -254,9 +290,19 @@
box-shadow: 0 12px 30px rgba(67, 56, 202, 0.08);
padding: 1.75rem;
}
.signup-card h2 { margin: 0 0 0.25rem; font-size: 1.35rem; }
.card-sub { margin: 0 0 1.25rem; color: #6b7280; font-size: 0.9rem; }
.signup-card form { display: grid; gap: 0.9rem; }
.signup-card h2 {
margin: 0 0 0.25rem;
font-size: 1.35rem;
}
.card-sub {
margin: 0 0 1.25rem;
color: #6b7280;
font-size: 0.9rem;
}
.signup-card form {
display: grid;
gap: 0.9rem;
}
.signup-card label {
display: flex;
flex-direction: column;
@@ -285,32 +331,52 @@
font-size: 0.85rem;
margin: 0;
}
.submit {
display: block;
text-align: center;
margin-top: 0.25rem;
background: #4338ca;
color: #fff;
text-decoration: none;
border: none;
border-radius: 8px;
padding: 0.75rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.submit:hover { background: #3730a3; }
.submit:disabled { opacity: 0.6; cursor: not-allowed; }
.card-alt { margin: 1rem 0 0; font-size: 0.85rem; color: #6b7280; text-align: center; }
.card-alt a { color: #4338ca; text-decoration: none; font-weight: 500; }
.submit {
display: block;
text-align: center;
margin-top: 0.25rem;
background: #4338ca;
color: #fff;
text-decoration: none;
border: none;
border-radius: 8px;
padding: 0.75rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.submit:hover {
background: #3730a3;
}
.submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.card-alt {
margin: 1rem 0 0;
font-size: 0.85rem;
color: #6b7280;
text-align: center;
}
.card-alt a {
color: #4338ca;
text-decoration: none;
font-weight: 500;
white-space: nowrap;
}
.card-alt a :global(svg) {
vertical-align: -0.2em;
}
/* EXPLAINER */
.explainer, .features {
.explainer,
.features {
max-width: 1100px;
margin: 0 auto;
padding: 4rem 1.5rem;
}
.explainer h2, .features h2 {
.explainer h2,
.features h2 {
text-align: center;
font-size: 1.9rem;
margin: 0 0 2rem;
@@ -338,11 +404,22 @@
font-weight: 700;
margin-bottom: 0.75rem;
}
.step h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.step p { margin: 0; color: #4b5563; font-size: 0.92rem; line-height: 1.55; }
.step h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.step p {
margin: 0;
color: #4b5563;
font-size: 0.92rem;
line-height: 1.55;
}
/* FEATURES */
.features { background: #f5f6fa; border-radius: 0; }
.features {
background: #f5f6fa;
border-radius: 0;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -354,10 +431,26 @@
border-radius: 12px;
padding: 1.25rem;
}
.feature h3 { margin: 0 0 0.4rem; font-size: 1rem; color: #111827; }
.feature p { margin: 0; color: #4b5563; font-size: 0.9rem; line-height: 1.55; }
.cta { text-align: center; margin-top: 2.5rem; }
.cta p { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; }
.feature h3 {
margin: 0 0 0.4rem;
font-size: 1rem;
color: #111827;
}
.feature p {
margin: 0;
color: #4b5563;
font-size: 0.9rem;
line-height: 1.55;
}
.cta {
text-align: center;
margin-top: 2.5rem;
}
.cta p {
font-size: 1.15rem;
font-weight: 600;
margin: 0 0 1rem;
}
.cta-btn {
display: inline-block;
background: #4338ca;
@@ -367,12 +460,21 @@
padding: 0.7rem 1.5rem;
border-radius: 8px;
}
.cta-btn:hover { background: #3730a3; }
.cta-btn:hover {
background: #3730a3;
}
/* RESPONSIVE */
@media (max-width: 860px) {
.hero-inner { grid-template-columns: 1fr; }
.steps, .feature-grid { grid-template-columns: 1fr; }
h1 { font-size: 2rem; }
.hero-inner {
grid-template-columns: 1fr;
}
.steps,
.feature-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 2rem;
}
}
</style>
frontend/src/routes/[fam]/+layout.svelte
+1 -1
View File
@@ -22,7 +22,7 @@
let accessReason = $derived(data.famAccess?.reason || '');
// Settings stays usable while paused so admins can apply a code / manage billing.
let hasAuth = $derived(!!data.session);
let locked = $derived((disabled && !page.url.pathname.endsWith('/settings')) || !hasAuth);
let locked = $derived(disabled && !page.url.pathname.endsWith('/settings'));
// ── Post-checkout activation (event-driven) ──
// Landing with ?checkout=return: if the webhook has already landed we show
frontend/src/routes/[fam]/[username]/settings/+page.server.ts
+68 -7
View File
@@ -1,12 +1,17 @@
import { redirect, fail } from '@sveltejs/kit';
import type { RequestEvent } from '@sveltejs/kit';
import { pbUser } from '$lib/server/pocketbase';
import { pbAdmin } from '$lib/server/pocketbase';
import { pbAdmin, createSuperClient } from '$lib/server/pocketbase';
import { servicesFor } from '$lib/server/servicesFor';
import { issueAccess, createChild } from '$lib/server/member-otp';
import { slugify } from '@shared/slugify';
import { issueAccess, createChild, inviteParent } from '$lib/server/member-otp';
import { sendParentInviteEmail } from '$lib/server/email';
import { slugify, handle, famUsername } from '@shared/slugify';
import { applyAccessCode } from '$lib/server/access';
import { createBillingPortalSession, cancelSubscriptionAtPeriodEnd, getSubscriptionStatus } from '$lib/server/stripe';
import {
createBillingPortalSession,
cancelSubscriptionAtPeriodEnd,
getSubscriptionStatus
} from '$lib/server/stripe';
function famIdOf(event: RequestEvent): string {
if (!event.locals.user) throw redirect(303, '/login');
@@ -67,6 +72,64 @@ export const actions = {
}
},
inviteParent: async (event: RequestEvent) => {
const famId = famIdOf(event);
const famSlug: string = event.params.fam as string;
const fd = await event.request.formData();
const name = (fd.get('name') || '').toString().trim();
const email = (fd.get('email') || '').toString().trim().toLowerCase();
if (!name || !email) return { error: 'Name and email required' };
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return { error: 'Invalid email' };
try {
const { otp, joinUrl } = await inviteParent({ famId, famSlug, name, email });
const fam = await pbAdmin.getOne('fams', famId);
await sendParentInviteEmail({
to: email,
inviteLink: `${event.url.origin}${joinUrl}?code=${otp}`,
famName: fam?.name || famSlug,
otp
});
return { ok: true };
} catch (e) {
return { error: e instanceof Error ? e.message : 'Failed to invite parent' };
}
},
currentAccess: async (event: RequestEvent) => {
const famId = famIdOf(event);
const famSlug: string = event.params.fam as string;
const fd = await event.request.formData();
const name = (fd.get('name') || '').toString().trim();
if (!name) return { error: 'Select a child to reveal' };
try {
const pb = await createSuperClient();
const username = famUsername(famSlug, handle(name));
const child = await pb
.collection('users')
.getFirstListItem(`famId='${famId}' && username='${username}'`)
.catch(() => null);
if (!child) return { error: 'No such child' };
const otpRec = await pb
.collection('otp')
.getFirstListItem(`famId='${famId}' && userId='${child.id}'`)
.catch(() => null);
if (!otpRec?.otp) return { error: 'No active code yet — issue one first' };
const ageMs = Date.now() - new Date(otpRec.updatedAt).getTime();
if (ageMs > 20 * 60 * 1000) {
return { error: 'Current code has expired — issue a new one' };
}
const handleName = handle(name);
return {
ok: true,
otp: otpRec.otp as string,
joinUrl: `/${famSlug}/join/${encodeURIComponent(handleName)}`,
name
};
} catch (e) {
return { error: e instanceof Error ? e.message : 'Failed to reveal current code' };
}
},
renameFam: async (event: RequestEvent) => {
const famId = famIdOf(event);
const fd = await event.request.formData();
@@ -144,9 +207,7 @@ export const actions = {
const id = fd.get('id') as string;
const active = fd.get('active') === '1';
if (!id) return { error: 'Season ID required' };
await pbUser(event)
.collection('seasons')
.update(id, { active });
await pbUser(event).collection('seasons').update(id, { active });
return { ok: true };
},
frontend/src/routes/[fam]/[username]/settings/+page.svelte
+355 -167
View File
@@ -17,6 +17,10 @@
import { handleOf } from '@shared/slugify';
import { addMonthsUTC, formatShortDate } from '$lib/format';
import QRCode from 'qrcode';
import House from '@lucide/svelte/icons/house';
import UserPlus from '@lucide/svelte/icons/user-plus';
import Shield from '@lucide/svelte/icons/shield';
import Smartphone from '@lucide/svelte/icons/smartphone';
let { data } = $props();
@@ -77,14 +81,25 @@
}
}
});
let showQR = $state(false);
let qrDataUrl = $state('');
let copied = $state(false);
let parentInviteName = $state('');
let parentInviteEmail = $state('');
let members = $derived(famStore.initialized ? famStore.members : (data.members || []));
let members = $derived(famStore.initialized ? famStore.members : data.members || []);
let deletingSeason = $state<any>(null);
let issued = $state<{ otp: string; joinUrl: string; name: string } | null>(null);
let issueModal = $state<{ otp: string; joinUrl: string; name: string } | null>(null);
let seasonColor = $state('#6366f1');
const seasonColors = [
'#6366f1',
'#ec4899',
'#f59e0b',
'#10b981',
'#3b82f6',
'#ef4444',
'#8b5cf6',
'#14b8a6'
];
// Optimistic season active toggle: flip immediately in the shared famStore
// (which drives both this list and the TopNav), then persist via the
@@ -108,8 +123,7 @@
}
}
let invitePath = $derived(issued ? `${issued.joinUrl}?code=${issued.otp}` : '');
let inviteUrl = $derived(issued ? `${page.url.origin}${invitePath}` : '');
let invitePath = $derived(issueModal ? `${issueModal.joinUrl}?code=${issueModal.otp}` : '');
function copy(url: string) {
navigator.clipboard.writeText(url);
@@ -117,20 +131,38 @@
setTimeout(() => (copied = false), 2000);
}
function openIssueModal(data: { otp: string; joinUrl: string; name: string }) {
issueModal = data;
qrDataUrl = '';
generateQR(`${page.url.origin}${data.joinUrl}?code=${data.otp}`);
}
async function generateQR(url: string) {
qrDataUrl = await QRCode.toDataURL(url, { width: 200, margin: 1 });
}
function toggleQR() {
showQR = !showQR;
if (!showQR) qrDataUrl = '';
else generateQR(inviteUrl);
}
function handleParentInvite() {
alert('Parent invite coming soon — email would be sent to ' + parentInviteEmail);
}
function handleInviteResult(result: any) {
if (result.type === 'success') {
const d = result.data as { ok?: boolean; error?: string } | undefined;
if (d?.ok) {
notices.success(
'Invite sent',
`Email sent to ${parentInviteEmail} with a join link and code.`
);
parentInviteName = '';
parentInviteEmail = '';
} else if (d?.error) {
notices.error('Could not invite parent', d.error);
}
} else if (result.type === 'failure') {
notices.error('Could not invite parent', (result.data as any)?.error || 'Please try again.');
}
}
function timeUntil(iso: string): string {
const diffMs = new Date(iso).getTime() - Date.now();
if (diffMs <= 0) return 'expired';
@@ -158,9 +190,14 @@
<ViewHeader title="Settings" hero />
{#snippet famIcon()}<House />{/snippet}
{#snippet inviteIcon()}<UserPlus />{/snippet}
{#snippet accountIcon()}<Shield />{/snippet}
{#snippet appIcon()}<Smartphone />{/snippet}
<Accordion>
<!-- Family -->
<AccordionItem title="Family" open>
<AccordionItem title="Family" icon={famIcon} open>
<CardGrid>
<Card title="Family Name">
<p class="hint">
@@ -232,35 +269,53 @@
</p>
</Card>
<Card title="Seasons" cols={1}>
<p class="hint">Group chores into seasons. Tick a season on to make it available for assignment; untick to disable it.</p>
<p class="hint">
Group chores into seasons. Tick a season on to make it available for assignment; untick to
disable it.
</p>
<form method="POST" action="?/createSeason" use:enhance class="season-form">
<label class="field-label" for="season-name">New season</label>
<input id="season-name" name="name" placeholder="Season name" required />
<div class="color-row">
<label for="season-color">Colour</label>
<input
id="season-color"
name="color"
type="color"
value="#6366f1"
class="color-input"
/>
<div class="season-color-row">
<label>Colour</label>
<div class="season-swatches">
{#each seasonColors as color}
<button
type="button"
class="season-swatch"
class:selected={color === seasonColor}
style="background:{color}"
aria-label={color}
onclick={() => (seasonColor = color)}
></button>
{/each}
</div>
<input type="hidden" name="color" value={seasonColor} />
</div>
<Button type="submit" size="sm">Add</Button>
</form>
<ul>
{#each (famStore.initialized ? famStore.seasons : data.seasons) as s}
<ul class="season-list">
<li class="season-head" aria-hidden="true">
<span class="season-name">Season</span>
<span>Active</span>
<span>Action</span>
</li>
{#each famStore.initialized ? famStore.seasons : data.seasons as s}
<li>
<span class="dot" style="background:{s.color}"></span>
<span class="season-name">{s.name}</span>
<span class="season-cell">
<span class="dot" style="background:{s.color}"></span>
<span class="season-name">{s.name}</span>
</span>
<button
type="button"
class="season-check"
class:on={s.active !== false}
role="switch"
aria-checked={s.active !== false}
title={s.active !== false ? 'Active — click to disable' : 'Disabled — click to enable'}
title={s.active !== false
? 'Active — click to disable'
: 'Disabled — click to enable'}
onclick={() => toggleSeasonActive(s, !(s.active !== false))}
>
{#if s.active !== false}
@@ -272,12 +327,15 @@
stroke="currentColor"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
><polyline points="20 6 9 17 4 12" /></svg
stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg
>
{/if}
</button>
<Button variant="danger" size="sm" onclick={() => (deletingSeason = s)}>Remove</Button>
<span class="season-action">
<Button variant="danger" size="sm" onclick={() => (deletingSeason = s)}
>Remove</Button
>
</span>
</li>
{/each}
</ul>
@@ -312,129 +370,190 @@
</CardGrid>
</AccordionItem>
<AccordionItem title="Invites">
<AccordionItem title="Invites" icon={inviteIcon}>
<CardGrid>
<Card title="Members ({members.length})" cols={2}>
<div class="members-grid">
<div class="members-add">
<p class="hint">Add a child. They'll pick their own colour after joining.</p>
<form method="POST" action="?/addMember" use:enhance>
<label class="field-label" for="new-child">New child</label>
<input
id="new-child"
name="name"
bind:value={addName}
placeholder="Child name"
required
/>
<Button type="submit" size="sm">Add child</Button>
</form>
</div>
<ul class="members-list">
{#each members as m}
<li>
<span class="member-left">
<span class="member-color" style="background:{m.color}"></span>
<span class="member-info">
<span class="member-name">{m.name}</span>
<span class="member-handle">/{famSlug}/{handleOf(m.username)}</span>
</span>
</span>
<span class="member-actions">
<Button href="/{famSlug}/{handleOf(m.username)}" variant="secondary" size="sm"
>Preview</Button
>
<form method="POST" action="?/deleteMember" use:enhance class="inline">
<input type="hidden" name="id" value={m.id} />
<Button
type="submit"
variant="danger"
size="sm"
onclick={() => confirm('Remove {m.name}?')}>Remove</Button
>
</form>
</span>
</li>
{/each}
</ul>
</div>
<Card title="New member" cols={1}>
<p class="hint">Add a child. They'll pick their own colour after joining.</p>
<form method="POST" action="?/addMember" use:enhance>
<label class="field-label" for="new-child">New child</label>
<input
id="new-child"
name="name"
bind:value={addName}
placeholder="Child name"
required
/>
<Button type="submit" size="sm">Add child</Button>
</form>
</Card>
<Card title="Invite Children" cols={1}>
<form
method="POST"
action="?/issueAccess"
use:enhance={() => {
return async ({ formData, result }) => {
if (result.type === 'success' && result.data?.ok) {
showQR = false;
qrDataUrl = '';
issued = {
otp: result.data.otp,
joinUrl: result.data.joinUrl,
name: String(formData.get('name') || '')
};
} else if (result.type === 'success' && result.data?.error) {
alert(result.data.error);
}
};
}}
class="invite-form"
>
<Card title="Child access codes" cols={1} class="access-card">
<div class="access-body">
<p class="hint">
Generates a 6-digit code valid for 20 minutes. The child enters it at the join link.
</p>
<label class="field-label" for="invite-child">Child</label>
<select id="invite-child" bind:value={inviteChild} name="name" required>
<select id="invite-child" bind:value={inviteChild}>
<option value="">— Select a child —</option>
{#each members as m}
<option value={m.name}>{m.name}</option>
{/each}
</select>
<Button type="submit" size="sm" disabled={!inviteChild}>Issue code</Button>
</form>
<p class="hint">
Generates a 6-digit code valid for 20 minutes. The child enters it at the join link.
</p>
{#if issued?.otp}
<div class="mt-3 rounded-lg border border-indigo-200 bg-indigo-50 p-4">
<p class="text-xs text-slate-500">Code for {issued.name} (valid 20 min):</p>
<p class="my-2 text-center text-4xl font-bold tracking-[0.3em] text-indigo-700">
{issued.otp}
</p>
<p class="invite-url">{invitePath}</p>
<div class="actions justify-center">
<Button variant="secondary" size="sm" onclick={() => copy(inviteUrl)}
>{copied ? 'Copied!' : 'Copy URL'}</Button
<div class="access-cta-row">
<form
method="POST"
action="?/issueAccess"
use:enhance={() => {
return async ({ formData, result }) => {
if (result.type !== 'success') return;
const d = result.data as
| {
ok?: boolean;
otp?: string;
joinUrl?: string;
error?: string;
}
| undefined;
if (d?.ok && d.otp && d.joinUrl) {
openIssueModal({
otp: d.otp,
joinUrl: d.joinUrl,
name: String(formData.get('name') || '')
});
} else if (d?.error) {
alert(d.error);
}
};
}}
class="inline"
>
<input type="hidden" name="name" value={inviteChild} />
<Button type="submit" size="sm" variant="primary" disabled={!inviteChild}
>Issue new code</Button
>
<Button variant="secondary" size="sm" onclick={toggleQR}
>{showQR ? 'Hide QR' : 'Show QR'}</Button
</form>
<form
method="POST"
action="?/currentAccess"
use:enhance={() => {
return async ({ formData, result }) => {
if (result.type !== 'success') return;
const d = result.data as
| {
ok?: boolean;
otp?: string;
joinUrl?: string;
error?: string;
}
| undefined;
if (d?.ok && d.otp && d.joinUrl) {
openIssueModal({
otp: d.otp,
joinUrl: d.joinUrl,
name: String(formData.get('name') || '')
});
} else if (d?.error) {
alert(d.error);
}
};
}}
class="inline"
>
<input type="hidden" name="name" value={inviteChild} />
<Button type="submit" size="sm" variant="purple" disabled={!inviteChild}
>Reveal current</Button
>
</div>
{#if showQR && qrDataUrl}
<div class="qr-wrap"><img src={qrDataUrl} alt="QR Code" class="qr" /></div>
{/if}
</form>
</div>
{/if}
</div>
</Card>
<Card title="All members ({members.length})" cols={1}>
<ul class="members-list">
{#each members as m}
<li>
<span class="member-left">
<span class="member-color" style="background:{m.color}"></span>
<span class="member-info">
<span class="member-name">{m.name}</span>
<span class="member-handle">/{famSlug}/{handleOf(m.username)}</span>
</span>
</span>
<form method="POST" action="?/deleteMember" use:enhance class="inline">
<input type="hidden" name="id" value={m.id} />
<Button
type="submit"
variant="danger"
size="sm"
onclick={() => confirm('Remove {m.name}?')}>Remove</Button
>
</form>
</li>
{/each}
</ul>
</Card>
<Card title="Invite Parent" cols={1}>
<p class="hint">Send an email invitation for another parent to join as an admin.</p>
<div class="invite-form">
<form
method="POST"
action="?/inviteParent"
use:enhance={() => {
return async ({ result }) => handleInviteResult(result);
}}
>
<label class="field-label" for="parent-name">Parent name</label>
<input
id="parent-name"
name="name"
bind:value={parentInviteName}
placeholder="e.g. Alex"
required
/>
<label class="field-label" for="parent-email">Parent email</label>
<input
id="parent-email"
name="email"
type="email"
bind:value={parentInviteEmail}
placeholder="parent@example.com"
required
/>
<Button onclick={handleParentInvite} size="sm">Send invite</Button>
</div>
<p class="hint">They will set up their own password on first login.</p>
<Button type="submit" size="sm">Send invite</Button>
</form>
<p class="hint">They'll receive a link with a code to set up their own password.</p>
</Card>
</CardGrid>
{#if issueModal}
<div class="overlay" onclick={() => (issueModal = null)} role="presentation">
<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
<h3>Join code for {issueModal.name}</h3>
<p class="hint">Valid 20 minutes — the child enters it at the join link.</p>
<p class="code-display">{issueModal.otp}</p>
<p class="invite-url">{invitePath}</p>
<div class="qr-wrap">
{#if qrDataUrl}
<img src={qrDataUrl} alt="QR Code" class="qr" />
{/if}
</div>
<div class="actions justify-center">
<Button variant="secondary" size="sm" onclick={() => copy(invitePath)}
>{copied ? 'Copied!' : 'Copy URL'}</Button
>
</div>
<div class="modal-actions">
<button type="button" onclick={() => (issueModal = null)}>Done</button>
</div>
</div>
</div>
{/if}
</AccordionItem>
<AccordionItem title="Account">
<AccordionItem title="Account" icon={accountIcon}>
<CardGrid>
<!-- Access (codes) only relevant when NOT on a subscription -->
{#if fam?.paymentMode !== 'sub'}
@@ -515,8 +634,9 @@
<!-- Cancel requested: no CTA — just the countdown to expiry -->
<p class="hint">
<strong>No active subscription.</strong> You have
<strong>{timeUntil(data.subStatus.endsAt)}</strong> of access left
(until {formatShortDate(String(data.subStatus.endsAt))}). No further charges.
<strong>{timeUntil(data.subStatus.endsAt)}</strong> of access left (until {formatShortDate(
String(data.subStatus.endsAt)
)}). No further charges.
</p>
{:else if fam?.paymentMode === 'sub'}
<div class="actions">
@@ -560,7 +680,7 @@
</CardGrid>
</AccordionItem>
<AccordionItem title="App">
<AccordionItem title="App" icon={appIcon}>
<CardGrid>
{#if page.data.platformFlags?.debug}
<Card title="Debug Tools" cols={1} accent="#f59e0b">
@@ -703,25 +823,40 @@
}
/* ── Colour rows (seasons) ── */
.color-row {
.season-color-row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.color-row label {
.season-color-row label {
font-size: 0.8rem;
font-weight: 500;
color: #6b7280;
flex-shrink: 0;
}
.color-input {
width: 100%;
max-width: 160px;
height: 36px;
padding: 2px;
border: 1px solid #d1d5db;
border-radius: 8px;
.season-swatches {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.season-swatch {
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
transition:
border-color 0.12s ease,
transform 0.12s ease;
}
.season-swatch.selected {
border-color: #111827;
}
.season-swatch:hover {
transform: scale(1.08);
}
/* ── Lists ── */
@@ -742,9 +877,45 @@
li:last-child {
border-bottom: none;
}
/* ── Seasons table ── */
.season-list {
margin-top: 0.75rem;
}
.season-list li {
display: grid;
grid-template-columns: 1fr 3rem 5rem;
align-items: center;
gap: 0.6rem;
}
.season-list .season-head {
padding: 0.4rem 0;
border-bottom: 2px solid #e5e7eb;
font-size: 0.72rem;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.season-list .season-head .season-name {
padding-left: 0;
}
.season-cell {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.season-action {
display: flex;
justify-content: flex-start;
}
.season-name {
flex: 1;
min-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.season-check {
width: 26px;
@@ -792,25 +963,20 @@
margin-top: 0.75rem;
}
/* ── Members: two-column (add | list) ── */
.members-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
align-items: start;
}
.members-add form {
margin-bottom: 0;
}
/* ── Members ── */
.members-list {
border-left: 1px solid #f3f4f6;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
}
.member-left,
.member-actions {
.members-list li {
justify-content: space-between;
gap: 1rem;
}
.member-left {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.member-color {
width: 22px;
@@ -834,21 +1000,6 @@
font-size: 0.72rem;
color: #9ca3af;
}
.member-actions :global(.btn) {
flex: none;
width: auto;
}
@container (max-width: 380px) {
.members-grid {
grid-template-columns: 1fr;
}
.members-list {
border-left: none;
padding-left: 0;
border-top: 1px solid #f3f4f6;
padding-top: 0.5rem;
}
}
/* ── Action rows ── */
.actions {
@@ -873,6 +1024,43 @@
border-radius: 8px;
}
/* ── Child access codes (hierarchy-level card) ── */
.access-card {
background: linear-gradient(160deg, #ddd6fe 0%, #ede9fe 55%, #f5f3ff 100%) !important;
border: 1px solid #c4b5fd !important;
}
.access-card :global(.card-header) {
background: rgba(255, 255, 255, 0.45);
border-bottom-color: rgba(196, 181, 253, 0.5);
}
.access-body {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.access-cta-row {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.access-cta-row form.inline {
margin: 0;
flex: 1;
min-width: 150px;
}
.access-cta-row form.inline :global(.btn) {
width: 100%;
}
.code-display {
font-size: 2.6rem;
font-weight: 800;
letter-spacing: 0.28em;
text-align: center;
color: #4338ca;
margin: 0.75rem 0;
font-family: var(--font-mono, ui-monospace, monospace);
}
/* ── Narrow cards: stack rows / actions full width (container query) ── */
@container (max-width: 380px) {
.payday-row {
@@ -882,7 +1070,7 @@
.payday-row select {
width: 100%;
}
.color-row {
.season-color-row {
align-items: stretch;
}
.actions {
frontend/src/routes/[fam]/join/[username]/+page.server.ts
+51 -3
View File
@@ -1,6 +1,30 @@
import { fail, redirect } from '@sveltejs/kit';
import { redeemOtp } from '$lib/server/member-otp';
import { redeemOtp, redeemParentOtp } from '$lib/server/member-otp';
import { createSuperClient } from '$lib/server/pocketbase';
import { setSessionCookie, clearLegacyCookies } from '$lib/server/session';
import { famUsername, handle } from '@shared/slugify';
export async function load(event) {
const famSlug = event.params.fam;
const username = event.params.username;
const pb = await createSuperClient();
let isParent = false;
let famName = '';
try {
const fam = await pb.collection('fams').getFirstListItem(`slug='${famSlug}'`);
famName = fam?.name || famSlug;
const user = await pb
.collection('users')
.getFirstListItem(`famId='${fam.id}' && username='${famUsername(famSlug, handle(username))}'`)
.catch(() => null);
isParent = user?.role === 'parent';
} catch {
// Invalid fam slug — render as a child join, the action will reject.
}
return { isParent, famName };
}
export const actions = {
default: async (event) => {
@@ -8,11 +32,35 @@ export const actions = {
const username = event.params.username;
const fd = await event.request.formData();
const otp = (fd.get('otp') || '').toString().trim();
const password = (fd.get('password') || '').toString();
const confirmPassword = (fd.get('confirmPassword') || '').toString();
if (!otp) return fail(400, { error: 'Enter the code shown by your parent.' });
try {
const token = await redeemOtp({ famSlug: fam, username, otp });
// Parents set their own password on join; children use the derived one.
const pb = await createSuperClient();
const famRecord = await pb.collection('fams').getFirstListItem(`slug='${fam}'`);
const user = await pb
.collection('users')
.getFirstListItem(
`famId='${famRecord.id}' && username='${famUsername(fam, handle(username))}'`
)
.catch(() => null);
const isParent = user?.role === 'parent';
if (isParent) {
if (!password || password.length < 10) {
return fail(400, { error: 'Password must be at least 10 characters' });
}
if (password !== confirmPassword) {
return fail(400, { error: 'Passwords do not match' });
}
}
const token = isParent
? await redeemParentOtp({ famSlug: fam, username, otp, password })
: await redeemOtp({ famSlug: fam, username, otp });
clearLegacyCookies(event.cookies);
setSessionCookie(event.cookies, token);
} catch (e) {
@@ -21,4 +69,4 @@ export const actions = {
throw redirect(303, `/${fam}/${encodeURIComponent(username)}`);
}
};
};
frontend/src/routes/[fam]/join/[username]/+page.svelte
+47 -9
View File
@@ -7,21 +7,36 @@
const famSlug = page.params.fam;
const username = page.params.username;
let otp = $state(page.url.searchParams.get('code') || '');
let { form } = $props();
let password = $state('');
let confirmPassword = $state('');
let { data, form } = $props();
const isParent = $derived(data?.isParent);
const famName = $derived(data?.famName || famSlug);
</script>
<svelte:head><title>Join {famSlug}</title></svelte:head>
<svelte:head><title>{isParent ? 'Join as parent' : `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
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">Welcome to {famSlug}!</h1>
<p class="mt-1 text-sm text-slate-500">
Hi <span class="font-semibold text-slate-700">{username}</span> — enter the code your parent
gave you to get started.
</p>
{#if isParent}
<h1 class="text-xl font-bold text-slate-900">Join {famSlug}</h1>
<p class="mt-1 text-sm text-slate-500">
Hi <span class="font-semibold text-slate-700">{username}</span> — enter the code from your
email and create a password to join <strong>{famName}</strong> as a parent.
</p>
{:else}
<h1 class="text-xl font-bold text-slate-900">Welcome to {famSlug}!</h1>
<p class="mt-1 text-sm text-slate-500">
Hi <span class="font-semibold text-slate-700">{username}</span> — enter the code your parent gave
you to get started.
</p>
{/if}
<form
class="mt-6 flex flex-col gap-3"
@@ -45,10 +60,32 @@
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 isParent}
<input
type="password"
name="password"
bind:value={password}
placeholder="Create a password"
autocomplete="new-password"
minlength="10"
class="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
/>
<input
type="password"
name="confirmPassword"
bind:value={confirmPassword}
placeholder="Confirm password"
autocomplete="new-password"
minlength="10"
class="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
/>
{/if}
{#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>
<Button type="submit" variant="primary" size="lg"
>{isParent ? 'Set up my account' : 'Join'}</Button
>
</form>
<p class="mt-6 text-xs text-slate-400">
@@ -56,6 +93,7 @@
</p>
</section>
</main>
<style>
.home-badge :global(svg) {
width: 1.75rem;
frontend/src/routes/api/email/+server.ts
+62
View File
@@ -0,0 +1,62 @@
import { json } from '@sveltejs/kit';
import { RESEND_API } from '$app/env/private';
import { createSuperClient } from '$lib/server/pocketbase';
import { Resend } from 'resend';
export async function POST({ request, url }) {
const fd = await request.formData();
const email = (fd.get('email') || '').toString().trim().toLowerCase();
if (!email) {
return json({ ok: true }); // Generic response to avoid enumeration
}
try {
const pb = await createSuperClient();
// Find user by email
let user;
try {
user = await pb.collection('users').getFirstListItem(`email = '${email}'`);
} catch {
// User not found — still return success
return json({ ok: true });
}
// Only allow password reset for parents (they have emails)
if (user.role !== 'parent') {
return json({ ok: true });
}
// Generate token and expiry (1 hour)
const token = globalThis.crypto.randomUUID();
const expiry = new Date(Date.now() + 60 * 60 * 1000).toISOString();
// Store token on user record
await pb.collection('users').update(user.id, {
passwordResetToken: token,
passwordResetExpiry: expiry
});
// Send email via Resend
const resend = new Resend(String(RESEND_API));
const resetUrl = `${url.origin}/login/verify/${token}`;
await resend.emails.send({
from: 'no-reply@famchamp.ai',
to: email,
subject: 'Reset your FamChore password',
html: `
<p>You requested a password reset for your FamChore account.</p>
<p><a href="${resetUrl}">Click here to reset your password</a></p>
<p>This link expires in 1 hour.</p>
<p>If you didn't request this, you can ignore this email.</p>
`
});
} catch {
// Swallow all errors to avoid information leakage
}
// Always return success
return json({ ok: true });
}
frontend/src/routes/login/+page.svelte
+110 -18
View File
@@ -4,28 +4,90 @@
let { form } = $props();
let email = $state('');
let password = $state('');
let showForgot = $state(false);
let forgotEmail = $state('');
let forgotLoading = $state(false);
let forgotSuccess = $state(false);
async function handleForgot() {
if (!forgotEmail || forgotLoading) return;
forgotLoading = true;
try {
const fd = new FormData();
fd.set('email', forgotEmail);
const res = await fetch('/api/email', { method: 'POST', body: fd });
if (res.ok) {
forgotSuccess = true;
}
} catch {
// Silent — generic response
} finally {
forgotLoading = false;
}
}
</script>
<AuthShell title="Log in" subtitle="Welcome back to FamChore.">
{#if form?.error}
<p class="form-error">{form.error}</p>
{/if}
{#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"
onclick={() => {
showForgot = false;
forgotSuccess = false;
forgotEmail = '';
}}
>
Back to log in
</button>
{:else}
<form
onsubmit={(e) => {
e.preventDefault();
handleForgot();
}}
>
<label>
Email
<input type="email" bind:value={forgotEmail} placeholder="you@email.com" required />
</label>
<button type="submit" disabled={forgotLoading}>
{forgotLoading ? 'Sending...' : 'Send reset link'}
</button>
</form>
<button class="row-btn centered" type="button" onclick={() => (showForgot = false)}>
Back to log in
</button>
{/if}
{:else}
{#if form?.error}
<p class="form-error">{form.error}</p>
{/if}
<form method="POST">
<label>
Email
<input type="email" name="email" bind:value={email} placeholder="you@email.com" required />
</label>
<label>
Password
<input type="password" name="password" bind:value={password} required />
</label>
<button type="submit">Log in</button>
</form>
<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>
<form method="POST">
<label>
Email
<input type="email" name="email" bind:value={email} placeholder="you@email.com" required />
</label>
<label>
Password
<input type="password" name="password" bind:value={password} required />
</label>
<button class="row-btn" type="button" onclick={() => (showForgot = true)}>
Forgot password?
</button>
<button type="submit">Log in</button>
</form>
<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>
<style>
@@ -66,6 +128,36 @@
button:hover {
background: #3730a3;
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.row-btn {
background: none;
color: #4338ca;
font-size: 0.85rem;
font-weight: 500;
padding: 0;
text-decoration: underline;
cursor: pointer;
}
.row-btn:hover {
background: none;
}
.row-btn.centered {
display: block;
margin: 1.25rem auto 0;
width: fit-content;
}
.form-ok {
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
border-radius: 8px;
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
margin: 0 0 1rem;
}
.form-error {
background: #fef2f2;
color: #b91c1c;
frontend/src/routes/login/verify/[token]/+page.server.ts
+95
View File
@@ -0,0 +1,95 @@
import { fail, redirect } from '@sveltejs/kit';
import { createSuperClient } from '$lib/server/pocketbase';
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ params }) => {
const { token } = params;
try {
const pb = await createSuperClient();
// Find user with this reset token
const user = await pb
.collection('users')
.getFirstListItem(`passwordResetToken = '${token}'`)
.catch(() => null);
if (!user || !user.passwordResetExpiry) {
throw redirect(303, '/login');
}
// Check expiry (1 hour)
const expiryDate = new Date(user.passwordResetExpiry);
if (expiryDate < new Date()) {
// Token expired — clear it
await pb.collection('users').update(user.id, {
passwordResetToken: '',
passwordResetExpiry: ''
});
throw redirect(303, '/login');
}
return { valid: true };
} catch (e) {
// Redirect errors propagate; anything else → login
if (e instanceof Response) throw e;
throw redirect(303, '/login');
}
};
export const actions = {
default: async ({ params, request }) => {
const { token } = params;
const fd = await request.formData();
const password = fd.get('password') as string;
const confirmPassword = fd.get('confirmPassword') as string;
if (!password || !confirmPassword) {
return fail(400, { error: 'Both fields are required' });
}
if (password !== confirmPassword) {
return fail(400, { error: 'Passwords do not match' });
}
if (password.length < 10) {
return fail(400, { error: 'Password must be at least 10 characters' });
}
try {
const pb = await createSuperClient();
// Find user with this reset token
const user = await pb
.collection('users')
.getFirstListItem(`passwordResetToken = '${token}'`)
.catch(() => null);
if (!user || !user.passwordResetExpiry) {
return fail(400, { error: 'Invalid or expired reset link' });
}
// Check expiry (1 hour)
const expiryDate = new Date(user.passwordResetExpiry);
if (expiryDate < new Date()) {
// Token expired — clear it
await pb.collection('users').update(user.id, {
passwordResetToken: '',
passwordResetExpiry: ''
});
return fail(400, { error: 'Reset link has expired. Please request a new one.' });
}
// Update password and clear token
await pb.collection('users').update(user.id, {
password,
passwordResetToken: '',
passwordResetExpiry: ''
});
return { success: true };
} catch {
return fail(400, { error: 'Something went wrong. Please try again.' });
}
}
};
frontend/src/routes/login/verify/[token]/+page.svelte
+114
View File
@@ -0,0 +1,114 @@
<script lang="ts">
import AuthShell from '$lib/components/AuthShell.svelte';
let { form } = $props();
let password = $state('');
let confirmPassword = $state('');
</script>
<AuthShell title="Reset password" subtitle="Enter your new password below.">
{#if form?.success}
<p class="form-ok">Your password has been reset. You can now log in.</p>
<p class="alt"><a href="/login">Back to log in</a></p>
{:else}
{#if form?.error}
<p class="form-error">{form.error}</p>
{/if}
<form method="POST">
<label>
New password
<input
type="password"
name="password"
bind:value={password}
placeholder="At least 10 characters"
required
minlength="10"
/>
</label>
<label>
Confirm password
<input
type="password"
name="confirmPassword"
bind:value={confirmPassword}
placeholder="Re-enter your password"
required
minlength="10"
/>
</label>
<button type="submit">Reset password</button>
</form>
<p class="alt"><a href="/login">Back to log in</a></p>
{/if}
</AuthShell>
<style>
form {
display: grid;
gap: 0.9rem;
}
label {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 0.85rem;
font-weight: 500;
color: #374151;
}
input {
padding: 0.6rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 0.95rem;
}
input:focus {
outline: none;
border-color: #4338ca;
box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15);
}
button {
margin-top: 0.25rem;
background: #4338ca;
color: #fff;
border: none;
border-radius: 8px;
padding: 0.75rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
button:hover {
background: #3730a3;
}
.form-ok {
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
border-radius: 8px;
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
margin: 0 0 1rem;
}
.form-error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
margin: 0 0 1rem;
}
.alt {
margin: 1.25rem 0 0;
font-size: 0.85rem;
color: #6b7280;
text-align: center;
}
.alt a {
color: #4338ca;
text-decoration: none;
font-weight: 500;
}
</style>
frontend/src/routes/logout/+page.server.ts
+1 -2
View File
@@ -3,7 +3,6 @@ import { clearSessionCookie, clearLegacyCookies } from '$lib/server/session';
function signOut(event: { cookies: any }) {
clearSessionCookie(event.cookies);
event.cookies.delete('session', { path: '/' });
clearLegacyCookies(event.cookies);
}
@@ -17,4 +16,4 @@ export const actions = {
signOut(event);
throw redirect(303, '/');
}
};
};