From e3c8b797e6f7b3d4a77eacc8898f270b8c484cca Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 29 Feb 2024 13:42:54 +0100 Subject: [PATCH 1/3] fix: mfa screens --- .../auth/templates/+page.svelte | 12 ++ .../auth/templates/email2FATemplate.svelte | 44 ++++++ .../templates/emailMagicUrlTemplate.svelte | 1 - .../templates/emailRecoveryTemplate.svelte | 1 - .../emailVerificationTemplate.svelte | 1 - .../auth/user-[user]/deleteMfa.svelte | 8 +- .../auth/user-[user]/updateMfa.svelte | 125 +++++++++++++----- 7 files changed, 147 insertions(+), 45 deletions(-) create mode 100644 src/routes/console/project-[project]/auth/templates/email2FATemplate.svelte diff --git a/src/routes/console/project-[project]/auth/templates/+page.svelte b/src/routes/console/project-[project]/auth/templates/+page.svelte index b6b25db44..d6ea06517 100644 --- a/src/routes/console/project-[project]/auth/templates/+page.svelte +++ b/src/routes/console/project-[project]/auth/templates/+page.svelte @@ -60,6 +60,7 @@ EmailTemplateType, EmailTemplateLocale } from '@appwrite.io/console'; + import Email2FaTemplate from './email2FATemplate.svelte'; const projectId = $page.params.project; @@ -68,6 +69,7 @@ $: emailMagicSessionOpen = emailOpen === 'magicSession'; $: emailResetPassword = emailOpen === 'recovery'; $: emailInviteUser = emailOpen === 'invitation'; + $: email2FAVerificationOpen = emailOpen === 'mfaChallenge'; // let smsOpen = 'verification'; // $: smsVerificationOpen = smsOpen === 'verification'; @@ -192,6 +194,16 @@

Send an invitation email to become a member of your project.

+ { + e.preventDefault(); + openEmail('mfaChallenge'); + }}> + 2FA verification +

Send a two-factor authentication email to a user.

+ + diff --git a/src/routes/console/project-[project]/auth/templates/email2FATemplate.svelte b/src/routes/console/project-[project]/auth/templates/email2FATemplate.svelte new file mode 100644 index 000000000..094de917a --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/email2FATemplate.svelte @@ -0,0 +1,44 @@ + + +
+ + + {'{{user}}'} + {'{{project}}'} + {'{{otp}}'} + +
diff --git a/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte index 9d5041acf..0941013bf 100644 --- a/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte @@ -39,7 +39,6 @@
- {'{{team}}'} {'{{user}}'} {'{{project}}'} {'{{redirect}}'} diff --git a/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte index 674ff61e5..bba93231c 100644 --- a/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte @@ -38,7 +38,6 @@
- {'{{team}}'} {'{{user}}'} {'{{project}}'} {'{{redirect}}'} diff --git a/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte index 55f8c5f98..6ac693b0a 100644 --- a/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte @@ -39,7 +39,6 @@ - {'{{team}}'} {'{{user}}'} {'{{project}}'} {'{{redirect}}'} diff --git a/src/routes/console/project-[project]/auth/user-[user]/deleteMfa.svelte b/src/routes/console/project-[project]/auth/user-[user]/deleteMfa.svelte index 78c1645e9..3727ffcba 100644 --- a/src/routes/console/project-[project]/auth/user-[user]/deleteMfa.svelte +++ b/src/routes/console/project-[project]/auth/user-[user]/deleteMfa.svelte @@ -43,12 +43,8 @@ state="warning" bind:error headerDivider={false}> -

- Deleting the authentication method will disable multi-factor authentication for this - account. To re-enable it, user will need to add a new authentication method. -

-

Are you sure you want to delete this authentication method from your account?

- +

Are you sure you want to delete this authentication?

+

This action is irreversible.

