add data validation

src/lib/components/UserRegistration.svelte

@@ -1,67 +1,103 @@
-<script>
+<script lang="ts">
+	import { goto } from '$app/navigation';
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
-	import { Card, Input, Heading } from 'flowbite-svelte';
+	import Input from '$lib/components/DataInput/Input.svelte';
+	import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
+	import { createDummyUser, users } from '$lib/stores/userStore';
+	import { Card, Heading } from 'flowbite-svelte';
+	import { onDestroy, onMount } from 'svelte';
 
-	const props = [
+	onMount(async () => {
+		// make dummyUser if not already there
+		users.load();
+		if (!users.get()['dummyUser123']) {
+			createDummyUser();
+		}
+	});
+
+	onDestroy(async () => {
+		await users.save();
+	});
+
+	function validate(): void {
+		const mailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		missingValues[0] = inputValues[0] === null || inputValues[0] === ''; // username
+		missingValues[1] = inputValues[1] === null || mailRegex.test(inputValues[1]) === false; // email
+		missingValues[2] = inputValues[2] === null || inputValues[2] !== inputValues[3]; // password
+		missingValues[3] = inputValues[3] === null || missingValues[2];
+	}
+
+	function reroute(): void {
+		validate();
+		if (
+			missingValues.every((v) => {
+				v === false;
+			})
+		) {
+			// README: userID is username+password just as a placeholder
+			users.add(inputValues[0] + inputValues[1], {
+				name: inputValues[0],
+				id: inputValues[0] + inputValues[1],
+				role: 'user',
+				password: inputValues[2]
+			});
+			users.save();
+			goto('/userLand/userDataInput');
+		} else {
+			showAlert = true;
+		}
+	}
+
+	const data = [
 		{
-			componentProps: {
-				label: 'Benutzername',
-				type: 'text',
-				placeholder: 'Wählen sie einen beliebigen Benutzernamen',
-				required: true,
-				about: 'Wählen sie einen beliebigen Benutzernamen'
-			},
-			itemComponent: Input
+			label: 'Benutzername',
+			name: 'Benutzername',
+			type: 'text',
+			placeholder: 'Wählen sie einen beliebigen Benutzernamen',
+			required: true
 		},
 		{
-			componentProps: {
-				label: 'E-Mail (optional)',
-				type: 'email',
-				placeholder: 'E-Mail',
-				about:
-					'Geben sie ihre E-mail Adresse an falls sie über aktuelle Forschungsergebnisse informiert werden möchten.'
-			},
-			itemComponent: Input
+			label: 'E-Mail',
+			name: 'E-Mail',
+			type: 'email',
+			placeholder: 'E-Mail',
+			required: true
 		},
 		{
-			componentProps: {
-				label: 'Passwort',
-				type: 'password',
-				placeholder: 'Passwort',
-				required: true,
-				about:
-					'Wählen sie ein Passwort aus. Ihr login key wird aus diesem Passwort und ihrem Benutzernamen generiert.'
-			},
-			itemComponent: Input
+			label: 'Passwort',
+			name: 'Passwort',
+			type: 'password',
+			placeholder: 'Passwort',
+			required: true
 		},
 		{
-			componentProps: {
-				label: 'Passwort wiederholen',
-				type: 'password',
-				placeholder: 'Passwort wiederholen',
-				required: true,
-				about: 'Bestätigen sie ihr Passwort'
-			},
-			itemComponent: Input
+			label: 'Passwort wiederholen',
+			name: 'Passwort wiederholen',
+			type: 'password',
+			placeholder: 'Passwort wiederholen',
+			required: true
 		}
 	];
 
+	const heading = 'Als neuer Benutzer registrieren';
+	let showAlert: boolean = false;
+	let showCheckMessage: boolean = false;
+	let missingValues: boolean[] = [false, false, false, false];
+	let inputValues: (string | null)[] = [null, null, null, null];
+
 	const buttons = [
 		{
-			label: 'Weiter',
-			href: '/userLand/userDataInput'
+			label: 'Registrieren',
+			onclick: reroute
 		}
 	];
-
-	const heading = 'Als neuer Benutzer registrieren';
 </script>
 
 <!-- Show big alert message when something is missing -->
 {#if showAlert}
 	<AlertMessage
 		title="Fehler"
-		message="Bitte füllen Sie mindestens die benötigten Felder (hervorgehoben) aus."
-		lastpage="/childLand/childDataInput/"
+		message="Bitte füllen Sie die benötigten Felder (hervorgehoben) aus."
 		infopage="/info"
 		infotitle="Was passiert mit den Daten"
 		onclick={() => {
@@ -71,30 +107,22 @@
 	/>
 {/if}
 
-{#if showCheckMessage}
-	<AlertMessage
-		title="Bevor es weitergeht"
-		message="Bitte überprüfen sie ihre eingaben nochmals genau bevor sie weiter gehen"
-		lastpage="/childLand/childDataInput"
-		infopage="/"
-		infotitle="Was passiert mit den Daten?"
-		onclick={() => {
-			showCheckMessage = false;
-		}}
-	/>
-{/if}
-
 <!-- The actual content -->
-<Card class="container m-1 mx-auto w-full max-w-xl">
-	{#if heading}
-		<Heading
-			tag="h3"
-			class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
-			>{heading}</Heading
-		>
-	{/if}
+<div class="container m-1 mx-auto w-full max-w-xl">
+	<Card class="container m-1 mx-auto w-full max-w-xl">
+		{#if heading}
+			<Heading
+				tag="h3"
+				class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
+				>{heading}</Heading
+			>
+		{/if}
 
-	<form class="m-1 mx-auto w-full flex-col space-y-6">
-		{#each data as element, i}{/each}
-	</form>
-</Card>
+		<form class="m-1 mx-auto w-full flex-col space-y-6">
+			{#each data as element, i}
+				<Input {element} bind:value={inputValues[i]} valid={!missingValues[i]} />
+			{/each}
+		</form>
+		<NavigationButtons {buttons} />
+	</Card>
+</div>