<script lang="ts">
	import { auth_login, loginFromStorage } from '$lib/userstore';
	import { AuthService } from '@odit/lfk-client-js';
	import { onMount } from 'svelte';

	$: username = '';
	$: password = '';
	$: loginError = false;

	onMount(() => {
		loginFromStorage();
	});

	async function login() {
		try {
			const auth = (await AuthService.authControllerLogin({
				username,
				password
			})) as import('@odit/lfk-client-js').ResponseAuth;
			loginError = false;
			auth_login(auth);
		} catch (error) {
			loginError = true;
		}
	}
</script>

<!--  -->
<div
	class="relative overflow-hidden before:absolute before:top-0 before:left-1/2 before:bg-[url('/assets/polygon.svg')] before:bg-no-repeat before:bg-top before:bg-cover before:w-full before:h-full before:-z-[1] before:transform before:-translate-x-1/2 dark:before:bg-[url('/assets/polygon-dark.svg')]"
>
	<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
		<!-- Title -->
		<div class="mt-5 max-w-2xl text-center mx-auto">
			<h1 class="block font-bold text-gray-800 text-4xl md:text-5xl lg:text-6xl dark:text-gray-200">
				LfK! Selfservice
				<span class="bg-clip-text bg-gradient-to-tl from-blue-600 to-violet-600 text-transparent"
					>Kiosk</span
				>
			</h1>
		</div>
		<!-- End Title -->

		<div class="mt-5 max-w-3xl text-center mx-auto">
			<p class="text-lg text-gray-600 dark:text-gray-400">Für die Anmeldung vor Ort</p>
		</div>
		<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>

					{#if loginError}
						<div
							class="bg-red-500 text-sm text-white text-center font-semibold rounded-md shadow-lg mb-8"
							role="alert"
						>
							<div class="p-4">Falscher Nutzername oder falsches Passwort</div>
						</div>
					{/if}

					<!-- 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}
										autocomplete="one-time-code"
										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 border"
										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}
										autocomplete="one-time-code"
										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 border"
										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>
</div>
