make requested changes: error handling, localization adjustment, form…

… tag usage
ssciwr · Oct 15, 2024 · 69faaf3 · 69faaf3
1 parent 30c990c
commit 69faaf3
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 55 deletions.
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -56,14 +56,14 @@
 </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">
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
+			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}

diff --git a/frontend/src/lib/components/UserForgotPassword.svelte b/frontend/src/lib/components/UserForgotPassword.svelte
@@ -1,59 +1,54 @@
 <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: 'text',
-		value: null,
+		type: 'email',
+		value: '',
 		props: {
-			placeholder: $_('user.forgotPw.placeholder')
+			placeholder: $_('forgotPw.placeholder'),
+			id: 'email',
+			required: true
 		}
 	};
 
-	let alertMessage: string = $_('user.forgotPw.formatError');
-	let valid: boolean = true;
-	let showAlert: boolean = !valid;
+	let alertMessage: string = $_('forgotPw.formatError');
+	let showAlert: boolean;
 	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 = {
+	async function submitData(): Promise<void> {
+		const data: ResetForgotPasswordData = {
 			body: {
-				email: mailstring
-			},
-			throwOnError: true
+				email: maildata.value
+			}
 		};
 
-		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');
-			});
+		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={$_('user.forgotPw.alertTitle')}
+		title={$_('forgotPw.alertTitle')}
 		message={alertMessage}
 		lastpage={`${base}/userLand/lostPassword`}
 		onclick={() => {
@@ -66,39 +61,33 @@
 	<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
+		>{$_('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>
+		<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"
-				on:click={(event) => {
-					valid = validateEmail(maildata.value);
-					showAlert = !valid;
-					if (valid) {
-						submitData(maildata.value);
-					}
-				}}>{$_('user.forgotPw.pending')}</Button
-			>
-		</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>{$_('user.forgotPw.mailSentMessage')}</p>
+			<p>{$_('forgotPw.mailSentMessage')}</p>
 		</div>
 		<div class="m-2 flex w-full items-center justify-center p-2">
 			<Button
 				size="md"
+				type="button"
 				on:click={(event) => {
 					goto(`/${base}`);
-				}}>{$_('user.forgotPw.success')}</Button
+				}}>{$_('forgotPw.success')}</Button
 			>
 		</div>
 	{/if}