110 lines
3.2 KiB
Svelte
110 lines
3.2 KiB
Svelte
<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">
|
|
<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
|
|
<div class="text-center">
|
|
<h1 class="block text-7xl font-bold">LfK!Kiosk</h1>
|
|
<h1 class="block text-4xl font-bold">Login</h1>
|
|
<!-- <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p> -->
|
|
</div>
|
|
<!-- 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 -->
|
|
|
|
{#if loginError}
|
|
<div
|
|
class="bg-red-500 text-white text-center font-semibold rounded-md shadow-lg mb-8 mt-4"
|
|
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 font-semibold">Benutzername</label>
|
|
<div class="relative">
|
|
<input
|
|
autofocus
|
|
bind:value={username}
|
|
autocomplete="one-time-code"
|
|
type="username"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Benutzername"
|
|
class="placeholder:text-neutral-800 py-3 px-4 block w-full rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border bg-white"
|
|
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 font-semibold">Passwort</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input
|
|
bind:value={password}
|
|
autocomplete="one-time-code"
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Passwort"
|
|
class="placeholder:text-neutral-800 py-3 px-4 block w-full rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border bg-white"
|
|
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 dark:focus:ring-offset-gray-800"
|
|
>Anmelden</button
|
|
>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|