From bf8b351b644174a2dd39d38208a03a067de387be Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Wed, 19 Apr 2023 18:02:33 +0200 Subject: [PATCH] feat!: move to single route application for kiosk mode --- src/lib/userstore.ts | 153 ++++++++--------- src/routes/+layout.svelte | 14 +- src/routes/+page.svelte | 159 ++++++++++++++---- .../+page.svelte => Register.svelte} | 5 +- src/routes/{registration => }/background.png | Bin src/routes/login/+page.svelte | 95 ----------- src/routes/registration/+layout.svelte | 26 --- 7 files changed, 203 insertions(+), 249 deletions(-) rename src/routes/{registration/+page.svelte => Register.svelte} (99%) rename src/routes/{registration => }/background.png (100%) delete mode 100644 src/routes/login/+page.svelte delete mode 100644 src/routes/registration/+layout.svelte diff --git a/src/lib/userstore.ts b/src/lib/userstore.ts index cb36ead..235397d 100644 --- a/src/lib/userstore.ts +++ b/src/lib/userstore.ts @@ -2,93 +2,72 @@ import { AuthService, OpenAPI, type ResponseAuth } from '@odit/lfk-client-js'; import { writable } from 'svelte/store'; type UserState = { - access_token: string; - refresh_token: string; - isLoggedIn: boolean; - refreshInterval: NodeJS.Timer | undefined + access_token: string; + refresh_token: string; + isLoggedIn: boolean; + refreshInterval: NodeJS.Timer | undefined; }; - -const userStore = () => { - const state: UserState = { - access_token: '', - refresh_token: '', - isLoggedIn: false, - refreshInterval: undefined - }; - - const { subscribe, set, update } = writable(state); - - const methods = { - async login(resAuth: ResponseAuth) { - update((state: UserState) => { - if (!resAuth) { - return state; - } - - state.access_token = resAuth.access_token; - state.refresh_token = resAuth.refresh_token; - state.isLoggedIn = true; - state.refreshInterval = setInterval(() => { - this.refreshAuth(); - }, 2 * 60000) - - localStorage.setItem('kiosk-userdata', JSON.stringify(state)); - localStorage.setItem('kiosk-access_token', state.access_token); - OpenAPI.TOKEN = resAuth.access_token; - return state; - }); - }, - async refreshAuth() { - try { - const authRes = await AuthService.authControllerRefresh({ token: state.refresh_token }) as ResponseAuth; - OpenAPI.TOKEN = authRes.access_token; - } catch { - this.logout(); - } - }, - async loginFromStorage() { - console.log('loginFromStorage'); - const access_token = localStorage.getItem('kiosk-access_token'); - if (!access_token) { - throw new Error('Unauthorized'); - } - - const storagedata = localStorage.getItem('kiosk-userdata'); - const userdata = JSON.parse(storagedata || '{}') as UserState; - - update((state: UserState) => { - state.access_token = access_token; - state.refresh_token = userdata.refresh_token; - state.isLoggedIn = true; - state.refreshInterval = setInterval(() => { - this.refreshAuth(); - }, 2 * 60000); - OpenAPI.TOKEN = userdata.access_token; - - return state; - }); - - await this.refreshAuth(); - }, - async logout() { - update((state: UserState) => { - state.isLoggedIn = false; - state.access_token = ''; - state.refresh_token = ''; - state.refreshInterval = undefined; - localStorage.clear(); - return state; - }); - } - }; - - return { - subscribe, - set, - update, - state, - ...methods - }; +const state: UserState = { + access_token: '', + refresh_token: '', + isLoggedIn: false, + refreshInterval: undefined }; +const userState = writable(state); +async function auth_login(resAuth: ResponseAuth) { + if (!resAuth) { + return state; + } -export default userStore(); + state.access_token = resAuth.access_token; + state.refresh_token = resAuth.refresh_token; + state.isLoggedIn = true; + state.refreshInterval = setInterval(() => { + refreshAuth(); + }, 2 * 60000); + + localStorage.setItem('kiosk-userdata', JSON.stringify(state)); + localStorage.setItem('kiosk-access_token', state.access_token); + OpenAPI.TOKEN = resAuth.access_token; + userState.set(state); + return state; +} +async function refreshAuth() { + try { + const authRes = (await AuthService.authControllerRefresh({ + token: state.refresh_token + })) as ResponseAuth; + OpenAPI.TOKEN = authRes.access_token; + } catch { + logout(); + } +} +async function loginFromStorage() { + const access_token = localStorage.getItem('kiosk-access_token'); + if (!access_token) { + throw new Error('Unauthorized'); + } + + const storagedata = localStorage.getItem('kiosk-userdata'); + const userdata = JSON.parse(storagedata || '{}') as UserState; + + state.access_token = access_token; + state.refresh_token = userdata.refresh_token; + state.isLoggedIn = true; + state.refreshInterval = setInterval(() => { + refreshAuth(); + }, 2 * 60000); + OpenAPI.TOKEN = userdata.access_token; + userState.set(state); + return state; +} +async function logout() { + state.isLoggedIn = false; + state.access_token = ''; + state.refresh_token = ''; + state.refreshInterval = undefined; + localStorage.clear(); + return state; +} + +export { auth_login, logout, loginFromStorage, refreshAuth, userState }; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 19923aa..21e02e9 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,10 +2,20 @@ import { OpenAPI } from '@odit/lfk-client-js'; import { env } from '$env/dynamic/public'; import '../app.postcss'; - import "@fontsource/athiti" - import Footer from '../components/footer.svelte'; + import '@fontsource/athiti'; + import { onMount } from 'svelte'; OpenAPI.BASE = env.PUBLIC_BASE_URL || 'https://run.lauf-fuer-kaya.de'; + onMount(() => { + window.addEventListener('keydown', (e) => { + if(e.altKey) e.preventDefault(); + // console.log(e); + // const { key, altKey } = e; + // if (key === 'F4' && altKey) { + // e.preventDefault(); + // } + }); + });
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 53c727b..98886e4 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,41 +1,128 @@ - -
-
- -
-

- LfK! Selfservice - Kiosk + import { auth_login, loginFromStorage, userState } from '$lib/userstore'; + import { AuthService } from '@odit/lfk-client-js'; + import Register from './Register.svelte'; + 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; + } + } + + +{#if $userState.isLoggedIn} + +{:else} +
+
+ +
+

-

-
- + LfK! Selfservice + Kiosk +

+
+ -
-

Für die Anmeldung vor Ort

-
+
+

Für die Anmeldung vor Ort

+
+
+
+
+
+

Anmeldung

+

+ Hierfür wird ein LfK Läufersystem Account benötigt +

+
- -
- - Kiosk starten - - - - + {#if loginError} + + {/if} + + +
+
+ +
+ +
+ +
+
+ + + +
+
+ +
+
+ +
+
+ + + +
+
+ +
+
+
-
-
- +{/if} diff --git a/src/routes/registration/+page.svelte b/src/routes/Register.svelte similarity index 99% rename from src/routes/registration/+page.svelte rename to src/routes/Register.svelte index 54c479e..66e1df2 100644 --- a/src/routes/registration/+page.svelte +++ b/src/routes/Register.svelte @@ -8,7 +8,6 @@ $: lastname = ''; $: doneButtonEnabled = false; $: showResult = false; - $: showError = false; let response: ResponseRunner; const group = 1; //Default to Bürgerlauf @@ -37,7 +36,6 @@ lastname, group })) as ResponseRunner; - showError = false; showResult = true; setTimeout(() => { doneButtonEnabled = true; @@ -47,8 +45,9 @@ }, 7500); } catch (error) { console.log(error); - showError = true; showResult = false; + localStorage.clear(); + location.reload(); } firstname = ''; lastname = ''; diff --git a/src/routes/registration/background.png b/src/routes/background.png similarity index 100% rename from src/routes/registration/background.png rename to src/routes/background.png diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte deleted file mode 100644 index db2a528..0000000 --- a/src/routes/login/+page.svelte +++ /dev/null @@ -1,95 +0,0 @@ - - -
-
-
-
-
-

Anmeldung

-

- Hierfür wird ein LfK Läufersystem Account benötigt -

-
- - {#if loginError} - - {/if} - - -
-
- -
- -
- -
-
- - - -
-
- -
-
- -
-
- - - -
-
- -
-
-
-
diff --git a/src/routes/registration/+layout.svelte b/src/routes/registration/+layout.svelte deleted file mode 100644 index 7d3ccc2..0000000 --- a/src/routes/registration/+layout.svelte +++ /dev/null @@ -1,26 +0,0 @@ - - -{#if loginRendered} - -{:else} -
-

Lade Anmeldedaten...

-
-{/if}