Add forgot password component

frontend/src/lib/components/ChildrenRegistration.svelte

@@ -59,7 +59,6 @@
 		{
 			label: 'Abschließen',
 			onclick: async () => {
-				console.log('build shit');
 				const childData = buildDataToSend(data);
 				const required = buildRequired(data);
 				const verified = await verifyInput(childData, required);

frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte

@@ -41,8 +41,6 @@
 		const index = data.indexOf(item);
 		return componentProps[index];
 	});
-
-	$: console.log('data in gallery: ', data);
 </script>
 
 <div class="mx-auto p-4">

frontend/src/lib/components/DataInput/DataInput.svelte

@@ -8,7 +8,7 @@
 	// variables
 	export let component: any;
 	export let value: any;
-	export let label: string;
+	export let label: string | null = null;
 	export let componentClass: string = '';
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;

frontend/src/lib/components/UserForgotPassword.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
+	import { resetForgotPassword } from '$lib/client/services.gen';
+	import AlertMessage from '$lib/components/AlertMessage.svelte';
+	import DataInput from '$lib/components/DataInput/DataInput.svelte';
+	import { Button, Card, Heading, Input } from 'flowbite-svelte';
+	import { _ } from 'svelte-i18n';
+
+	const maildata = {
+		component: Input,
+		type: 'text',
+		value: null,
+		props: {
+			placeholder: $_('user.forgotPw.placeholder')
+		}
+	};
+
+	let alertMessage: string = $_('user.forgotPw.formatError');
+	let valid: boolean = true;
+	let showAlert: boolean = !valid;
+	let showSuccess: boolean = false;
+
+	function validateEmail(value: string | null): boolean {
+		if (value === null) {
+			return false;
+		} else {
+			const mailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+			return mailRegex.test(value);
+		}
+	}
+
+	async function submitData(mailstring: string): Promise<void> {
+		const data = {
+			body: {
+				email: mailstring
+			},
+			throwOnError: true
+		};
+
+		await resetForgotPassword(data)
+			.then((returned) => {
+				console.log('successful transmission, response status: ', returned.response.status);
+				showSuccess = true;
+			})
+			.catch((error) => {
+				console.log(error);
+				showAlert = true;
+				alertMessage = $_('user.forgotPw.sendError');
+			});
+	}
+</script>
+
+{#if showAlert}
+	<AlertMessage
+		title={$_('user.forgotPw.alertTitle')}
+		message={alertMessage}
+		lastpage={`${base}/userLand/lostPassword`}
+		onclick={() => {
+			showAlert = false;
+		}}
+	/>
+{/if}
+
+<Card class="container m-2 mx-auto w-full max-w-xl items-center justify-center p-2">
+	<Heading
+		tag="h3"
+		class="m-2 p-2 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
+		>{$_('user.forgotPw.heading')}</Heading
+	>
+	{#if showSuccess === false}
+		<div class="m-2 mx-auto w-full flex-col space-y-6 p-2">
+			<DataInput
+				component={maildata.component}
+				bind:value={maildata.value}
+				properties={maildata.props}
+			/>
+		</div>
+
+		<div class="m-2 flex w-full items-center justify-center p-2">
+			<Button
+				size="md"
+				on:click={(event) => {
+					valid = validateEmail(maildata.value);
+					showAlert = !valid;
+					if (valid) {
+						submitData(maildata.value);
+					}
+				}}>{$_('user.forgotPw.pending')}</Button
+			>
+		</div>
+	{:else}
+		<div class="m-2 flex w-full items-center justify-center p-2">
+			<p>{$_('user.forgotPw.mailSentMessage')}</p>
+		</div>
+		<div class="m-2 flex w-full items-center justify-center p-2">
+			<Button
+				size="md"
+				on:click={(event) => {
+					goto(`/${base}`);
+				}}>{$_('user.forgotPw.success')}</Button
+			>
+		</div>
+	{/if}
+</Card>

frontend/src/locales/de.json

@@ -44,5 +44,18 @@
 		"help": "Förderhilfen",
 		"image": "Bild",
 		"images": "Bilder"
+	},
+	"user": {
+		"login": {},
+		"forgotPw": {
+			"heading": "Passwort vergessen?",
+			"placeholder": "Bitte geben sie eine E-mail Adresse an um ihr Passwort zu erneuern",
+			"success": "Zurück zur Startseite",
+			"pending": "Absenden",
+			"alertTitle": "Fehler",
+			"formatError": "Die angegebene email Adresse hat ein falsches Format",
+			"mailSentMessage": "Bitte überprüfen sie ihr E-Mail Postfach",
+			"sendError": "Beim Senden der Daten ist ein Fehler aufgetreten. Bitte versuchen sie es erneut"
+		}
 	}
 }

frontend/src/locales/en.json

@@ -44,5 +44,18 @@
 		"help": "More information",
 		"image": "Image",
 		"images": "Images"
+	},
+	"user": {
+		"login": {},
+		"forgotPw": {
+			"heading": "Forgot your password?",
+			"placeholder": "Please enter your e-mail adress to get a new password",
+			"success": "Back to home",
+			"pending": "Send",
+			"alertTitle": "Error",
+			"formatError": "The given e-mail adress has a wrong format.",
+			"mailSentMessage": "Please check your e-mail inbox",
+			"sendError": "An error occured while sending the data. Please try again."
+		}
 	}
 }

frontend/src/routes/userLand/lostPassword/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import UserForgotPassword from '$lib/components/UserForgotPassword.svelte';
+</script>
+
+<UserForgotPassword />