Merge pull request #104 from ssciwr/add-forgot-password-component

- Add forgot password component - make use of localization - add backend connection
ssciwr · Oct 15, 2024 · 1fbb03d · 1fbb03d
2 parents d4ea8f8 + e7e098b
commit 1fbb03d
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 5 deletions.
diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/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);

diff --git a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte b/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">

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/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;
@@ -56,7 +56,7 @@
 </script>
 
 {#if label}
-	<Label class="font-semibold text-gray-700 dark:text-gray-400">{label}</Label>
+	<Label for={properties.id} class="font-semibold text-gray-700 dark:text-gray-400">{label}</Label>
 {/if}
 
 <div class="space-y-4">

diff --git a/frontend/src/lib/components/UserForgotPassword.svelte b/frontend/src/lib/components/UserForgotPassword.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
+
+	import { type ResetForgotPasswordData } from '$lib/client';
+	import { resetForgotPassword } from '$lib/client/services.gen';
+	import { preventDefault } from '$lib/util';
+
+	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: 'email',
+		value: '',
+		props: {
+			placeholder: $_('forgotPw.placeholder'),
+			id: 'email',
+			required: true
+		}
+	};
+
+	let alertMessage: string = $_('forgotPw.formatError');
+	let showAlert: boolean;
+	let showSuccess: boolean = false;
+
+	async function submitData(): Promise<void> {
+		const data: ResetForgotPasswordData = {
+			body: {
+				email: maildata.value
+			}
+		};
+
+		const result = await resetForgotPassword(data);
+
+		if (result.error) {
+			console.log('error: ', result.error);
+			showAlert = true;
+			alertMessage = $_('forgotPw.sendError');
+		} else {
+			console.log('successful transmission, response status: ', result.response.status);
+			showSuccess = true;
+		}
+	}
+</script>
+
+{#if showAlert}
+	<AlertMessage
+		title={$_('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"
+		>{$_('forgotPw.heading')}</Heading
+	>
+	{#if showSuccess === false}
+		<form onsubmit={preventDefault(submitData)}>
+			<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" type="submit">{$_('forgotPw.pending')}</Button>
+			</div>
+		</form>
+	{:else}
+		<div class="m-2 flex w-full items-center justify-center p-2">
+			<p>{$_('forgotPw.mailSentMessage')}</p>
+		</div>
+		<div class="m-2 flex w-full items-center justify-center p-2">
+			<Button
+				class="dark:bg-primay-700 w-full bg-primary-700 text-center text-sm text-white hover:bg-primary-800 hover:text-white dark:hover:bg-primary-800"
+				size="md"
+				type="button"
+				on:click={(event) => {
+					goto(`/${base}`);
+				}}>{$_('forgotPw.success')}</Button
+			>
+		</div>
+	{/if}
+</Card>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -44,5 +44,16 @@
 		"help": "Förderhilfen",
 		"image": "Bild",
 		"images": "Bilder"
+	},
+	"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"
 	}
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -44,5 +44,16 @@
 		"help": "More information",
 		"image": "Image",
 		"images": "Images"
+	},
+	"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."
 	}
 }
diff --git a/frontend/src/routes/userLand/lostPassword/+page.svelte b/frontend/src/routes/userLand/lostPassword/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import UserForgotPassword from '$lib/components/UserForgotPassword.svelte';
+</script>
+
+<UserForgotPassword />