1 files changed, 83 insertions, 0 deletions
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
new file mode 100644
index 0000000..303043f
--- /dev/null
+++ b/src/routes/login/+page.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	let { data, form } = $props();
+</script>
+
+<svelte:head>
+	<title>Connexion - Courses</title>
+</svelte:head>
+
+<main class="login">
+	<div class="login-card">
+		<h1>Courses</h1>
+		<p>Entrez le mot de passe familial pour continuer.</p>
+
+		<form method="POST">
+			<label>
+				<span class="form-label">Mot de passe</span>
+				<input
+					class="form-input"
+					type="password"
+					name="password"
+					autocomplete="current-password"
+					required
+				/>
+			</label>
+			<input type="hidden" name="next" value={data.next} />
+			<button class="btn-primary" type="submit">Entrer</button>
+		</form>
+
+		{#if form?.error}
+			<p class="error">{form.error}</p>
+		{/if}
+	</div>
+</main>
+
+<style>
+	.login {
+		display: grid;
+		min-height: 100dvh;
+		place-items: center;
+		padding: 1rem;
+	}
+
+	.login-card {
+		width: min(100%, 24rem);
+		padding: 1.5rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 2px 8px var(--shadow);
+	}
+
+	.login-card h1 {
+		margin-bottom: 0.25rem;
+	}
+
+	.login-card > p {
+		margin-bottom: 1.5rem;
+		color: var(--text-secondary);
+	}
+
+	.login-card label {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.login-card .form-input {
+		width: 100%;
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.btn-primary {
+		align-self: stretch;
+	}
+
+	.error {
+		margin-top: 1rem;
+	}
+</style>