alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sean Morley
2024-12-12 11:01:09 -05:00
parent 0272c6b076
commit 2ccbf4be83
13 changed files with 197 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/routes/settings/+page.svelte
View File

@@ -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}

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

@@ -1,37 +0,0 @@
import { fetchCSRFToken } from '$lib/index.server';
import { fail, type Actions } from '@sveltejs/kit';
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
export const actions: Actions = {
forgotPassword: async (event) => {
const formData = await event.request.formData();
const email = formData.get('email') as string | null | undefined;
if (!email) {
return fail(400, { message: 'missing_email' });
}
let csrfToken = await fetchCSRFToken();
let res = await fetch(`${endpoint}/_allauth/browser/v1/auth/password/request`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken,
Cookie: `csrftoken=${csrfToken}`
},
body: JSON.stringify({
email
})
});
if (!res.ok) {
let message = await res.json();
return fail(res.status, message);
}
return { success: true };
}
};

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

@@ -1,35 +0,0 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { page } from '$app/stores';
import { t } from 'svelte-i18n';
</script>
<h1 class="text-center font-extrabold text-4xl mb-6">{$t('settings.reset_password')}</h1>
<div class="flex justify-center">
<form method="post" action="?/forgotPassword" class="w-full max-w-xs" use:enhance>
<label for="email">{$t('auth.email')}</label>
<input
name="email"
type="email"
id="email"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<button class="py-2 px-4 btn btn-primary mr-2">{$t('settings.reset_password')}</button>
{#if $page.form?.message}
<div class="text-center text-error mt-4">
{$t(`settings.${$page.form?.message}`)}
</div>
{/if}
{#if $page.form?.success}
<div class="text-center text-success mt-4">
{$t('settings.possible_reset')}
</div>
{/if}
</form>
</div>
<svelte:head>
<title>Forgot Password</title>
<meta name="description" content="Reset your password for AdventureLog." />
</svelte:head>

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

@@ -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');
}
}
}
};

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

@@ -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>