<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;
            loginError=false;
			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>

				{#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}
									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}
									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>
