feat: exploring SvelteKit forms with Login

I'm not happy with using Cookies for it, but it served me in
understanding how to handle forms in SvelteKit.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

src/routes/account/login/+page.server.js

@@ -0,0 +1,31 @@
+import { fail, redirect } from '@sveltejs/kit';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+	login: async ({ cookies, request, url }) => {
+		const formData = await request.formData();
+		const server = formData.get('server');
+		const account = formData.get('account');
+		const passphrase = formData.get('passphrase');
+
+		if (!account) {
+			return fail(400, { account, missing: true });
+		}
+
+		if (!passphrase) {
+			return fail(400, { account, incorrect: true });
+		}
+
+		cookies.set('ANVIL', [server, account].join('-'), { path: '/' });
+
+		if (url.searchParams.has('redirectTo')) {
+			// TODO: Remove the throw when upgrading SvelteKit
+			throw redirect(303, url.searchParams.get('redirectTo'));
+		}
+
+		throw redirect(303, '/profile');
+
+		// This should be dead code now.
+		return { success: true };
+	}
+};

src/routes/account/login/+page.svelte

@@ -1,11 +1,26 @@
+<script>
+	/** @type {import('./$types').ActionData} */
+	export let form;
+</script>
+
 <div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10">
 	<div class="space-y-10">
 		<h1 class="h1 font-bold">Log in</h1>
-		<p>To use Anvil with your F2 account, fill in your credentials.</p>
+		{#if form?.success}
-		<div class="space-y-4">
+			<p>
+				Welcome back! Please <a href="/profile">move to your profile</a>.
+			</p>
+		{:else}
+			<p>
+				To use Anvil with your F2 account, fill in your credentials.
+			</p>
+	{/if}
+	<form class="space-y-4" method="POST" action="?/login">
+			{#if form?.missing}<p class="error">The account field is required.</p>{/if}
+			{#if form?.incorrect}<p class="error">Account or password wrong.</p>{/if}
 			<label class="label">
 				<span>F2 server</span>
-				<select class="select" title="F2 server" value="1">
+				<select class="select" title="F2 server" name="server">
 					<option value="1">fig.fr33domlover.site</option>
 					<option value="2">grape.fr33domlover.site</option>
 					<option value="3">walnut.fr33domlover.site</option>
@@ -13,16 +28,18 @@
 			</label>
 			<label class="label">
 				<span>Account name</span>
-				<input class="input" title="Account name" type="text" placeholder="alice" />
+				<input class="input" name="account" type="text" value={form?.account ?? ''} />
 			</label>
 			<label class="label">
 				<span>Passphrase</span>
-				<input class="input" title="Passphrase" type="password" placeholder="psswrd" />
+				<input class="input" name="passphrase" type="password" placeholder="password" />
 			</label>
 			<div class="text-right">
 				<a href="/" class="btn btn-bg-initial">Reset passphrase</a>
 			</div>
-			<a href="/" class="w-full btn variant-filled-primary">Log in</a>
+			<button type="submit" class="w-full btn variant-filled-primary">
-		</div>
+				Log in
+			</button>
+		</form>
 	</div>
 </div>

src/routes/profile/+page.server.js

@@ -0,0 +1,13 @@
+/** @type {import('./$types').PageServerLoad} */
+export function load({ cookies, params }) {
+	// Read login cookie
+	const cookie = cookies.get('ANVIL');
+	const [server, account] = cookie.split('-');
+
+	return {
+		user: {
+			displayname: account,
+			username: 'fr33domlover',
+		}
+	};
+}

src/routes/profile/+page.svelte

@@ -0,0 +1,43 @@
+<script>
+	/** @type {import('./$types').PageData} */
+	export let data;
+</script>
+
+<div class="w-full max-w-md h-full mx-auto flex flex-col justify-center items-center py-10">
+  <div class="space-y-10">
+	  <h1 class="h1 font-bold">Profile</h1>
+		<div class="px-4">
+			<div>{@html data.user.displayname}</div>
+		</div>
+	</div>
+	<div class="space-y-6">
+		<h2 class="h2">Your projects</h2>
+		<p class="px-4">
+			You don't have any projects yet.
+		</p>
+	</div>
+	<div class="space-y-6">
+		<h2 class="h2">Your repositories</h2>
+		<p class="px-4">
+			You don't have any repositories yet.
+		</p>
+	</div>
+	<div class="space-y-6">
+		<h2 class="h2">Your news</h2>
+		<p class="px-4">
+			Nothing here yet.
+		</p>
+	</div>
+	<div class="space-y-6">
+		<h2 class="h2">Your notifications</h2>
+		<p class="px-4">
+			You don't have any notifications yet.
+		</p>
+	</div>
+	<div class="space-y-6">
+		<h2 class="h2">Your settings</h2>
+		<p class="px-4">
+			Adjust Anvil to your liking.
+		</p>
+	</div>
+</div>