password reset email

frontend/src/routes/settings/forgot-password/+page.server.ts

@@ -22,8 +22,13 @@ export const actions: Actions = {
 				email
 			})
 		});
+
 		if (!res.ok) {
-			return fail(res.status, { message: await res.json() });
+			let message = await res.json();
+
+			const key = Object.keys(message)[0];
+
+			return fail(res.status, { message: message[key] });
 		}
 		return { success: true };
 	}

frontend/src/routes/settings/forgot-password/+page.svelte

@@ -6,7 +6,7 @@
 <h1 class="text-center font-extrabold text-4xl mb-6">Reset Password</h1>
 
 <div class="flex justify-center">
-	<form method="post" action="?/forgotPassword" class="w-full max-w-xs">
+	<form method="post" action="?/forgotPassword" class="w-full max-w-xs" use:enhance>
 		<label for="email">Email</label>
 		<input
 			name="email"

frontend/src/routes/settings/forgot-password/confirm/+page.server.ts

@@ -1,4 +1,4 @@
-import { fail, redirect } from '@sveltejs/kit';
+import { fail, redirect, type Actions } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
 const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
@@ -6,26 +6,54 @@ const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
 export const load = (async (event) => {
 	const token = event.url.searchParams.get('token');
 	const uid = event.url.searchParams.get('uid');
-	console.log('token', token);
 
-	if (!token) {
-		return redirect(302, '/settings/forgot-password');
-	} else {
-		let response = await fetch(`${serverEndpoint}/auth/password/reset/confirm/`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify({
-				token: token,
-				uid: uid,
-				new_password1: 'password',
-				new_password2: 'password'
-			})
-		});
-		let data = await response.json();
-		console.log('data', data);
-	}
-
-	return {};
+	return {
+		props: {
+			token,
+			uid
+		}
+	};
 }) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	reset: async (event) => {
+		const formData = await event.request.formData();
+
+		const new_password1 = formData.get('new_password1') as string;
+		const new_password2 = formData.get('new_password2') as string;
+		const token = formData.get('token') as string;
+		const uid = formData.get('uid') as string;
+
+		if (!new_password1 || !new_password2) {
+			return fail(400, { message: 'Password is required' });
+		}
+
+		if (new_password1 !== new_password2) {
+			return fail(400, { message: 'Passwords do not match' });
+		}
+
+		if (!token || !uid) {
+			return redirect(302, '/settings/forgot-password');
+		} else {
+			let response = await fetch(`${serverEndpoint}/auth/password/reset/confirm/`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					token: token,
+					uid: uid,
+					new_password1,
+					new_password2
+				})
+			});
+			if (!response.ok) {
+				let responseJson = await response.json();
+				const key = Object.keys(responseJson)[0];
+				return fail(response.status, { message: responseJson[key] });
+			} else {
+				return redirect(302, '/login');
+			}
+		}
+	}
+};

frontend/src/routes/settings/forgot-password/confirm/+page.svelte

@@ -1,5 +1,35 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
+	import { page } from '$app/stores';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 </script>
+
+<h1 class="text-center font-bold text-4xl mb-4">Change Password</h1>
+<form action="?/reset" method="post" use:enhance>
+	<input type="hidden" name="uid" value={data.props.uid} />
+	<input type="hidden" name="token" value={data.props.token} />
+	<div class="flex items-center justify-center gap-4">
+		<input
+			type="password"
+			class="input input-bordered w-full max-w-xs"
+			id="new_password1"
+			name="new_password1"
+			placeholder="New Password"
+		/>
+		<input
+			type="password"
+			class="input input-bordered w-full max-w-xs"
+			id="new_password2"
+			name="new_password2"
+			placeholder="Confirm Password"
+		/>
+		<button type="submit" class="btn btn-primary"> Submit </button>
+		{#if $page.form?.message}
+			<div class="text-center text-error mt-4">
+				{$page.form?.message}
+			</div>
+		{/if}
+	</div>
+</form>