From d3d0d17b3a99ab8412df3111dc2d4c029fd04908 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 19 Apr 2023 11:55:03 +0200
Subject: [PATCH] Registration feedback logic

---
 src/routes/registration/+page.svelte | 46 ++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/routes/registration/+page.svelte b/src/routes/registration/+page.svelte
index 012d96b..a250edd 100644
--- a/src/routes/registration/+page.svelte
+++ b/src/routes/registration/+page.svelte
@@ -4,6 +4,7 @@
 
 	$: firstname = '';
 	$: lastname = '';
+	$: accepted = false;
 	$: showResult = false;
 	$: showError = false;
 
@@ -24,6 +25,9 @@
 			showError = true;
 			showResult = false;
 		}
+		firstname = '';
+		lastname = '';
+		accepted = false;
 	}
 
 	function textToBase64Barcode(text: string, is_qrcode: boolean) {
@@ -77,8 +81,9 @@
 											bind:value={firstname}
 											aria-describedby="firstname-error"
 										/>
-										<div
-											class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
+										<!-- <div
+											class:hidden={firstname || firstname.length != 0}
+											class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
 										>
 											<svg
 												class="h-5 w-5 text-red-500"
@@ -92,11 +97,15 @@
 													d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
 												/>
 											</svg>
-										</div>
+										</div> -->
 									</div>
-									<p class="hidden text-xs text-red-600 mt-2" id="firstname-error">
+									<!-- <p
+										class:hidden={firstname || firstname.length != 0}
+										class="text-xs text-red-600 mt-2"
+										id="firstname-error"
+									>
 										Bitte gebe deinen Vornamen ein
-									</p>
+									</p> -->
 								</div>
 								<!-- End Form Group -->
 
@@ -113,8 +122,9 @@
 											aria-describedby="lastname-error"
 											bind:value={lastname}
 										/>
-										<div
-											class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
+										<!-- <div
+											class:hidden={lastname || lastname.length != 0}
+											class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
 										>
 											<svg
 												class="h-5 w-5 text-red-500"
@@ -128,21 +138,32 @@
 													d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
 												/>
 											</svg>
-										</div>
+										</div> -->
 									</div>
-									<p class="hidden text-xs text-red-600 mt-2" id="lastname-error">
+									<!-- <p
+										class:hidden={lastname || lastname.length != 0}
+										class="text-xs text-red-600 mt-2"
+										id="lastname-error"
+									>
 										Bitte gebe deinen Nachnamen ein
-									</p>
+									</p> -->
 								</div>
 								<!-- End Form Group -->
 
 								<!-- Checkbox -->
-								<div class="flex items-center">
+								<div
+									class="flex items-center"
+									on:click={() => {
+										accepted = !accepted;
+									}}
+									on:keydown={() => {}}
+								>
 									<div class="flex">
 										<input
 											id="remember-me"
 											name="remember-me"
 											type="checkbox"
+											bind:checked={accepted}
 											class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
 										/>
 									</div>
@@ -159,7 +180,8 @@
 
 								<button
 									type="submit"
-									class="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"
+									disabled={!firstname || !lastname || !accepted}
+									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 text-sm dark:focus:ring-offset-gray-800"
 									>Anmelden</button
 								>
 							</div>