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

fix token login member

Browse Source
This commit is contained in:
JCEEE
2026-08-08 21:00:29 +01:00
parent 317f01520f
commit 142cf4a7f7
7 changed files with 592 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/index.ts
+1
View File
@@ -7,3 +7,4 @@ export { default as CardGrid } from './CardGrid.svelte';
export { default as Button } from './Button.svelte'; export { default as Button } from './Button.svelte';
export { default as Accordion } from './Accordion.svelte'; export { default as Accordion } from './Accordion.svelte';
export { default as Chat } from './Chat.svelte'; export { default as Chat } from './Chat.svelte';
export { default as AuthShell } from './AuthShell.svelte';
frontend/src/routes/+page.svelte
+337 -2
View File
@@ -1,2 +1,337 @@
<h1>Welcome to SvelteKit</h1> <script lang="ts">
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p> import { enhance } from '$app/forms';
import { Footer } from '$lib/components';
import type { Action, SubmitFunction } from './$types';
let email = $state('');
let password = $state('');
let famName = $state('');
let parentName = $state('');
let error = $state('');
let submitting = $state(false);
const submit: SubmitFunction = () => {
error = '';
submitting = true;
return async ({ result, update }) => {
if (result.type === 'failure') {
error = (result.data as any)?.error || 'Something went wrong. Please try again.';
}
submitting = false;
};
};
</script>
<svelte:head>
<title>FamChore — Chores done. Allowance earned.</title>
<meta
name="description"
content="Turn family chores into points and pocket money. Assign chores, kids complete them, allowances are calculated automatically."
/>
</svelte:head>
<main class="landing">
<!-- HERO -->
<section class="hero">
<div class="hero-inner">
<div class="hero-copy">
<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.
</p>
<ul class="hero-ticks">
<li>Set up in under a minute</li>
<li>Kids join with a simple invite code</li>
<li>Allowance lands on payday, automatically</li>
</ul>
</div>
<div class="signup-card">
<h2>Start your family</h2>
<p class="card-sub">Free to get going. Takes about a minute.</p>
<form method="POST" action="/signup" use:enhance={submit}>
{#if error}
<p class="form-error">{error}</p>
{/if}
<label>
Family name
<input name="famName" bind:value={famName} placeholder="The Smiths" required />
</label>
<label>
Your name
<input name="parentName" bind:value={parentName} placeholder="Mum / Dad" required />
</label>
<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}
placeholder="8+ characters"
minlength={8}
required
/>
</label>
<button class="submit" type="submit" disabled={submitting}>
{submitting ? 'Creating your family…' : 'Create my family'}
</button>
</form>
<p class="card-alt">
Already have a family? <a href="/login">Log in</a>
</p>
</div>
</div>
</section>
<!-- EXPLAINER -->
<section class="explainer">
<h2>How it works</h2>
<div class="steps">
<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>
</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>
</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>
</article>
</div>
</section>
<!-- FEATURES -->
<section class="features">
<h2>Everything a family needs</h2>
<div class="feature-grid">
<article class="feature">
<h3>Chore board</h3>
<p>Reusable chore templates and a simple assignment grid. Build once, reuse every week.</p>
</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>
</article>
<article class="feature">
<h3>Automatic allowance</h3>
<p>Points convert to money using your family's own rules. No mental maths, no arguments.</p>
</article>
<article class="feature">
<h3>Rewards &amp; bonuses</h3>
<p>Kids can spend points on rewards, and you can run a monthly bonus for the top earner.</p>
</article>
<article class="feature">
<h3>Kid-friendly</h3>
<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>
</article>
</div>
<div class="cta">
<p>Ready to make chores painless?</p>
<a class="cta-btn" href="/signup">Create your family</a>
</div>
</section>
</main>
<Footer />
<style>
.landing {
font-family: system-ui, -apple-system, sans-serif;
color: #1f2937;
}
/* HERO */
.hero {
background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
padding: 4.5rem 1.5rem;
}
.hero-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 3rem;
align-items: center;
}
.pill {
display: inline-block;
background: #e0e7ff;
color: #4338ca;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 999px;
margin-bottom: 1rem;
}
h1 {
font-size: 2.6rem;
line-height: 1.1;
margin: 0 0 1rem;
}
.accent { color: #4338ca; }
.lede {
font-size: 1.1rem;
line-height: 1.6;
color: #4b5563;
max-width: 34rem;
margin: 0 0 1.5rem;
}
.hero-ticks {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.6rem;
}
.hero-ticks li::before {
content: "✓";
color: #4338ca;
font-weight: 700;
margin-right: 0.5rem;
}
/* SIGNUP CARD */
.signup-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
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 label {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 0.85rem;
font-weight: 500;
color: #374151;
}
.signup-card input {
padding: 0.6rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 0.95rem;
}
.signup-card input:focus {
outline: none;
border-color: #4338ca;
box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15);
}
.form-error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
margin: 0;
}
.submit {
margin-top: 0.25rem;
background: #4338ca;
color: #fff;
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; }
/* EXPLAINER */
.explainer, .features {
max-width: 1100px;
margin: 0 auto;
padding: 4rem 1.5rem;
}
.explainer h2, .features h2 {
text-align: center;
font-size: 1.9rem;
margin: 0 0 2rem;
}
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.step {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 1.5rem;
}
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #4338ca;
color: #fff;
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; }
/* FEATURES */
.features { background: #f5f6fa; border-radius: 0; }
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.feature {
background: #fff;
border: 1px solid #e5e7eb;
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; }
.cta-btn {
display: inline-block;
background: #4338ca;
color: #fff;
text-decoration: none;
font-weight: 600;
padding: 0.7rem 1.5rem;
border-radius: 8px;
}
.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; }
}
</style>
frontend/src/routes/join/[code]/+page.svelte
+51 -13
View File
@@ -1,29 +1,67 @@
<script lang="ts"> <script lang="ts">
import { AuthShell } from '$lib/components';
let { form } = $props(); let { form } = $props();
let name = $state(''); let name = $state('');
</script> </script>
<h1>Join family</h1> <AuthShell title="Join your family" subtitle="Enter your name to join. It must match a member slot created by your admin.">
<p>Enter your name to join. It must match a member slot created by your admin.</p>
<form method="POST">
{#if form?.error} {#if form?.error}
<p class="error">{form.error}</p> <p class="form-error">{form.error}</p>
{/if} {/if}
<form method="POST">
<label> <label>
Your name Your name
<input name="name" bind:value={name} required placeholder="Enter your exact name" /> <input name="name" bind:value={name} placeholder="Your exact name" required />
</label> </label>
<button type="submit">Join</button> <button type="submit">Join</button>
</form> </form>
</AuthShell>
<style> <style>
form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto; } form {
label { display: flex; flex-direction: column; gap: 0.25rem; } display: grid;
input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } gap: 0.9rem;
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; } 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-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;
}
</style> </style>
frontend/src/routes/join/[code]/[member]/+page.svelte
+29 -8
View File
@@ -1,24 +1,45 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from '$app/state';
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import { AuthShell } from '$lib/components';
let { form } = $props(); let { form } = $props();
let memberName = $derived(page.params.member); let memberName = $derived(page.params.member);
</script> </script>
<h1>Join family</h1> <AuthShell
title="Join as {memberName}"
subtitle="You've been invited to your family's chore board. One tap and you're in."
>
{#if form?.error} {#if form?.error}
<p class="error">{form.error}</p> <p class="form-error">{form.error}</p>
{:else}
<p>Click below to join as <strong>{memberName}</strong></p>
{/if} {/if}
<form method="POST" use:enhance> <form method="POST" use:enhance>
<button type="submit">Join</button> <button type="submit">Join as {memberName}</button>
</form> </form>
</AuthShell>
<style> <style>
.error { color: #dc2626; padding: 0.5rem; background: #fef2f2; border-radius: 4px; } button {
button { padding: 0.75rem 1.5rem; background: #6366f1; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; } width: 100%;
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-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;
}
</style> </style>
frontend/src/routes/login/+page.svelte
+61 -13
View File
@@ -1,35 +1,83 @@
<script lang="ts"> <script lang="ts">
import { AuthShell } from '$lib/components';
let { form } = $props(); let { form } = $props();
let email = $state(''); let email = $state('');
let password = $state(''); let password = $state('');
</script> </script>
<h1>Log in</h1> <AuthShell title="Log in" subtitle="Welcome back to FamChore.">
<form method="POST">
{#if form?.error} {#if form?.error}
<p class="error">{form.error}</p> <p class="form-error">{form.error}</p>
{/if} {/if}
<form method="POST">
<label> <label>
Email Email
<input type="email" name="email" bind:value={email} required /> <input type="email" name="email" bind:value={email} placeholder="you@email.com" required />
</label> </label>
<label> <label>
Password Password
<input type="password" name="password" bind:value={password} required /> <input type="password" name="password" bind:value={password} required />
</label> </label>
<button type="submit">Log in</button> <button type="submit">Log in</button>
</form> </form>
<p>Don't have a family yet? <a href="/signup">Create one</a></p> <p class="alt">
Don't have a family yet? <a href="/signup">Create one</a>
</p>
</AuthShell>
<style> <style>
form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto; } form {
label { display: flex; flex-direction: column; gap: 0.25rem; } display: grid;
input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } gap: 0.9rem;
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; } 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-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> </style>
frontend/src/routes/signup/+page.svelte
+72 -19
View File
@@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AuthShell } from '$lib/components';
let { form } = $props(); let { form } = $props();
let email = $state(''); let email = $state('');
let password = $state(''); let password = $state('');
@@ -6,42 +8,93 @@
let parentName = $state(''); let parentName = $state('');
</script> </script>
<h1>Create your family</h1> <AuthShell title="Create your family" subtitle="Set up in about a minute. Free to get going.">
<form method="POST">
{#if form?.error} {#if form?.error}
<p class="error">{form.error}</p> <p class="form-error">{form.error}</p>
{/if} {/if}
<form method="POST">
<label> <label>
Family name Family name
<input name="famName" bind:value={famName} required /> <input name="famName" bind:value={famName} placeholder="The Smiths" required />
</label> </label>
<label> <label>
Your name (parent) Your name
<input name="parentName" bind:value={parentName} placeholder="Mum / Dad" required /> <input name="parentName" bind:value={parentName} placeholder="Mum / Dad" required />
</label> </label>
<label> <label>
Email Email
<input type="email" name="email" bind:value={email} required /> <input type="email" name="email" bind:value={email} placeholder="you@email.com" required />
</label> </label>
<label> <label>
Password Password
<input type="password" name="password" bind:value={password} minlength={8} required /> <input
type="password"
name="password"
bind:value={password}
placeholder="8+ characters"
minlength={8}
required
/>
</label> </label>
<button type="submit">Create my family</button>
<button type="submit">Create family</button>
</form> </form>
<p>Already have an account? <a href="/login">Log in</a></p> <p class="alt">
Already have a family? <a href="/login">Log in</a>
</p>
</AuthShell>
<style> <style>
form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto; } form {
label { display: flex; flex-direction: column; gap: 0.25rem; } display: grid;
input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } gap: 0.9rem;
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; } 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-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> </style>
proxy/src/index.ts
+10 -5
View File
@@ -341,21 +341,26 @@ app.post("/api/members/verify-token", async (c) => {
const { deviceToken, famSlug } = await c.req.json(); const { deviceToken, famSlug } = await c.req.json();
if (!deviceToken || !famSlug) if (!deviceToken || !famSlug)
return c.json({ error: "deviceToken, famSlug required" }, 400); return c.json({ error: "deviceToken, famSlug required" }, 400);
const fams = await pb.getList("fams", `slug = '${famSlug}'`);
const fam = fams.items?.[0];
if (!fam) return c.json({ error: "Fam not found" }, 404);
const hashHex = crypto const hashHex = crypto
.createHash("sha256") .createHash("sha256")
.update(deviceToken) .update(deviceToken)
.digest("hex"); .digest("hex");
// Look the member up by its (unique) device token hash, then confirm the
// requested slug belongs to that member's own fam. Looking up by slug first
// is unsafe because slug isn't unique — duplicate fams (e.g. after dev↔prod
// store drift) would resolve to the wrong family and reject valid tokens.
const members = await pb.getList( const members = await pb.getList(
"members", "members",
`famId = '${fam.id}' && deviceToken = '${hashHex}'`, `deviceToken = '${hashHex}'`,
); );
const member = members.items?.[0]; const member = members.items?.[0];
if (!member) return c.json({ error: "Invalid device token" }, 401); if (!member) return c.json({ error: "Invalid device token" }, 401);
const fams = await pb.getList("fams", `id = '${member.famId}'`);
const fam = fams.items?.[0];
if (!fam || fam.slug !== famSlug)
return c.json({ error: "Invalid device token" }, 401);
return c.json({ return c.json({
famId: fam.id, famId: member.famId,
memberId: member.id, memberId: member.id,
name: member.name, name: member.name,
color: member.color, color: member.color,