Merge pull request #1299 from ItzNotABug/add-notification-on-authenti…

…cator-verification Add notification on authenticator verification
appwrite · Aug 30, 2024 · 21efe03 · 21efe03
2 parents e84c364 + 9e14a25
commit 21efe03
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/routes/(console)/account/mfa.svelte b/src/routes/(console)/account/mfa.svelte
@@ -7,6 +7,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { AuthenticatorType, type Models } from '@appwrite.io/console';
     import QrFrame from '$lib/images/qr2.svg';
+    import { addNotification } from '$lib/stores/notifications';
 
     export let showSetup = false;
 
@@ -28,6 +29,10 @@
             await sdk.forConsole.account.updateMfaAuthenticator(AuthenticatorType.Totp, code);
             await Promise.all([invalidate(Dependencies.ACCOUNT), invalidate(Dependencies.FACTORS)]);
             showSetup = false;
+            addNotification({
+                type: 'success',
+                message: 'Authenticator app connected successfully'
+            });
             trackEvent(Submit.AccountAuthenticatorUpdate);
         } catch (e) {
             error = e.message;

diff --git a/src/routes/(console)/account/updateMfa.svelte b/src/routes/(console)/account/updateMfa.svelte
@@ -109,13 +109,18 @@
                     <div
                         class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
                         style="padding-block-end: 16px">
-                        <div class="u-flex u-gap-8">
+                        <div class="u-flex u-gap-8 u-cross-baseline">
                             <div class="avatar is-size-x-small">
                                 <span class="icon-device-mobile" aria-hidden="true" />
                             </div>
-                            <div class="u-flex-vertical u-gap-4 body-text-2">
-                                <span class="u-bold">Authenticator app</span>
-                                <span
+                            <div class="u-flex-vertical u-gap-4">
+                                <div class="u-flex u-gap-4 u-cross-center">
+                                    <span class="body-text-2 u-bold">Authenticator app</span>
+                                    {#if $factors.totp}
+                                        <Pill>connected</Pill>
+                                    {/if}
+                                </div>
+                                <span class="body-text-2"
                                     >Use an authentication app to generate two-factor authentication
                                     codes.</span>
                             </div>
@@ -141,7 +146,7 @@
                         <div
                             class="u-flex u-main-space-between u-sep-block-end"
                             style="padding-block-end: 16px">
-                            <div class="u-flex u-gap-8">
+                            <div class="u-flex u-gap-8 u-cross-baseline">
                                 <div class="avatar is-size-x-small">
                                     <span class="icon-mail" aria-hidden="true" />
                                 </div>
@@ -185,7 +190,7 @@
                         <div
                             class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
                             style="padding-block-end: 16px">
-                            <div class="u-flex u-gap-8">
+                            <div class="u-flex u-gap-8 u-cross-baseline">
                                 <div class="avatar is-size-x-small">
                                     <span class="icon-lock-open" aria-hidden="true" />
                                 </div>