From 09aee15f60bec58ca3cc3b9ce392774a7ff77219 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 19 Apr 2023 11:35:39 +0200
Subject: [PATCH] Basic registration page

---
 src/routes/registration/+page.svelte | 153 +++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 src/routes/registration/+page.svelte

diff --git a/src/routes/registration/+page.svelte b/src/routes/registration/+page.svelte
new file mode 100644
index 0000000..83e57ff
--- /dev/null
+++ b/src/routes/registration/+page.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
+
+	$: firstname = '';
+	$: lastname = '';
+	$: showResult = true;
+	$: showError = false;
+
+	let response: ResponseRunner;
+	const group = 1; //Default to Bürgerlauf
+
+	async function register() {
+		try {
+			response = (await RunnerService.runnerControllerPost({
+				firstname,
+				lastname,
+				group
+			})) as ResponseRunner;
+			showError = false;
+		} catch (error) {
+			console.log(error);
+			showError = true;
+		}
+	}
+</script>
+
+<div class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16">
+	<div class="w-full max-w-md mx-auto p-6">
+		<div
+			class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700"
+		>
+			<div class="p-4 sm:p-7">
+				<div class="text-center">
+					<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Registrierung</h1>
+					<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p>
+				</div>
+
+				<div class="mt-5">
+					<!-- Form -->
+					{#if !showResult}
+						<form on:submit|preventDefault={register}>
+							<div class="grid gap-y-4">
+								<!-- Form Group -->
+								<div>
+									<label for="firstname" class="block text-sm mb-2 dark:text-white">Vorname</label>
+									<div class="relative">
+										<input
+											type="text"
+											id="firstname"
+											name="firstname"
+											class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+											required
+											bind:value={firstname}
+											aria-describedby="firstname-error"
+										/>
+										<div
+											class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
+										>
+											<svg
+												class="h-5 w-5 text-red-500"
+												width="16"
+												height="16"
+												fill="currentColor"
+												viewBox="0 0 16 16"
+												aria-hidden="true"
+											>
+												<path
+													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>
+									<p class="hidden text-xs text-red-600 mt-2" id="firstname-error">
+										Bitte gebe deinen Vornamen ein
+									</p>
+								</div>
+								<!-- End Form Group -->
+
+								<!-- Form Group -->
+								<div>
+									<label for="lastname" class="block text-sm mb-2 dark:text-white">Nachname</label>
+									<div class="relative">
+										<input
+											type="lastname"
+											id="lastname"
+											name="lastname"
+											class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+											required
+											aria-describedby="lastname-error"
+											bind:value={lastname}
+										/>
+										<div
+											class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
+										>
+											<svg
+												class="h-5 w-5 text-red-500"
+												width="16"
+												height="16"
+												fill="currentColor"
+												viewBox="0 0 16 16"
+												aria-hidden="true"
+											>
+												<path
+													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>
+									<p class="hidden text-xs text-red-600 mt-2" id="lastname-error">
+										Bitte gebe deinen Nachnamen ein
+									</p>
+								</div>
+								<!-- End Form Group -->
+
+								<!-- Checkbox -->
+								<div class="flex items-center">
+									<div class="flex">
+										<input
+											id="remember-me"
+											name="remember-me"
+											type="checkbox"
+											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>
+									<div class="ml-3">
+										<label for="remember-me" class="text-sm dark:text-white"
+											>Ich habe die <a
+												class="text-blue-600 decoration-2 hover:underline font-medium"
+												href="https://lauf-fuer-kaya.de/datenschutz">Datenschutzerklärung</a
+											> gelesen und aktzeptiert</label
+										>
+									</div>
+								</div>
+								<!-- End Checkbox -->
+
+								<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"
+									>Anmelden</button
+								>
+							</div>
+						</form>
+						<!-- End Form -->
+					{:else}
+						<p class="block text-lg mb-2 dark:text-white">ID: {response.id}</p>
+						<p class="block text-lg mb-2 dark:text-white">Vorname: {response.firstname}</p>
+						<p class="block text-lg mb-2 dark:text-white">Nachname: {response.lastname}</p>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>