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/join/[code]/+page.svelte
+56 -18
View File
@@ -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>