Update email verification and password reset flows; refactor Docker Compose and enhance email management

backend/server/main/settings.py

@@ -178,11 +178,15 @@ SESSION_SAVE_EVERY_REQUEST = True
 
 FRONTEND_URL = getenv('FRONTEND_URL', 'http://localhost:3000')
 
-# HEADLESS_FRONTEND_URLS = {
+HEADLESS_FRONTEND_URLS = {
-#     "account_confirm_email": "https://app.project.org/account/verify-email/{key}",
+    "account_confirm_email": f"{FRONTEND_URL}/user/verify-email/{{key}}",
-#     "account_reset_password_from_key": "https://app.org/account/password/reset/key/{key}",
+    "account_reset_password": f"{FRONTEND_URL}/user/reset-password",
-#     "account_signup": "https://app.org/account/signup",
+    "account_reset_password_from_key": f"{FRONTEND_URL}/user/reset-password/{{key}}",
-# }
+    "account_signup": f"{FRONTEND_URL}/signup",
+    # Fallback in case the state containing the `next` URL is lost and the handshake
+    # with the third-party provider fails.
+    "socialaccount_login_error": f"{FRONTEND_URL}/account/provider/callback",
+}
 
 EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
 SITE_ID = 1

docker-compose.yml

@@ -14,7 +14,7 @@ services:
       - server
 
   db:
-    image: postgis/postgis:16-3.4
+    image: postgis/postgis:15-3.3
     container_name: adventurelog-db
     restart: unless-stopped
     environment:

frontend/pnpm-lock.yaml

@@ -831,8 +831,8 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
-  caniuse-lite@1.0.30001636:
+  caniuse-lite@1.0.30001688:
-    resolution: {integrity: sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==}
+    resolution: {integrity: sha512-Nmqpru91cuABu/DTCXbM2NSRHzM2uVHfPnhJ/1zEAJx/ILBRVmz3pzH4N7DZqbdG0gWClsCC05Oj0mJ/1AWMbA==}
 
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
@@ -2610,7 +2610,7 @@ snapshots:
   autoprefixer@10.4.19(postcss@8.4.38):
     dependencies:
       browserslist: 4.23.1
-      caniuse-lite: 1.0.30001636
+      caniuse-lite: 1.0.30001688
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.1
@@ -2644,7 +2644,7 @@ snapshots:
 
   browserslist@4.23.1:
     dependencies:
-      caniuse-lite: 1.0.30001636
+      caniuse-lite: 1.0.30001688
       electron-to-chromium: 1.4.810
       node-releases: 2.0.14
       update-browserslist-db: 1.0.16(browserslist@4.23.1)
@@ -2668,7 +2668,7 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
-  caniuse-lite@1.0.30001636: {}
+  caniuse-lite@1.0.30001688: {}
 
   chokidar@3.6.0:
     dependencies:

frontend/src/routes/_allauth/[...path]/+server.ts

@@ -17,8 +17,8 @@ export async function POST({ url, params, request, fetch, cookies }) {
 }
 
 export async function PATCH({ url, params, request, fetch, cookies }) {
-	const searchParam = url.search ? `${url.search}&format=json` : '?format=json';
+	const searchParam = url.search ? `${url.search}` : '';
-	return handleRequest(url, params, request, fetch, cookies, searchParam, true);
+	return handleRequest(url, params, request, fetch, cookies, searchParam, false);
 }
 
 export async function PUT({ url, params, request, fetch, cookies }) {

frontend/src/routes/settings/+page.svelte

@@ -100,6 +100,30 @@
 			addToast('error', 'Error adding email');
 		}
 	}