diff --git a/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte b/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte index 96d5cce40..3a99efa4a 100644 --- a/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte +++ b/src/routes/console/project-[project]/auth/user-[user]/updateMfa.svelte @@ -1,7 +1,7 @@ - - Multi-factor authentication -

MFA allow users to enhance the security of their account in you app.

- - {#if $userFactors.totp} - - - Authenticator - - - - - TOTP (One-time code) - - - - - -
- - {:else} - -

- No authenticators have been enabled. Once the user adds an authenticator, you’ll - see it here. -

- - {/if} - - +
+ + Multi-factor authentication +

MFA allow users to enhance the security of their account in you app.

+ + + + + {#if $userFactors.totp} + + + Authenticator + + + + + TOTP (One-time code) + + + + + +
+ + {:else} + +

+ No authenticators have been enabled. Once the user adds an authenticator, + you’ll see it here. +

+ + {/if} + + + + + + +
+ + From 45b8e78ee2c587cb7dcfaf76772fc64aedaad4c0 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 29 Feb 2024 14:32:45 +0100 Subject: [PATCH 2/3] fix: mfa screen --- src/lib/images/qr2.svg | 18 ++++ src/routes/console/account/mfa.svelte | 94 +++++++++++---------- src/routes/console/account/updateMfa.svelte | 4 +- 3 files changed, 71 insertions(+), 45 deletions(-) create mode 100644 src/lib/images/qr2.svg diff --git a/src/lib/images/qr2.svg b/src/lib/images/qr2.svg new file mode 100644 index 000000000..b106c2e2b --- /dev/null +++ b/src/lib/images/qr2.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/routes/console/account/mfa.svelte b/src/routes/console/account/mfa.svelte index 11d8db720..4aa5f71c7 100644 --- a/src/routes/console/account/mfa.svelte +++ b/src/routes/console/account/mfa.svelte @@ -9,13 +9,15 @@ import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { AuthenticatorType, type Models } from '@appwrite.io/console'; - + import QrFrame from '$lib/images/qr2.svg'; export let showSetup = false; export let showRecoveryCodes = false; let copyParent: HTMLElement; let code: string; let type: Models.MfaType = null; + let step = 1; + async function addAuthenticator(): Promise { type = await sdk.forConsole.account.addAuthenticator(AuthenticatorType.Totp); @@ -49,52 +51,59 @@ Install an authenticator app on your mobile device, open it and scan the provided QR code or enter it manually.

+ {#if step === 1} + {#await addAuthenticator()} +
+
+
+ {:then qr} +
+ MFA QR Code +
+ or - {#await addAuthenticator()} -
- -
- {:then qr} -
- MFA QR Code -
- or +
+ + -
- - - -
- -
-
+
+ +
{#key copyParent} - + {/key}
-
- {/await} - -
- - - - + {/await} + {:else} + + + + + {/if} {/key} - + {#if step === 1} + + {:else} + + {/if} @@ -161,6 +170,12 @@ diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte index 140943222..28ebea5d5 100644 --- a/src/routes/console/account/updateMfa.svelte +++ b/src/routes/console/account/updateMfa.svelte @@ -88,5 +88,7 @@ - +{#if showSetup} + +{/if} From a03b54180bfb8ba828d19746e0954e4516db6fca Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 29 Feb 2024 14:35:02 +0100 Subject: [PATCH 3/3] fix: remove unused import --- src/routes/console/account/mfa.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/console/account/mfa.svelte b/src/routes/console/account/mfa.svelte index 4aa5f71c7..245cbb936 100644 --- a/src/routes/console/account/mfa.svelte +++ b/src/routes/console/account/mfa.svelte @@ -2,7 +2,6 @@ import { invalidate } from '$app/navigation'; import { Submit, trackError } from '$lib/actions/analytics'; import { Modal, Output, Copy, Alert } from '$lib/components'; - import LoadingDots from '$lib/components/loadingDots.svelte'; import { Dependencies } from '$lib/constants'; import { Button, FormList, InputDigits } from '$lib/elements/forms'; import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';