JCEEE
68 lines
1.3 KiB
Svelte
68 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import AuthShell from '$lib/components/AuthShell.svelte';
|
|
|
|
let { form } = $props();
|
|
let name = $state('');
|
|
</script>
|
|
|
|
<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="form-error">{form.error}</p>
|
|
{/if}
|
|
|
|
<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: 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>
|