add admin login

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} />