+
+	async function primaryEmail(email: { email: any; verified?: boolean; primary?: boolean }) {
+		let res = await fetch('/_allauth/browser/v1/account/email/', {
+			method: 'PATCH',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ email: email.email, primary: true })
+		});
+		if (res.ok) {
+			addToast('success', 'Email set as primary');
+			// remove primary from all other emails and set this one as primary
+			emails = emails.map((e) => {
+				if (e.email === email.email) {
+					e.primary = true;
+				} else {
+					e.primary = false;
+				}
+				return e;
+			});
+		} else {
+			addToast('error', 'Error setting email as primary');
+		}
+	}
 </script>
 
 <h1 class="text-center font-extrabold text-4xl mb-6">{$t('settings.settings_page')}</h1>
@@ -225,14 +249,19 @@
 				{#if email.primary}
 					<div class="badge badge-primary">Primary</div>
 				{/if}
-				<button class="btn btn-sm btn-warning ml-2" on:click={() => removeEmail(email)}
-					>Remove</button
-				>
 				{#if !email.verified}
 					<button class="btn btn-sm btn-secondary ml-2" on:click={() => verifyEmail(email)}
 						>Verify</button
 					>
 				{/if}
+				{#if !email.primary}
+					<button class="btn btn-sm btn-secondary ml-2" on:click={() => primaryEmail(email)}
+						>Make Primary</button
+					>
+				{/if}
+				<button class="btn btn-sm btn-warning ml-2" on:click={() => removeEmail(email)}
+					>Remove</button
+				>
 			</p>
 		{/each}
 		{#if emails.length === 0}

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

@@ -1,57 +0,0 @@
-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';
-
-export const load = (async (event) => {
-	const token = event.url.searchParams.get('token');
-	const uid = event.url.searchParams.get('uid');
-
-	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: 'settings.password_is_required' });
-		}
-
-		if (new_password1 !== new_password2) {
-			return fail(400, { message: 'settings.password_does_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) {
-				return fail(response.status, { message: 'settings.invalid_token' });
-			} else {
-				return redirect(302, '/login');
-			}
-		}
-	}
-};

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

@@ -1,64 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import type { PageData } from './$types';
-	import { t } from 'svelte-i18n';
-
-	export let data: PageData;
-</script>
-
-<h1 class="text-center font-bold text-4xl mb-4">{$t('settings.change_password')}</h1>
-
-{#if data.props.token && data.props.uid}
-	<p class="text-center">{$t('settings.login_redir')}</p>
-	<div
-		class="modal-action items-center"
-		style="display: flex; flex-direction: column; align-items: center; width: 100%;"
-	>
-		<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="mb-2 w-full">
-				<input
-					type="password"
-					class="input input-bordered w-full"
-					id="new_password1"
-					name="new_password1"
-					placeholder={$t('settings.new_password')}
-				/>
-			</div>
-			<div class="mb-2 w-full">
-				<input
-					type="password"
-					class="input input-bordered w-full"
-					id="new_password2"
-					name="new_password2"
-					placeholder={$t('settings.confirm_new_password')}
-				/>
-			</div>
-			<button type="submit" class="btn btn-primary w-full">{$t('settings.submit')}</button>
-			{#if $page.form?.message}
-				<div class="text-center text-error mt-4">
-					{$t($page.form?.message)}
-				</div>
-			{/if}
-		</form>
-	</div>
-{:else}
-	<div class="flex justify-center">
-		<div class="items-center justify-center">
-			<p class="text-center">{$t('settings.token_required')}</p>
-
-			<button class="btn btn-neutral" on:click={() => goto('/settings/forgot-password')}>
-				{$t('settings.reset_password')}
-			</button>
-		</div>
-	</div>
-{/if}
-
-<svelte:head>
-	<title>Password Reset Confirm</title>
-	<meta name="description" content="Confirm your password reset and make a new password." />
-</svelte:head>

frontend/src/routes/user/reset-password/[key]/+page.server.ts

@@ -0,0 +1,55 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { fetchCSRFToken } from '$lib/index.server';
+import type { PageServerLoad, Actions } from './$types';
+
+export const load = (async ({ params }) => {
+	const key = params.key;
+	if (!key) {
+		throw redirect(302, '/');
+	}
+	return { key };
+}) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	default: async (event) => {
+		const formData = await event.request.formData();
+		const password = formData.get('password');
+		const confirm_password = formData.get('confirm_password');
+		const key = event.params.key;
+
+		if (!password || !confirm_password) {
+			return fail(400, { message: 'both_passwords_required' });
+		}
+
+		if (password !== confirm_password) {
+			return fail(400, { message: 'passwords_not_match' });
+		}
+
+		const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+		const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+		const csrfToken = await fetchCSRFToken();
+
+		const response = await event.fetch(
+			`${serverEndpoint}/_allauth/browser/v1/auth/password/reset`,
+			{
+				headers: {
+					'Content-Type': 'application/json',
+					Cookie: `csrftoken=${csrfToken}`,
+					'X-CSRFToken': csrfToken
+				},
+				method: 'POST',
+				credentials: 'include',
+				body: JSON.stringify({ key: key, password: password })
+			}
+		);
+
+		if (response.status !== 401) {
+			const error_message = await response.json();
+			console.error(error_message);
+			console.log(response);
+			return fail(response.status, { message: 'reset_failed' });
+		}
+
+		return redirect(302, '/login');
+	}
+};

frontend/src/routes/user/reset-password/[key]/+page.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { page } from '$app/stores';
+	import type { PageData } from '../../../$types';
+	import { t } from 'svelte-i18n';
+
+	export let data: PageData;
+</script>
+
+<h1 class="text-center font-bold text-4xl mb-4">{$t('settings.change_password')}</h1>
+
+<form method="POST" use:enhance>
+	<div class="mb-4">
+		<label for="password" class="block mb-2">{$t('auth.new_password')}</label>
+		<input
+			type="password"
+			id="password"
+			name="password"
+			required
+			class="w-full p-2 border rounded"
+		/>
+	</div>
+	<div class="mb-4">
+		<label for="confirm_password" class="block mb-2">{$t('auth.confirm_password')}</label>
+		<input
+			type="password"
+			id="confirm_password"
+			name="confirm_password"
+			required
+			class="w-full p-2 border rounded"
+		/>
+	</div>
+	<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded"
+		>{$t('auth.reset_password')}</button
+	>
+
+	{#if $page.form?.message}
+		<div class="text-center text-error mt-4">
+			{$page.form?.message}
+		</div>
+	{/if}
+</form>
+
+<svelte:head>
+	<title>Password Reset Confirm</title>
+	<meta name="description" content="Confirm your password reset and make a new password." />
+</svelte:head>

frontend/src/routes/user/verify-email/[key]/+page.server.ts

@@ -0,0 +1,33 @@
+import { fetchCSRFToken } from '$lib/index.server';
+import type { PageServerLoad } from './$types';
+
+export const load = (async (event) => {
+	// get key from route params
+	const key = event.params.key;
+	if (!key) {
+		return { status: 404 };
+	}
+	const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+	const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+	const csrfToken = await fetchCSRFToken();
+
+	let verifyFetch = await event.fetch(`${serverEndpoint}/_allauth/browser/v1/auth/email/verify`, {
+		headers: {
+			Cookie: `csrftoken=${csrfToken}`,
+			'X-CSRFToken': csrfToken
+		},
+		method: 'POST',
+		credentials: 'include',
+
+		body: JSON.stringify({ key: key })
+	});
+	if (!verifyFetch.ok) {
+		let error_message = await verifyFetch.json();
+		console.error(error_message);
+		console.error('Failed to verify email');
+		return { status: 404 };
+	}
+	return {
+		verified: true
+	};
+}) satisfies PageServerLoad;

frontend/src/routes/user/verify-email/[key]/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { PageData } from '../$types';
+
+	export let data: PageData;
+</script>
+
+{#if data.verified}
+	<h1>Email verified</h1>
+	<p>Your email has been verified. You can now log in.</p>
+{:else}
+	<h1>Email verification failed</h1>
+	<p>Your email could not be verified. Please try again.</p>
+{/if}