add login functionality

frontend/script/download-openapi.sh

@@ -0,0 +1,2 @@
+# Makes a request to localhost:8000/openapi.json and saves the result in ./src/lib/openapi.json
+curl -o ./src/lib/openapi.json http://localhost:8000/openapi.json

frontend/src/app.d.ts

@@ -1,9 +1,14 @@
+import type { ApiClient } from './client/types.gen.ts';
+
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
+		interface Locals {
+			apiClient?: ApiClient;
+			authToken: string | null;
+		}
 		// interface PageData {}
 		// interface PageState {}
 		// interface Platform {}

frontend/src/hooks.server.ts

@@ -0,0 +1,13 @@
+import type { Handle } from '@sveltejs/kit';
+import { client } from './lib/apiClient.ts';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	event.locals.apiClient = client;
+
+	const authToken = event.cookies.get('auth_token');
+	event.locals.authToken = authToken || null;
+
+	const response = resolve(event);
+
+	return response;
+};

frontend/src/lib/apiClient.ts

@@ -1,4 +1,4 @@
-import { PUBLIC_API_BASE_URL } from '$env/static/public'
-import { createClient } from '../client/client'
-
-export const apiClient = createClient({ baseUrl: PUBLIC_API_BASE_URL })
+import { PUBLIC_API_BASE_URL } from '$env/static/public';
+import { client } from '../client/client.gen.ts';
+client.setConfig({ baseUrl: PUBLIC_API_BASE_URL });
+export { client };

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

@@ -0,0 +1,39 @@
+import { loginAuthLoginPost } from '../../client/sdk.gen.ts';
+import { redirect, type Actions, type ServerLoad } from '@sveltejs/kit';
+
+export const load: ServerLoad = async ({ locals }) => {
+	if (locals.authToken) {
+		return redirect(307, '/');
+	}
+
+	return {
+		isLoggedIn: !!locals.authToken
+	};
+};
+
+export const actions = {
+	default: async ({ request, locals, cookies }) => {
+		const formData = await request.formData();
+		const email = formData.get('email') as string;
+		const password = formData.get('password') as string;
+
+		const { response, data } = await loginAuthLoginPost({
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: locals.authToken ? `Bearer ${locals.authToken}` : ''
+			},
+			body: { email, password }
+		});
+
+		if (response.status === 200 && data) {
+			cookies.set('auth_token', data.access_token, {
+				path: '/',
+				expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7 days
+			});
+
+			return redirect(307, '/');
+		}
+
+		return { success: response.status === 200, error: response.status !== 200 ? data : null };
+	}
+} satisfies Actions;

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	const { data }: PageProps = $props();
+</script>
+
+{#if data.isLoggedIn}
+	<p>You are logged in</p>
+{/if}
+<form method="POST">
+	<div class="field">
+		<label for="email" class="label">Email</label>
+		<input
+			id="email"
+			name="email"
+			class="input"
+			type="email"
+			placeholder="e.g john@gmail.com"
+			autocomplete="email"
+		/>
+	</div>
+	<div class="field">
+		<label for="password" class="label">Password</label>
+		<input
+			id="password"
+			name="password"
+			class="input"
+			type="password"
+			placeholder="********"
+			autocomplete="current-password"
+		/>
+	</div>
+	<input type="submit" class="button is-primary" value="Login" />
+</form>

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

@@ -1,5 +0,0 @@
-import { createClient } from '../../client/client'
-import { loginAuthLoginPost } from '../../client/sdk.gen.ts'
-
-const client = createClient({ baseUrl: 'http://localhost:8000' })
-loginAuthLoginPost({ client, body: { email: 'test', password: 'test' } })