diff --git a/CHANGELOG.md b/CHANGELOG.md index 12229bb..04d9774 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,8 +2,36 @@ All notable changes to this project will be documented in this file. Dates are displayed in UTC. +#### [1.0.0](https://git.odit.services/lfk/kiosk/compare/0.6.0...1.0.0) + +- feat: footer [`115767c`](https://git.odit.services/lfk/kiosk/commit/115767c656381336257c23ee30a130e7e9c60144) +- refactor: drop footer [`e512325`](https://git.odit.services/lfk/kiosk/commit/e5123251155f58e83f36c091b671acc73167ce68) +- feat: prevent F1 + F5 [`bb3c801`](https://git.odit.services/lfk/kiosk/commit/bb3c80190834be6d43f50cdb6eeb09ac75868259) + +#### [0.6.0](https://git.odit.services/lfk/kiosk/compare/0.5.0...0.6.0) + +> 19 April 2023 + +- feat!: move to single route application for kiosk mode [`bf8b351`](https://git.odit.services/lfk/kiosk/commit/bf8b351b644174a2dd39d38208a03a067de387be) +- refactor!: cleanup userdata localstorage + components [`c7c1c6d`](https://git.odit.services/lfk/kiosk/commit/c7c1c6dc41afc6ca3e66b507fd1ff50185f4e1be) +- 🚀Bumped version to 0.6.0 [`aa7d2db`](https://git.odit.services/lfk/kiosk/commit/aa7d2dbe1b67b33a59093bc53aa944cb6473ef03) +- add chrome kiosk command to readme [`01cd8d4`](https://git.odit.services/lfk/kiosk/commit/01cd8d4b78b3898d2f74f2b27cdad9e9745c1e33) + +#### [0.5.0](https://git.odit.services/lfk/kiosk/compare/0.4.4...0.5.0) + +> 19 April 2023 + +- feat(registration): autofocus input fields + done button [`cbfbd92`](https://git.odit.services/lfk/kiosk/commit/cbfbd92d0e4f9735a2192125f267f651ed36c9b1) +- 🚀Bumped version to 0.5.0 [`58830c5`](https://git.odit.services/lfk/kiosk/commit/58830c5db3d9903d590f535a4099ad93a8ff6519) +- feat(registration): disabled done button for 7.5s [`5f5b03a`](https://git.odit.services/lfk/kiosk/commit/5f5b03a8a086799543cf675ccc3a973b781d1987) +- feat(registration): support next input element with ENTER key [`066e67c`](https://git.odit.services/lfk/kiosk/commit/066e67c64f48b00673f2de7727acb230c94c3c13) +- feat(registration): disable text select [`418fe77`](https://git.odit.services/lfk/kiosk/commit/418fe7773fbc981186909a1f7c262c3c1fa1ece2) + #### [0.4.4](https://git.odit.services/lfk/kiosk/compare/0.4.3...0.4.4) +> 19 April 2023 + +- 🚀Bumped version to 0.4.4 [`4b6e11d`](https://git.odit.services/lfk/kiosk/commit/4b6e11d8d271c638b3c2e4cd3dc887680023dd5e) - fix(registration): Added missing dark styling [`0698038`](https://git.odit.services/lfk/kiosk/commit/06980385230e32dffe1083ceb4f88e86a9197aef) #### [0.4.3](https://git.odit.services/lfk/kiosk/compare/0.4.2...0.4.3) diff --git a/README.md b/README.md index 7e85e3f..ad99907 100644 --- a/README.md +++ b/README.md @@ -24,4 +24,9 @@ pnpm build ``` docker build . docker-compose up +``` + +## Kiosk Google Chrome +``` +chrome https://run.lauf-fuer-kaya.de/kiosk/ -kiosk ``` \ No newline at end of file diff --git a/package.json b/package.json index eed866c..524f3a8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lfk/kiosk", - "version": "0.4.4", + "version": "1.0.0", "private": false, "license": "MIT", "repository": "https://git.odit.services/lfk/kiosk", diff --git a/src/components/footer.svelte b/src/components/footer.svelte deleted file mode 100644 index de5931a..0000000 --- a/src/components/footer.svelte +++ /dev/null @@ -1,49 +0,0 @@ - diff --git a/src/lib/userstore.ts b/src/lib/userstore.ts index cb36ead..33d5495 100644 --- a/src/lib/userstore.ts +++ b/src/lib/userstore.ts @@ -2,93 +2,69 @@ 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)); + 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 storagedata = localStorage.getItem('kiosk-userdata'); + const userdata = JSON.parse(storagedata || '{}') as UserState; + if (!userdata.access_token) { + throw new Error('Unauthorized'); + } + + state.access_token = userdata.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..b666dde 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,10 +2,18 @@ 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) => { + // F1 + if (e.keyCode === 112) e.preventDefault(); + // F5 + if (e.keyCode === 116) e.preventDefault(); + }); + });
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 53c727b..892076b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,41 +1,45 @@ - -
-
- -
-

