add guide docs

2026-08-14 18:50:37 +01:00
parent 4a025e0ee6
commit bc23e112f6
2 changed files with 297 additions and 0 deletions
@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import type { ActionData } from './$types';
+	import AuthShell from '$lib/layouts/AuthShell.svelte';
+	let { form }: { form: ActionData } = $props();
+
+	let step1 = $state({ familyName: '', email: '', password: '' });
+	let step2 = $state({ username: '' });
+	let step3 = $state({ child: '' });
+	let submitting = $state(false);
+	let step = $state(1);
+
+	const enhanceForm = () => {
+		return async ({ update, result }: { update: () => Promise<void> }) => {
+			submitting = true;
+			await update();
+			submitting = false;
+			if (result.type !== 'failure') {
+				step++;
+			}
+		};
+	};
+</script>
+
+<AuthShell title="Signup" subtitle="Create your family.">
+	{#if form?.message}
+		<h3 class="form-error">{form.message}</h3>
+	{/if}
+	{#if step === 1}
+		<form method="POST" action="?/signup" use:enhance={enhanceForm}>
+			<label>
+				Family Name
+				<input
+					type="text"
+					name="familyName"
+					bind:value={step1.familyName}
+					placeholder="Family Name"
+					required
+				/>
+			</label>
+			<label>
+				Email
+				<input
+					type="email"
+					name="email"
+					bind:value={step1.email}
+					placeholder="you@email.com"
+					required
+				/>
+			</label>
+			<label>
+				Password
+				<input type="password" name="password" bind:value={step1.password} required />
+			</label>
+			<button type="submit">Sign up</button>
+		</form>
+
+		<p class="alt">
+			Don't have a family yet? <a href="/signup">Create one</a>
+		</p>
+	{/if}
+	{#if step === 2}
+		<h3 class="form-error">Step 2</h3>
+		<p>Now for something more personal:</p>
+		<form method="POST" action="?/username" use:enhance={enhanceForm}>
+			<label
+				>Username
+				<input
+					type="text"
+					name="username"
+					bind:value={step2.username}
+					placeholder="Username"
+					required
+				/>
+			</label>
+			<button type="submit">Next</button>
+		</form>
+	{/if}
+	{#if step === 3}
+		<h3 class="form-error">Step 3</h3>
+		<p>Would you like to add a child device now?</p>
+		<form method="POST" action="?/child" use:enhance={enhanceForm}>
+			<label>
+				Add childs name:
+				<input type="text" name="member" bind:value={step3.child} />
+			</label>
+			<button type="submit">Next</button>
+		</form>
+		<p>Or skip straight to admin</p>
+		<a href="/admin">admin dashboard</a>
+	{/if}
+	{#if step === 4}
+		<h3 class="form-error">Step 4</h3>
+		<p>Nice - now share this device login code with {step3.child}:</p>
+		<div class="code">
+			<span class="code-text">{form.code}</span>
+		</div>
+	{/if}
+</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;
+	}
+	.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>