From cbfbd92d0e4f9735a2192125f267f651ed36c9b1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Wed, 19 Apr 2023 16:58:35 +0200
Subject: [PATCH] feat(registration): autofocus input fields + done button

---
 src/routes/registration/+page.svelte | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/routes/registration/+page.svelte b/src/routes/registration/+page.svelte
index 9a84db8..4ed6ab9 100644
--- a/src/routes/registration/+page.svelte
+++ b/src/routes/registration/+page.svelte
@@ -2,6 +2,7 @@
 	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 = '';
@@ -11,6 +12,23 @@
 	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 +38,7 @@
 			})) as ResponseRunner;
 			showError = false;
 			showResult = true;
+			focusDoneButton();
 		} catch (error) {
 			console.log(error);
 			showError = true;
@@ -46,6 +65,10 @@
 		});
 		return canvas.toDataURL('image/png');
 	}
+
+	onMount(() => {
+		focusFirstName();
+	});
 </script>
 
 <div
@@ -178,8 +201,10 @@
 
 					<div class="mx-auto text-center items-center">
 						<button
+							id="done"
 							on:click={() => {
 								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 +216,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"