Registration feedback logic

src/routes/registration/+page.svelte

@@ -4,6 +4,7 @@
 
 	$: firstname = '';
 	$: lastname = '';
+	$: accepted = false;
 	$: showResult = false;
 	$: showError = false;
 
@@ -24,23 +25,26 @@
 			showError = true;
 			showResult = false;
 		}
+		firstname = '';
+		lastname = '';
+		accepted = false;
 	}
 
 	function textToBase64Barcode(text: string, is_qrcode: boolean) {
 		const canvas = document.createElement('canvas');
-		let bcid = 'ean13';
+		let bcid = 'code128';
 		if (is_qrcode) {
 			bcid = 'qrcode';
 		}
 		let codeconfig = {
 			bcid,
 			text: `${text}`,
-			scale: 4,
+			scale: 10,
 			includetext: true,
 			textxalign: 'center',
 			backgroundcolor: 'ffffff'
 		};
-		if (bcid == 'ean13') {
+		if (bcid == 'code128') {
 			codeconfig.height = 10;
 		}
 		bwipjs.toCanvas(canvas, codeconfig);
@@ -77,8 +81,9 @@
 											bind:value={firstname}
 											aria-describedby="firstname-error"
 										/>
-										<div
+										<!-- <div
-											class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
+											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
-									<p class="hidden text-xs text-red-600 mt-2" id="firstname-error">
+										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
+										<!-- <div
-											class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
+											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
-									<p class="hidden text-xs text-red-600 mt-2" id="lastname-error">
+										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,32 +180,39 @@
 
 								<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>
 						</form>
 						<!-- End Form -->
 					{:else}
-						<div>
+						<div class="mb-2">
-							<p class="text-lg mb-2 dark:text-white">ID: {response.id}</p>
+							<h3 class="text-xl font-semibold text-center dark:text-white">Läuferdaten</h3>
-							<p class="text-lg mb-2 dark:text-white">Vorname: {response.firstname}</p>
+							<p class="text-lg dark:text-white">ID: {response.id}</p>
-							<p class="text-lg mb-2 dark:text-white">Nachname: {response.lastname}</p>
+							<p class="text-lg dark:text-white">Vorname: {response.firstname}</p>
+							<p class="text-lg dark:text-white">Nachname: {response.lastname}</p>
 						</div>
 
+						<div class="mb-2 text-center">
+							<h3 class="text-xl font-semibold dark:text-white">Läufercode</h3>
 							<img
-							class="w-full md:w-auto mb-2 mx-auto"
+								class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
 								alt="Runnerid"
 								src={textToBase64Barcode(response.id.toString(), false)}
 							/>
+						</div>
 
+						<div class="mx-auto text-center items-center">
 							<button
 								on:click={() => {
 									showResult = false;
 								}}
-							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"
+								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
 							>
+						</div>
 					{/if}
 				</div>
 			</div>