- LfK! Selfservice - Kiosk -

-
- + - - - -
+{#if $userState.isLoggedIn} + +{:else} + +{/if} +
+ {#if $userState.isLoggedIn} + LfK!2023 powered by + ODIT.Services + {:else} + Datenschutzerklärung + | + Impressum +
+
+ LfK!2023 powered by + ODIT.Services + {/if}
- diff --git a/src/routes/Login.svelte b/src/routes/Login.svelte new file mode 100644 index 0000000..31717fb --- /dev/null +++ b/src/routes/Login.svelte @@ -0,0 +1,120 @@ + + + +
+
+ +
+

+ LfK! Selfservice + Kiosk +

+
+ + +
+

Für die Anmeldung vor Ort

+
+
+
+
+
+

Anmeldung

+

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

+
+ + {#if loginError} + + {/if} + + +
+
+ +
+ +
+ +
+
+ + + +
+
+ +
+
+ +
+
+ + + +
+
+ +
+
+
+
+
diff --git a/src/routes/registration/+page.svelte b/src/routes/Register.svelte similarity index 85% rename from src/routes/registration/+page.svelte rename to src/routes/Register.svelte index fa4c75e..619da18 100644 --- a/src/routes/registration/+page.svelte +++ b/src/routes/Register.svelte @@ -2,15 +2,33 @@ import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js'; import bwipjs from 'bwip-js'; import lfkbackground from './background.png'; + import { onMount } from 'svelte'; $: firstname = ''; $: lastname = ''; + $: doneButtonEnabled = false; $: showResult = false; - $: showError = false; let response: ResponseRunner; const group = 1; //Default to Bürgerlauf + function focusFirstName() { + setTimeout(() => { + document.getElementById('firstname')?.focus(); + }, 50); + setTimeout(() => { + document.getElementById('firstname')?.focus(); + }, 100); + } + function focusDoneButton() { + setTimeout(() => { + document.getElementById('done')?.focus(); + }, 50); + setTimeout(() => { + document.getElementById('done')?.focus(); + }, 100); + } + async function register() { try { response = (await RunnerService.runnerControllerPost({ @@ -18,12 +36,18 @@ lastname, group })) as ResponseRunner; - showError = false; showResult = true; + setTimeout(() => { + doneButtonEnabled = true; + setTimeout(() => { + focusDoneButton(); + }, 25); + }, 7500); } catch (error) { console.log(error); - showError = true; showResult = false; + localStorage.clear(); + location.reload(); } firstname = ''; lastname = ''; @@ -46,10 +70,14 @@ }); return canvas.toDataURL('image/png'); } + + onMount(() => { + focusFirstName(); + });
@@ -72,6 +100,11 @@
{ + if (e.keyCode === 13) { + document.getElementById('lastname')?.focus(); + } + }} type="text" id="firstname" name="firstname" @@ -154,7 +187,7 @@
@@ -178,8 +211,13 @@
-->
-
-
- Datenschutzerklärung - | - Impressum -
-
- LfK!2023 powered by - ODIT.Services -
+
\ No newline at end of file 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}