🚀Bumped version to 0.5.0

CHANGELOG.md

@@ -2,8 +2,47 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.5.0](https://git.odit.services/lfk/kiosk/compare/0.4.4...0.5.0)
+
+- feat(registration): autofocus input fields + done button [`cbfbd92`](https://git.odit.services/lfk/kiosk/commit/cbfbd92d0e4f9735a2192125f267f651ed36c9b1)
+- 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)
+
+> 19 April 2023
+
+- 🚀Bumped version to 0.4.3 [`297b880`](https://git.odit.services/lfk/kiosk/commit/297b88016bce1619d55bd6dc05f993f59f86382a)
+- fix(href): replaced location.replace with goto [`8959223`](https://git.odit.services/lfk/kiosk/commit/8959223016b2bbe8ebae79f55a489cc0503b3c78)
+
+#### [0.4.2](https://git.odit.services/lfk/kiosk/compare/0.4.1...0.4.2)
+
+> 19 April 2023
+
+- 🚀Bumped version to 0.4.2 [`a3e437d`](https://git.odit.services/lfk/kiosk/commit/a3e437d9665e9ee1836770618c10adbbd1c8f7d6)
+- fix(hrefs): Fixed relative locations [`19c9fa3`](https://git.odit.services/lfk/kiosk/commit/19c9fa339b3ddc4adef39d5783346bfd0db904af)
+
+#### [0.4.1](https://git.odit.services/lfk/kiosk/compare/0.4.0...0.4.1)
+
+> 19 April 2023
+
+- 🚀Bumped version to 0.4.1 [`8017f00`](https://git.odit.services/lfk/kiosk/commit/8017f009e4ba452b22dd84b1f777f4e0b2f5e8b9)
+- fix(userstore): Prefix localstorage keys with `kiosk-` [`ff36691`](https://git.odit.services/lfk/kiosk/commit/ff36691ada802fc1560c430beb865246dff782ed)
+- Redirects/links relative [`482d638`](https://git.odit.services/lfk/kiosk/commit/482d6387fac83a05ebaaf762cde7a68818ecf31f)
+
 #### [0.4.0](https://git.odit.services/lfk/kiosk/compare/0.3.0...0.4.0)
 
+> 19 April 2023
+
+- 🚀Bumped version to 0.4.0 [`8ec4fc0`](https://git.odit.services/lfk/kiosk/commit/8ec4fc0c835b4eb2fc634fba8d04d301d72fb3fd)
 - Merge pull request 'branding' (#1) from branding into main [`a07eb4d`](https://git.odit.services/lfk/kiosk/commit/a07eb4ddf52c31b391ea14d13c129282b5e344c3)
 - chore(deps): update all [`a610c6a`](https://git.odit.services/lfk/kiosk/commit/a610c6abd1887bf450294fff15db6eca7d99919c)
 - branding [`0a883ce`](https://git.odit.services/lfk/kiosk/commit/0a883ce7fbd3defccbe7be70ce6affcab281c9c5)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lfk/kiosk",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"private": false,
 	"license": "MIT",
 	"repository": "https://git.odit.services/lfk/kiosk",

src/lib/userstore.ts

@@ -32,8 +32,8 @@ const userStore = () => {
                     this.refreshAuth();
                 }, 2 * 60000)
 
-                localStorage.setItem('userdata', JSON.stringify(state));
+                localStorage.setItem('kiosk-userdata', JSON.stringify(state));
-                localStorage.setItem('access_token', state.access_token);
+                localStorage.setItem('kiosk-access_token', state.access_token);
                 OpenAPI.TOKEN = resAuth.access_token;
                 return state;
             });
@@ -48,12 +48,12 @@ const userStore = () => {
         },
         async loginFromStorage() {
             console.log('loginFromStorage');
-            const access_token = localStorage.getItem('access_token');
+            const access_token = localStorage.getItem('kiosk-access_token');
             if (!access_token) {
                 throw new Error('Unauthorized');
             }
 
-            const storagedata = localStorage.getItem('userdata');
+            const storagedata = localStorage.getItem('kiosk-userdata');
             const userdata = JSON.parse(storagedata || '{}') as UserState;
 
             update((state: UserState) => {

src/routes/+page.svelte

@@ -22,7 +22,7 @@
 		<div class="mt-8 grid gap-3 w-full sm:inline-flex sm:justify-center">
 			<a
 				class="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 border border-transparent text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-4 dark:focus:ring-offset-gray-800"
-				href="/login"
+				href="./login"
 			>
 				Kiosk starten
 				<svg class="w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="none">

src/routes/login/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import userstore from '$lib/userstore';
 	import { AuthService } from '@odit/lfk-client-js';
 
@@ -14,7 +15,7 @@
 			})) as import('@odit/lfk-client-js').ResponseAuth;
             loginError=false;
 			await userstore.login(auth);
-			location.replace('/registration');
+			goto('./registration', {replaceState: true})
 		} catch (error) {
 			console.log(error);
 			loginError = true;

src/routes/registration/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import userstore from '$lib/userstore';
 	import { onMount } from 'svelte';
 
@@ -11,7 +12,7 @@
 		} catch (error) {
 			console.log(error);
 			userstore.logout();
-			location.replace(`/login`);
+			goto('./login', {replaceState: true})
 		}
 	});
 </script>

src/routes/registration/+page.svelte

@@ -2,15 +2,34 @@
 	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({
@@ -20,6 +39,12 @@
 			})) as ResponseRunner;
 			showError = false;
 			showResult = true;
+			setTimeout(() => {
+				doneButtonEnabled = true;
+				setTimeout(() => {
+					focusDoneButton();
+				}, 25);
+			}, 7500);
 		} catch (error) {
 			console.log(error);
 			showError = true;
@@ -46,10 +71,14 @@
 		});
 		return canvas.toDataURL('image/png');
 	}
+
+	onMount(() => {
+		focusFirstName();
+	});
 </script>
 
 <div
-	class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16"
+	class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16 select-none"
 	style="background: url({lfkbackground});background-position: center center!important;background-size: contain!important;background-repeat: no-repeat!important;"
 >
 	<div class="w-full max-w-md mx-auto p-6">
@@ -72,6 +101,11 @@
 								<label for="firstname" class="block text-lg font-bold mb-2 sr-only">Vorname</label>
 								<div class="relative">
 									<input
+										on:keydown={(e) => {
+											if (e.keyCode === 13) {
+												document.getElementById('lastname')?.focus();
+											}
+										}}
 										type="text"
 										id="firstname"
 										name="firstname"
@@ -154,7 +188,7 @@
 							<button
 								type="submit"
 								disabled={!firstname || !lastname}
-								class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all  dark:focus:ring-offset-gray-800"
+								class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 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>
@@ -178,8 +212,13 @@
 
 					<div class="mx-auto text-center items-center">
 						<button
+							class:opacity-50={!doneButtonEnabled}
+							disabled={!doneButtonEnabled}
+							id="done"
 							on:click={() => {
+								doneButtonEnabled = false;
 								showResult = false;
+								focusFirstName();
 							}}
 							class="w-full 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"
 							>Fertig</button
@@ -191,7 +230,7 @@
 		</div>
 	</div>
 </div>
-<div class="fixed bottom-0 w-full text-center text-xl p-4">
+<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none">
 	<a
 		rel="noopener noreferrer"
 		target="_blank"