🚀Bumped version to 0.5.0

CHANGELOG.md

@@ -2,8 +2,18 @@
 
 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)

package.json

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

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"
@@ -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 dark:text-white">
+<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none">
 	<a
 		rel="noopener noreferrer"
 		target="_blank"