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/routes/signup/+page.svelte
+85 -32
View File
@@ -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>