Add multi-factor authentication (MFA) support; update localization and error handling

This commit is contained in:
Sean Morley
2024-12-13 20:21:44 -05:00
parent 1b54f8ed69
commit 9bf0849b92
15 changed files with 369 additions and 68 deletions

View File

@@ -52,7 +52,7 @@ export const actions: Actions = {
// MFA required
if (!totp) {
return fail(401, {
message: 'Multi-factor authentication required',
message: 'settings.mfa_required',
mfa_required: true
});
} else {
@@ -80,7 +80,7 @@ export const actions: Actions = {
// MFA failed
const mfaLoginResponse = await mfaLoginFetch.json();
return fail(401, {
message: mfaLoginResponse.error || 'Invalid MFA code',
message: mfaLoginResponse.error || 'settings.invalid_code',
mfa_required: true
});
}
@@ -89,7 +89,7 @@ export const actions: Actions = {
// Login failed
const loginResponse = await loginFetch.json();
const firstKey = Object.keys(loginResponse)[0] || 'error';
const error = loginResponse[firstKey][0] || 'Invalid username or password';
const error = loginResponse[firstKey][0] || 'settings.invalid_credentials';
return fail(400, { message: error });
}
}

View File

@@ -73,7 +73,7 @@
{#if ($page.form?.message && $page.form?.message.length > 1) || $page.form?.type === 'error'}
<div class="text-center text-error mt-4">
{$page.form.message || $t('auth.login_error')}
{$t($page.form.message) || $t('auth.login_error')}
</div>
{/if}
</div>

View File

@@ -18,7 +18,7 @@
let new_email: string = '';
let is2FAModalOpen: boolean = false;
let isMFAModalOpen: boolean = false;
onMount(async () => {
if (browser) {
@@ -133,21 +133,21 @@
method: 'DELETE'
});
if (res.ok) {
addToast('success', '2FA disabled');
addToast('success', $t('settings.mfa_disabled'));
data.props.authenticators = false;
} else {
if (res.status == 401) {
addToast('error', 'Logout and back in to refresh your session and try again.');
addToast('error', $t('settings.reset_session_error'));
}
addToast('error', $t('settings.generic_error'));
}
}
</script>
{#if is2FAModalOpen}
{#if isMFAModalOpen}
<TotpModal
user={data.user}
on:close={() => (is2FAModalOpen = false)}
on:close={() => (isMFAModalOpen = false)}
bind:is_enabled={data.props.authenticators}
/>
{/if}
@@ -306,17 +306,19 @@
</form>
</div>
<h1 class="text-center font-extrabold text-xl mt-4 mb-2">Multi-factor Authentication Settings</h1>
<h1 class="text-center font-extrabold text-xl mt-4 mb-2">{$t('settings.mfa_page_title')}</h1>
<div class="flex justify-center mb-4">
<div>
{#if !data.props.authenticators}
<p>MFA not enabled</p>
<button class="btn btn-primary mt-2" on:click={() => (is2FAModalOpen = true)}
>Enable MFA</button
<p>{$t('settings.mfa_not_enabled')}</p>
<button class="btn btn-primary mt-2" on:click={() => (isMFAModalOpen = true)}
>{$t('settings.enable_mfa')}</button
>
{:else}
<button class="btn btn-warning mt-2" on:click={disableMfa}>Disable MFA</button>
<button class="btn btn-warning mt-2" on:click={disableMfa}
>{$t('settings.disable_mfa')}</button
>
{/if}
</div>
</div>

View File

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