added login page

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

@@ -1,10 +1,46 @@
 import type { Actions } from "./$types"
 
+import { fail } from "@sveltejs/kit"
+
+import Log from "$lib/server/log"
+
 export const actions = {
-	login: ({ }) => {
+	login: async ({ request, fetch, cookies }) => {
 
 		console.log("login")
 
-		return {}
+		const formData = await request.formData()
+
+		const result = await fetch("/api/login", {
+			method: "POST",
+			body: formData
+		})
+		
+		if (!result.ok) {
+			return fail(401, { email: formData.get("email") ?? "", message: "Benutzername oder Passwort ist falsch." })
+		}
+		
+		const body = await (async () => { 
+			try {
+				return await result.json()
+			} catch (e) {
+				Log.error(Log.module.PROCESS, `Failed to parse body of login response from endpoint`)
+				return null
+			}
+		})()
+
+		if (!body || !body.token || !body.expires) {
+			return fail(502, "Invalid response from login endpoint")
+		}
+	
+		cookies.set("session", body.token, {
+			expires: new Date(body.expires),
+			httpOnly: true,
+			secure: true,
+			sameSite: "strict",
+			path: "/"
+		})
+
+		return { message: "Erfolg" }
 	}
 } satisfies Actions;

src/routes/login/+page.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 
+	import type { PageProps } from "./$types"
+
+	const { form }: PageProps = $props()
+
 </script>
 
 <form action="?/login" method="POST" id="form_login"></form>
@@ -8,6 +12,7 @@
 		
 	<div class="grid">
 		<h1>Login</h1>
+		<p class="error_msg">{form?.message}</p>
 		<label for="username">E-Mail: </label><input type="text" id="username" form="form_login" name="email" />
 		<label for="password">Passwort: </label><input type="password" id="password" form="form_login" name="password" />
 		<button type="submit" form="form_login">-></button>
@@ -24,6 +29,8 @@
 		width: 100%;
 		height: 100%;
 
+		padding-top: 100px;
+
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
@@ -42,6 +49,11 @@
 		grid-column: 1 / span 2;
 	}
 
+	.grid > p {
+		width: 100%;
+		grid-column: 1 / span 2;
+	}
+
 	.grid > button {
 		width: 50%;
 		margin-top: 10px;
@@ -49,4 +61,8 @@
 		grid-column: 2;
 	}
 
+	.error_msg {
+		color: red;
+	}
+
 </style>