From 078e8dcb9af67ea874a7547c9303cb2a831a8486 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 19 Apr 2023 11:10:48 +0200
Subject: [PATCH] Added login page with logic

---
 src/routes/login/+page.svelte | 86 +++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/routes/login/+page.svelte

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
new file mode 100644
index 0000000..ae7bbd4
--- /dev/null
+++ b/src/routes/login/+page.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import userstore from '$lib/userstore';
+	import { AuthService } from '@odit/lfk-client-js';
+
+	$: username = '';
+	$: password = '';
+	$: loginError = false;
+
+	async function login() {
+		try {
+			const auth = (await AuthService.authControllerLogin({
+				username,
+				password
+			})) as import('@odit/lfk-client-js').ResponseAuth;
+			await userstore.login(auth);
+			location.replace('/registration');
+		} catch (error) {
+			console.log(error);
+			loginError = true;
+		}
+	}
+</script>
+
+<div class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16">
+	<div class="w-full max-w-md mx-auto p-6">
+		<div
+			class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700"
+		>
+			<div class="p-4 sm:p-7">
+				<div class="text-center mb-8">
+					<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Anmeldung</h1>
+					<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+						Hierfür wird ein LfK Läufersystem Account benötigt
+					</p>
+				</div>
+				<!-- Form -->
+				<form on:submit|preventDefault={login}>
+					<div class="grid gap-y-4">
+						<!-- Form Group -->
+						<div>
+							<label for="username" class="block text-sm mb-2 dark:text-white">Benutzername</label>
+							<div class="relative">
+								<input
+									bind:value={username}
+									type="username"
+									id="username"
+									name="username"
+									class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+									required
+									aria-describedby="username-error"
+								/>
+							</div>
+						</div>
+						<!-- End Form Group -->
+
+						<!-- Form Group -->
+						<div>
+							<div class="flex justify-between items-center">
+								<label for="password" class="block text-sm mb-2 dark:text-white">Passwort</label>
+							</div>
+							<div class="relative">
+								<input
+									bind:value={password}
+									type="password"
+									id="password"
+									name="password"
+									class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+									required
+									aria-describedby="password-error"
+								/>
+							</div>
+						</div>
+						<!-- End Form Group -->
+
+						<button
+							type="submit"
+							class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+							>Anmelden</button
+						>
+					</div>
+				</form>
+				<!-- End Form -->
+			</div>
+		</div>
+	</div>
+</div>