add information and verbose back button when registered successfully (#7)

src/routes/register/+layout.svelte

@@ -1,3 +1,3 @@
-<div class="flex justify-center w-full min-h-full bg-base-200">
+<div class="flex justify-center w-full min-h-screen bg-base-200">
 	<slot />
 </div>

src/routes/register/+page.svelte

@@ -5,7 +5,12 @@
 	import type { PageData } from './$types';
 
 	let registered = false;
+	let firstname: string | null = null;
+	let lastname: string | null = null;
+	let birthday: Date | null = null;
+	let phone: string | null = null;
 	let username: string | null = null;
+	let edition: string | null = null;
 
 	export let data: PageData;
 </script>
@@ -31,13 +36,27 @@
 			<Register
 				on:submit={(e) => {
 					registered = true;
+					firstname = e.detail.firstname;
+					lastname = e.detail.lastname;
+					birthday = e.detail.birthday;
+					phone = e.detail.phone;
+					phone = e.detail.phone;
 					username = e.detail.username;
+					edition = e.detail.edition;
 				}}
 			/>
 		</div>
 	{:else}
 		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
-			<RegistrationComplete {username} on:close={() => (registered = false)} />
+			<RegistrationComplete
+				{firstname}
+				{lastname}
+				{birthday}
+				{phone}
+				{username}
+				{edition}
+				on:close={() => (registered = false)}
+			/>
 		</div>
 	{/if}
 </div>

src/routes/register/+server.ts

@@ -49,9 +49,11 @@ export const POST = (async ({ request }) => {
 		if (e instanceof UserNotFoundError) {
 			throw error(
 				400,
-				`Der Spielername '${username}' existiert nicht. Hast Du Deinen Spielernamen korrekt geschrieben und 
+				"Der Spielername '" +
-				besitzt Du einen Minecraft-Account?\n\nKontaktiere bitte einen Admin, falls Du Dich trotz korrekter 
+					username +
-				Angabe nicht registrieren kannst.`
+					"' existiert nicht. Hast Du Deinen Spielernamen korrekt geschrieben " +
+					'und besitzt Du einen Minecraft-Account?\n\nKontaktiere bitte einen Admin, falls Du Dich trotz korrekter ' +
+					'Angabe nicht registrieren kannst.'
 			);
 		} else if (e instanceof ApiError) {
 			console.error((e as Error).message);

src/routes/register/Register.svelte

@@ -4,6 +4,7 @@
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 	import { rulesShort } from '$lib/rules';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	const dispatch = createEventDispatcher();
 
@@ -13,6 +14,7 @@
 	let firstnameInput: HTMLInputElement;
 	let lastnameInput: HTMLInputElement;
 	let birthdayInput: HTMLInputElement;
+	let phoneInput: HTMLInputElement;
 	let usernameInput: HTMLInputElement;
 	let privacyInput: HTMLInputElement;
 	let logsInput: HTMLInputElement;
@@ -39,7 +41,6 @@
 	async function sendRegister() {
 		// eslint-disable-next-line no-async-promise-executor
 		registerRequest = new Promise<void>(async (resolve, reject) => {
-			console.log(birthdayInput.valueAsDate);
 			if (
 				(birthdayInput.valueAsDate || new Date()) >
 				new Date(Date.now() - 1000 * 60 * 60 * 24 * 365 * 6)
@@ -57,7 +58,14 @@
 				body: new FormData(document.forms[0])
 			});
 			if (response.ok) {
-				dispatch('submit', { username: usernameInput.value });
+				dispatch('submit', {
+					firstname: firstnameInput.value,
+					lastname: lastnameInput.value,
+					birthday: birthdayInput.valueAsDate,
+					phone: phoneInput.value,
+					username: usernameInput.value,
+					edition: playertype == 'java' ? 'Java (PC)' : 'Bedrock (Konsolen und Handys)'
+				});
 				resolve();
 			} else if (response.status < 500) {
 				reject(Error((await response.json()).message));
@@ -113,7 +121,13 @@
 			<span slot="label">Geburtstag</span>
 			<span slot="notice">Die Angabe hat keine Auswirkungen auf das Spielgeschehen</span>
 		</Input>
-		<Input id="telephone" name="telephone" type="tel" pattern={new RegExp(/^[+()\s/\d]+$/)}>
+		<Input
+			id="telephone"
+			name="telephone"
+			type="tel"
+			bind:inputElement={phoneInput}
+			pattern={new RegExp(/^[+()\s/\d]+$/)}
+		>
 			<span slot="label">Telefonnummer</span>
 			<p slot="notice">
 				Diese nutzen wir, um Dich in der Whatsapp-Gruppe zuzuordnen und kontaktieren zu können.
@@ -157,7 +171,9 @@
 			<label for="privacy">
 				<span>
 					Ich bin mit der Speicherung meiner in der Anmeldung angegebenen, persönlichen Daten
-					einverstanden. Siehe <a class="link" href="https://mhsl.eu/id.html">Datenschutz</a>
+					einverstanden. Siehe <a class="link" href="https://mhsl.eu/id.html" target="_blank"
+						>Datenschutz</a
+					>
 				</span>
 				<span class="text-red-700">*</span>
 			</label>

src/routes/register/RegistrationComplete.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
-	import { ChevronLeft } from 'svelte-heros-v2';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
+	import Input from '$lib/components/Input/Input.svelte';
+	import Select from '$lib/components/Input/Select.svelte';
 
+	export let firstname: string;
+	export let lastname: string;
+	export let birthday: Date;
+	export let phone: string | null;
 	export let username: string;
+	export let edition: string;
 
 	const dispatch = createEventDispatcher();
 
@@ -41,12 +47,7 @@
 	});
 </script>
 
-<div class="flex items-center h-12 mb-2">
+<h1 class="text-center text-xl sm:text-3xl mb-8">Registrierung erfolgreich</h1>
-	<button class="sm:absolute btn btn-sm btn-square" on:click={() => dispatch('close')}>
-		<ChevronLeft variation="outline" />
-	</button>
-	<h1 class="text-center text-xl sm:text-3xl m-auto">Registrierung erfolgreich</h1>
-</div>
 <p>
 	<b>Du hast Dich erfolgreich für Craftattack 6 registriert</b>. Spielstart ist am
 	<span class="underline"
@@ -58,10 +59,29 @@
 	>.
 </p>
 <p>Alle weiteren Informationen werden in der Whatsapp-Gruppe bekannt gegeben.</p>
-<div class="relative flex justify-center w-full h-[200px] my-4">
+<div class="divider" />
+<div class="flex justify-around mt-2 mb-4">
+	<div class="grid grid-cols-1 sm:grid-cols-2 w-full sm:w-fit gap-x-4 gap-y-2">
+		<Input value={firstname} size="sm" readonly><span slot="label">Vorname</span></Input>
+		<Input value={lastname} size="sm" readonly><span slot="label">Nachname</span></Input>
+		<Input value={birthday.toISOString().substring(0, 10)} type="date" size="sm" readonly
+			><span slot="label">Geburtstag</span></Input
+		>
+		<Input value={phone} size="sm" readonly><span slot="label">Telefonnummer</span></Input>
+		<Input value={username} size="sm" readonly><span slot="label">Spielername</span></Input>
+		<Select value="edition" size="sm" disabled label="Edition">
+			<option value="edition">{edition}</option>
+		</Select>
+	</div>
+	<div class="relative hidden md:flex justify-center w-[200px] my-4">
 		{#if skin}
 			<img class="absolute" src={skin} alt="" />
 		{:else}
 			<span class="loading loading-spinner loading-lg"></span>
 		{/if}
 	</div>
+</div>
+<div class="divider" />
+<div class="flex justify-center gap-8">
+	<button class="btn" on:click={() => dispatch('close')}>Weitere Person anmelden</button>
+</div>