add admin login

src/routes/+layout.svelte

@@ -80,7 +80,9 @@
 />
 
 <main>
-	<slot />
+	<div class="h-screen w-full">
+		<slot />
+	</div>
 </main>
 <nav>
 	<div

src/routes/admin/+layout.svelte

@@ -0,0 +1,3 @@
+<div class="h-full">
+	<slot />
+</div>

src/routes/admin/login/+layout.svelte

@@ -0,0 +1,3 @@
+<div class="flex justify-center items-center w-full h-full">
+	<slot />
+</div>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import Input from '$lib/components/Input/Input.svelte';
+	import { env } from '$env/dynamic/public';
+	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
+	import { goto } from '$app/navigation';
+
+	let passwordValue: string;
+	async function login() {
+		// eslint-disable-next-line no-async-promise-executor
+		loginRequest = new Promise(async (resolve, reject) => {
+			const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/login`, {
+				method: 'POST',
+				body: new FormData(document.forms[0])
+			});
+			if (response.ok) {
+				await goto(`${env.PUBLIC_BASE_PATH}/admin`);
+				resolve();
+			} else if (response.status == 403) {
+				passwordValue = '';
+				showError = true;
+				errorToastElement.reset();
+				resolve();
+			} else {
+				reject(Error(`${response.statusText} (${response.status})`));
+			}
+			loginRequest = null;
+		});
+	}
+
+	let loginRequest: Promise<void> | null = null;
+	let showError = false;
+	let errorToastElement: ErrorToast;
+</script>
+
+<div class="card px-14 py-6 shadow-lg">
+	<h1 class="text-center text-4xl mt-2 mb-4">Craftattack Admin Login</h1>
+	<form class="flex flex-col items-center" on:submit|preventDefault={login}>
+		<div class="flex flex-col justify-center items-center">
+			<div class="grid gap-4">
+				<Input id="username" name="username" type="text" required={true}>
+					<span slot="label">Nutzername</span>
+				</Input>
+				<Input
+					id="password"
+					name="password"
+					type="password"
+					required={true}
+					bind:value={passwordValue}
+				>
+					<span slot="label">Passwort</span>
+				</Input>
+			</div>
+		</div>
+		<div class="grid w-min mt-6">
+			<div class="row-[1] col-[1]">
+				<Input id="submit" type="submit" value="Login" disabled={loginRequest !== null} />
+			</div>
+			{#key loginRequest}
+				{#if loginRequest}
+					{#await loginRequest}
+						<span
+							class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
+						/>
+					{:catch error}
+						<dialog
+							class="modal"
+							on:close={() => setTimeout(() => (loginRequest = null), 200)}
+							open
+						>
+							<form method="dialog" class="modal-box">
+								<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+								<h3 class="font-bold text-lg">Error</h3>
+								<p class="py-4">{error.message}</p>
+							</form>
+							<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
+								<button>close</button>
+							</form>
+						</dialog>
+					{/await}
+				{/if}
+			{/key}
+		</div>
+	</form>
+</div>
+
+<ErrorToast timeout={2000} bind:show={showError} bind:this={errorToastElement} />

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

@@ -0,0 +1,47 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { Admin } from '$lib/server/database';
+import { env as publicEnv } from '$env/dynamic/public';
+import { env } from '$env/dynamic/private';
+import { addSession } from '$lib/server/session';
+
+export const POST = (async ({ request, cookies }) => {
+	const data = await request.formData();
+	const username = data.get('username') as string | null;
+	const password = data.get('password') as string | null;
+
+	if (username == null || password == null) {
+		return new Response(null, {
+			status: 403
+		});
+	}
+
+	if (
+		env.ADMIN_USER &&
+		env.ADMIN_PASSWORD &&
+		username == env.ADMIN_USER &&
+		password == env.ADMIN_PASSWORD
+	) {
+		cookies.set('session', addSession(), {
+			path: `${publicEnv.PUBLIC_BASE_PATH}/admin`,
+			maxAge: 60 * 60 * 24 * 90,
+			httpOnly: true,
+			secure: true
+		});
+		return new Response();
+	}
+
+	const user = await Admin.findOne({ where: { username: username } });
+	if (user && user.validatePassword(password)) {
+		cookies.set('session', addSession(), {
+			path: `${publicEnv.PUBLIC_BASE_PATH}/admin`,
+			maxAge: 60 * 60 * 24 * 90,
+			httpOnly: true,
+			secure: true
+		});
+		return new Response();
+	} else {
+		return new Response(null, {
+			status: 403
+		});
+	}
+}) satisfies RequestHandler;