fix token login member
This commit is contained in:
JCEEE
@@ -7,3 +7,4 @@ export { default as CardGrid } from './CardGrid.svelte';
|
||||
export { default as Button } from './Button.svelte';
|
||||
export { default as Accordion } from './Accordion.svelte';
|
||||
export { default as Chat } from './Chat.svelte';
|
||||
export { default as AuthShell } from './AuthShell.svelte';
|
||||
|
||||
@@ -1,2 +1,337 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<script lang="ts">
|
||||
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 & 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>
|
||||
|
||||
@@ -1,29 +1,67 @@
|
||||
<script lang="ts">
|
||||
import { AuthShell } from '$lib/components';
|
||||
|
||||
let { form } = $props();
|
||||
let name = $state('');
|
||||
</script>
|
||||
|
||||
<h1>Join family</h1>
|
||||
|
||||
<p>Enter your name to join. It must match a member slot created by your admin.</p>
|
||||
|
||||
<form method="POST">
|
||||
<AuthShell title="Join your family" subtitle="Enter your name to join. It must match a member slot created by your admin.">
|
||||
{#if form?.error}
|
||||
<p class="error">{form.error}</p>
|
||||
<p class="form-error">{form.error}</p>
|
||||
{/if}
|
||||
|
||||
<label>
|
||||
Your name
|
||||
<input name="name" bind:value={name} required placeholder="Enter your exact name" />
|
||||
</label>
|
||||
|
||||
<button type="submit">Join</button>
|
||||
</form>
|
||||
<form method="POST">
|
||||
<label>
|
||||
Your name
|
||||
<input name="name" bind:value={name} placeholder="Your exact name" required />
|
||||
</label>
|
||||
<button type="submit">Join</button>
|
||||
</form>
|
||||
</AuthShell>
|
||||
|
||||
<style>
|
||||
form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto; }
|
||||
label { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
|
||||
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; }
|
||||
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-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>
|
||||
|
||||
@@ -1,24 +1,45 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { enhance } from '$app/forms';
|
||||
import { AuthShell } from '$lib/components';
|
||||
|
||||
let { form } = $props();
|
||||
let memberName = $derived(page.params.member);
|
||||
</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}
|
||||
<p class="form-error">{form.error}</p>
|
||||
{/if}
|
||||
|
||||
{#if form?.error}
|
||||
<p class="error">{form.error}</p>
|
||||
{:else}
|
||||
<p>Click below to join as <strong>{memberName}</strong></p>
|
||||
{/if}
|
||||
|
||||
<form method="POST" use:enhance>
|
||||
<button type="submit">Join</button>
|
||||
</form>
|
||||
<form method="POST" use:enhance>
|
||||
<button type="submit">Join as {memberName}</button>
|
||||
</form>
|
||||
</AuthShell>
|
||||
|
||||
<style>
|
||||
.error { color: #dc2626; padding: 0.5rem; background: #fef2f2; border-radius: 4px; }
|
||||
button { padding: 0.75rem 1.5rem; background: #6366f1; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
|
||||
button {
|
||||
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>
|
||||
|
||||
@@ -1,35 +1,83 @@
|
||||
<script lang="ts">
|
||||
import { AuthShell } from '$lib/components';
|
||||
|
||||
let { form } = $props();
|
||||
let email = $state('');
|
||||
let password = $state('');
|
||||
</script>
|
||||
|
||||
<h1>Log in</h1>
|
||||
|
||||
<form method="POST">
|
||||
<AuthShell title="Log in" subtitle="Welcome back to FamChore.">
|
||||
{#if form?.error}
|
||||
<p class="error">{form.error}</p>
|
||||
<p class="form-error">{form.error}</p>
|
||||
{/if}
|
||||
|
||||
<label>
|
||||
Email
|
||||
<input type="email" name="email" bind:value={email} required />
|
||||
</label>
|
||||
<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>
|
||||
|
||||
<label>
|
||||
Password
|
||||
<input type="password" name="password" bind:value={password} required />
|
||||
</label>
|
||||
|
||||
<button type="submit">Log in</button>
|
||||
</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>
|
||||
form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto; }
|
||||
label { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
|
||||
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; }
|
||||
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-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>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { AuthShell } from '$lib/components';
|
||||
|
||||
let { form } = $props();
|
||||
let email = $state('');
|
||||
let password = $state('');
|
||||
@@ -6,42 +8,93 @@
|
||||
let parentName = $state('');
|
||||
</script>
|
||||
|
||||
<h1>Create your family</h1>
|
||||
|
||||
<form method="POST">
|
||||
<AuthShell title="Create your family" subtitle="Set up in about a minute. Free to get going.">
|
||||
{#if form?.error}
|
||||
<p class="error">{form.error}</p>
|
||||
<p class="form-error">{form.error}</p>
|
||||
{/if}
|
||||
|
||||
<label>
|
||||
Family name
|
||||
<input name="famName" bind:value={famName} required />
|
||||
</label>
|
||||
<form method="POST">
|
||||
<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 type="submit">Create my family</button>
|
||||
</form>
|
||||
|
||||
<label>
|
||||
Your name (parent)
|
||||
<input name="parentName" bind:value={parentName} placeholder="Mum / Dad" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Email
|
||||
<input type="email" name="email" bind:value={email} required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Password
|
||||
<input type="password" name="password" bind:value={password} minlength={8} required />
|
||||
</label>
|
||||
|
||||
<button type="submit">Create family</button>
|
||||
</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>
|
||||
form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto; }
|
||||
label { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
|
||||
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; }
|
||||
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-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>
|
||||
|
||||
Reference in New Issue
Block a user