Add login page (no passwords, no per-user db yet)

package.json

@@ -37,6 +37,7 @@
 		"date-fns-tz": "^2.0.0",
 		"dayjs": "^1.11.10",
 		"drizzle-orm": "^0.28.6",
+		"svelte-kit-cookie-session": "^4.0.0",
 		"zod": "^3.22.4",
 		"zodix": "^0.4.4"
 	}

src/app.d.ts

@@ -1,14 +1,19 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
+import type { Session } from 'svelte-kit-cookie-session';
+type SessionData = {
+	username: string;
+};
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
+		interface Locals {
+			session: Session<SessionData>;
+		}
 		interface PageData {
 			title: string;
+			session: SessionData;
 		}
 		// interface Platform {}
 	}
 }
 
-export {};
+export {};

src/hooks.server.ts

@@ -1,6 +1,22 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
+import { handleSession } from "svelte-kit-cookie-session";
+import { redirect } from "@sveltejs/kit";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
+
+export const handle = handleSession(
+	{
+		secret: "SOME_COMPLEX_SECRET_32_CHARSLONG",
+		rolling: true,
+	},
+	({ event, resolve }) => {
+		if (event.url.pathname !== "/login" && !event.locals.session.data.username) {
+			throw redirect(302, "/login");
+		}
+		return resolve(event);
+	},
+);
+

src/routes/Sidebar.svelte

@@ -11,6 +11,7 @@
 <nav>
 	<a href="/" on:click={close}>Today</a>
 	<a href="/agenda" on:click={close}>Agenda</a>
+	<a href="/logout">Logout</a>
 </nav>
 <div class="gradient" />
 

src/routes/agenda/+page.svelte

@@ -2,7 +2,6 @@
 	import BlockList from "../../components/BlockList.svelte";
 
 	export let data;
-	console.log(data.nodes);
 </script>
 
 <BlockList nodes={data.nodes} />

src/routes/login/+page.server.ts

@@ -0,0 +1,26 @@
+import { z } from "zod";
+import type { Actions, PageServerLoad } from "./$types";
+import { redirect } from "@sveltejs/kit";
+import { zx } from "zodix";
+
+const loginRequestSchema = z.object({
+	username: z.string(),
+});
+
+export const load = (async ({ locals }) => {
+	if (locals.session.data.username) {
+		throw redirect(302, "/");
+	}
+	return {
+		title: "Login",
+		session: locals.session.data,
+	};
+}) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	default: async ({ locals, request }) => {
+		const formData = await zx.parseForm(request, loginRequestSchema);
+		await locals.session.set({ username: formData.username });
+		return {};
+	},
+};

src/routes/login/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+
+	export let data: PageData;
+</script>
+
+<form method="POST">
+	<select name="username">
+		<option value="dan">Dan</option>
+		<option value="nit">Nit</option>
+	</select>
+	<button type="submit">Login</button>
+</form>
+

src/routes/logout/+page.server.ts

@@ -0,0 +1,7 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ locals }) => {
+	locals.session.destroy();
+	throw redirect(302, "/login");
+};