refactor!: cleanup userdata localstorage + components
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
bf8b351b64
commit
c7c1c6dc41
GPG Key ID:
3BB9ADD52DCA4314
@ -27,7 +27,6 @@ async function auth_login(resAuth: ResponseAuth) {
|
|||||||
}, 2 * 60000);
|
}, 2 * 60000);
|
||||||
|
|
||||||
localStorage.setItem('kiosk-userdata', JSON.stringify(state));
|
localStorage.setItem('kiosk-userdata', JSON.stringify(state));
|
||||||
localStorage.setItem('kiosk-access_token', state.access_token);
|
|
||||||
OpenAPI.TOKEN = resAuth.access_token;
|
OpenAPI.TOKEN = resAuth.access_token;
|
||||||
userState.set(state);
|
userState.set(state);
|
||||||
return state;
|
return state;
|
||||||
@ -43,15 +42,13 @@ async function refreshAuth() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
async function loginFromStorage() {
|
async function loginFromStorage() {
|
||||||
const access_token = localStorage.getItem('kiosk-access_token');
|
const storagedata = localStorage.getItem('kiosk-userdata');
|
||||||
if (!access_token) {
|
const userdata = JSON.parse(storagedata || '{}') as UserState;
|
||||||
|
if (!userdata.access_token) {
|
||||||
throw new Error('Unauthorized');
|
throw new Error('Unauthorized');
|
||||||
}
|
}
|
||||||
|
|
||||||
const storagedata = localStorage.getItem('kiosk-userdata');
|
state.access_token = userdata.access_token;
|
||||||
const userdata = JSON.parse(storagedata || '{}') as UserState;
|
|
||||||
|
|
||||||
state.access_token = access_token;
|
|
||||||
state.refresh_token = userdata.refresh_token;
|
state.refresh_token = userdata.refresh_token;
|
||||||
state.isLoggedIn = true;
|
state.isLoggedIn = true;
|
||||||
state.refreshInterval = setInterval(() => {
|
state.refreshInterval = setInterval(() => {
|
||||||
|
|||||||
@ -1,128 +1,16 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { auth_login, loginFromStorage, userState } from '$lib/userstore';
|
import { loginFromStorage, userState } from '$lib/userstore';
|
||||||
import { AuthService } from '@odit/lfk-client-js';
|
|
||||||
import Register from './Register.svelte';
|
import Register from './Register.svelte';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import Login from './Login.svelte';
|
||||||
$: username = '';
|
|
||||||
$: password = '';
|
|
||||||
$: loginError = false;
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
loginFromStorage();
|
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>
|
</script>
|
||||||
|
|
||||||
{#if $userState.isLoggedIn}
|
{#if $userState.isLoggedIn}
|
||||||
<Register />
|
<Register />
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<Login />
|
||||||
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}
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
120
src/routes/Login.svelte
Normal file
120
src/routes/Login.svelte
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
<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}
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user