From be527f8c197594af5d3b813bca5755c656d04bf3 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 8 May 2024 09:33:46 -0700
Subject: [PATCH] feat(auth): hide MFA methods and recovery if MFA is disabled

---
 src/routes/console/account/updateMfa.svelte | 145 ++++++++++----------
 1 file changed, 74 insertions(+), 71 deletions(-)

diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index 8949db486..447a2340b 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -95,99 +95,102 @@
                         href="https://appwrite.io/docs/products/auth/mfa">Learn more.</Button>
                 </p>
             </div>
-            <div class="u-flex-vertical u-gap-16">
-                <div class="u-sep-block-end" style="padding-block-end: 8px;">
-                    <EyebrowHeading tag="h6" size={3} class="u-normal">Methods</EyebrowHeading>
-                </div>
-                <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="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
-                                >Use an authentication app to generate two-factor authentication
-                                codes.</span>
-                        </div>
+            {#if $user.mfa}
+                <div class="u-flex-vertical u-gap-16">
+                    <div class="u-sep-block-end" style="padding-block-end: 8px;">
+                        <EyebrowHeading tag="h6" size={3} class="u-normal">Methods</EyebrowHeading>
                     </div>
-                    <div class="method-button">
-                        {#if $factors.totp}
-                            <Button text secondary on:click={() => (showDelete = true)}
-                                >Delete</Button>
-                        {:else}
-                            <Button secondary on:click={() => (showSetup = true)}>Add</Button>
-                        {/if}
-                    </div>
-                </div>
-
-                {#if $factors.email}
                     <div
-                        class="u-flex u-main-space-between u-sep-block-end"
+                        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="avatar is-size-x-small">
-                                <span class="icon-mail" aria-hidden="true" />
+                                <span class="icon-device-mobile" aria-hidden="true" />
                             </div>
                             <div class="u-flex-vertical u-gap-4 body-text-2">
-                                <span class="u-bold">Email verification</span>
-                                <span>One-time codes will be sent to: {$user.email}</span>
+                                <span class="u-bold">Authenticator app</span>
+                                <span
+                                    >Use an authentication app to generate two-factor authentication
+                                    codes.</span>
                             </div>
                         </div>
+                        <div class="method-button">
+                            {#if $factors.totp}
+                                <Button text on:click={() => (showDelete = true)}>Delete</Button>
+                            {:else}
+                                <Button secondary on:click={() => (showSetup = true)}>Add</Button>
+                            {/if}
+                        </div>
                     </div>
-                {/if}
 
-                {#if $factors.phone}
+                    {#if $factors.email}
+                        <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="avatar is-size-x-small">
+                                    <span class="icon-mail" aria-hidden="true" />
+                                </div>
+                                <div class="u-flex-vertical u-gap-4 body-text-2">
+                                    <span class="u-bold">Email verification</span>
+                                    <span>One-time codes will be sent to: {$user.email}</span>
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+
+                    {#if $factors.phone}
+                        <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="avatar is-size-x-small">
+                                    <span class="icon-send" aria-hidden="true" />
+                                </div>
+                                <div class="u-flex-vertical u-gap-4 body-text-2">
+                                    <span class="u-bold">SMS verification</span>
+                                    <span>One-time codes will be sent to: {$user.phone}</span>
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+                </div>
+
+                <div class="u-flex-vertical u-gap-16">
+                    <div class="u-sep-block-end" style="padding-block-end: 8px;">
+                        <EyebrowHeading tag="h6" size={3} class="u-normal">Recovery</EyebrowHeading>
+                    </div>
                     <div
-                        class="u-flex u-main-space-between u-sep-block-end"
+                        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="avatar is-size-x-small">
-                                <span class="icon-send" aria-hidden="true" />
+                                <span class="icon-lock-open" aria-hidden="true" />
                             </div>
                             <div class="u-flex-vertical u-gap-4 body-text-2">
-                                <span class="u-bold">SMS verification</span>
-                                <span>One-time codes will be sent to: {$user.phone}</span>
+                                <span class="u-bold">Recovery codes</span>
+                                <span
+                                    >Use in case you can't receive two-factor authentication codes.</span>
                             </div>
                         </div>
-                    </div>
-                {/if}
-            </div>
-
-            <div class="u-flex-vertical u-gap-16">
-                <div class="u-sep-block-end" style="padding-block-end: 8px;">
-                    <EyebrowHeading tag="h6" size={3} class="u-normal">Recovery</EyebrowHeading>
-                </div>
-                <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="avatar is-size-x-small">
-                            <span class="icon-lock-open" aria-hidden="true" />
-                        </div>
-                        <div class="u-flex-vertical u-gap-4 body-text-2">
-                            <span class="u-bold">Recovery codes</span>
-                            <span
-                                >Use in case you can't receive two-factor authentication codes.</span>
+                        <div class="method-button">
+                            {#if $factors.recoveryCode}
+                                <Button
+                                    class="method-button"
+                                    text
+                                    secondary
+                                    on:click={() => (showRegenerateRecoveryCodes = true)}
+                                    >Regenerate</Button>
+                            {:else}
+                                <Button
+                                    class="method-button"
+                                    secondary
+                                    on:click={createRecoveryCodes}>View</Button>
+                            {/if}
                         </div>
                     </div>
-                    <div class="method-button">
-                        {#if $factors.recoveryCode}
-                            <Button
-                                class="method-button"
-                                text
-                                secondary
-                                on:click={() => (showRegenerateRecoveryCodes = true)}
-                                >Regenerate</Button>
-                        {:else}
-                            <Button class="method-button" secondary on:click={createRecoveryCodes}
-                                >View</Button>
-                        {/if}
-                    </div>
                 </div>
-            </div>
+            {/if}
         </div>
     </svelte:fragment>
 </CardGrid>