From 45b8e78ee2c587cb7dcfaf76772fc64aedaad4c0 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 29 Feb 2024 14:32:45 +0100
Subject: [PATCH] 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 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_5602_13938" fill="white">
+<path d="M0 1.00006C0 0.447776 0.447715 6.10352e-05 1 6.10352e-05H32V32.0001H0V1.00006Z"/>
+</mask>
+<path d="M-1 1.00006C-1 -0.104508 -0.104569 -0.999939 1 -0.999939H32V1.00006H1H-1ZM32 32.0001H0H32ZM-1 32.0001V1.00006C-1 -0.104508 -0.104569 -0.999939 1 -0.999939V1.00006V32.0001H-1ZM32 6.10352e-05V32.0001V6.10352e-05Z" fill="#C3C3C6" mask="url(#path-1-inside-1_5602_13938)"/>
+<mask id="path-3-inside-2_5602_13938" fill="white">
+<path d="M219 6.09914e-05C219.552 6.10156e-05 220 0.447776 220 1.00006L220 32.0001L188 32.0001L188 5.96364e-05L219 6.09914e-05Z"/>
+</mask>
+<path d="M219 -0.999939C220.105 -0.999939 221 -0.104508 221 1.00006L221 32.0001L219 32.0001L219 1.00006L219 -0.999939ZM188 32.0001L188 5.96364e-05L188 32.0001ZM188 -0.99994L219 -0.999939C220.105 -0.999939 221 -0.104508 221 1.00006L219 1.00006L188 1.00006L188 -0.99994ZM220 32.0001L188 32.0001L220 32.0001Z" fill="#C3C3C6" mask="url(#path-3-inside-2_5602_13938)"/>
+<mask id="path-5-inside-3_5602_13938" fill="white">
+<path d="M1 221C0.447715 221 -1.95703e-08 220.552 -4.37114e-08 220L-1.39876e-06 189L32 189L32 221L1 221Z"/>
+</mask>
+<path d="M1 222C-0.104569 222 -1 221.105 -1 220L-1 189L0.999999 189L1 220L1 222ZM32 189L32 221L32 189ZM32 222L1 222C-0.104569 222 -1 221.105 -1 220L1 220L32 220L32 222ZM-1.39876e-06 189L32 189L-1.39876e-06 189Z" fill="#C3C3C6" mask="url(#path-5-inside-3_5602_13938)"/>
+<mask id="path-7-inside-4_5602_13938" fill="white">
+<path d="M220 220C220 220.552 219.552 221 219 221L188 221L188 189L220 189L220 220Z"/>
+</mask>
+<path d="M221 220C221 221.105 220.105 222 219 222L188 222L188 220L219 220L221 220ZM188 189L220 189L188 189ZM221 189L221 220C221 221.105 220.105 222 219 222L219 220L219 189L221 189ZM188 221L188 189L188 221Z" fill="#C3C3C6" mask="url(#path-7-inside-4_5602_13938)"/>
+</svg>
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<URL> {
         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.
         </p>
+        {#if step === 1}
+            {#await addAuthenticator()}
+                <div class="loading">
+                    <div class="loader"></div>
+                </div>
+            {:then qr}
+                <div
+                    class="qr"
+                    style:background-image={`url(${QrFrame})`}
+                    style:background-repeat="no-repeat"
+                    style:background-position="center"
+                    style:background-size="contain">
+                    <img alt="MFA QR Code" class="code" src={qr.toString()} />
+                </div>
+                <span class="with-separators eyebrow-heading-3">or</span>
 
-        {#await addAuthenticator()}
-            <div class="qr">
-                <LoadingDots />
-            </div>
-        {:then qr}
-            <div class="qr">
-                <img alt="MFA QR Code" class="code" src={qr.toString()} />
-            </div>
-            <span class="with-separators eyebrow-heading-3">or</span>
+                <div bind:this={copyParent}>
+                    <label class="label" for="manual-code">Manual entry code</label>
+                    <button class="tooltip" aria-label="sec retinfo">
+                        <span class="icon-info" aria-hidden="true"></span>
+                        <span class="tooltip-popup" role="tooltip">
+                            <p class="text u-margin-block-start-8">
+                                Manually enter the following code into the authenticator app
+                            </p>
+                        </span>
+                    </button>
 
-            <div>
-                <label class="label" for="manual-code">Manual entry code</label>
-                <button class="tooltip" aria-label="sec retinfo">
-                    <span class="icon-info" aria-hidden="true"></span>
-                    <span class="tooltip-popup" role="tooltip">
-                        <p class="text u-margin-block-start-8">
-                            Manually enter the following code into the authenticator app
-                        </p>
-                    </span>
-                </button>
-
-                <div class="input-text-wrapper" style="--amount-of-buttons:1">
-                    <input id="manual-code" type="text" value={type.secret} readonly={true} />
-                    <div class="options-list">
-                        <div bind:this={copyParent}>
+                    <div class="input-text-wrapper" style="--amount-of-buttons:1">
+                        <input id="manual-code" type="text" value={type.secret} readonly={true} />
+                        <div class="options-list">
                             {#key copyParent}
-                                <Copy value={type.secret} appendTo="parent">
+                                <Copy value={type.secret} appendTo={copyParent}>
                                     <span class="icon-duplicate" aria-hidden="true" />
                                 </Copy>
                             {/key}
                         </div>
                     </div>
                 </div>
-            </div>
-        {/await}
-
-        <hr />
-        <FormList>
-            <label for="code">Enter the 6-digit one-time code generated by the app</label>
-            <InputDigits bind:value={code} autofocus />
-        </FormList>
+            {/await}
+        {:else}
+            <FormList>
+                <label for="code">Enter the 6-digit one-time code generated by the app</label>
+                <InputDigits bind:value={code} autofocus />
+            </FormList>
+        {/if}
     {/key}
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showSetup = false)}>Cancel</Button>
-        <Button submit>Continue</Button>
+        {#if step === 1}
+            <Button submit={false} on:click={() => (step = 2)}>Continue</Button>
+        {:else}
+            <Button submit>Continue</Button>
+        {/if}
     </svelte:fragment>
 </Modal>
 
@@ -161,6 +170,12 @@
 </Modal>
 
 <style lang="scss">
+    .loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 351px;
+    }
     .qr {
         width: 100%;
         height: 220px;
@@ -175,13 +190,4 @@
             display: block;
         }
     }
-
-    hr {
-        height: 1px;
-        width: calc(100% + 2rem);
-        background-color: hsl(var(--color-border));
-
-        margin-block-start: 1rem;
-        margin-inline: -1rem;
-    }
 </style>
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 @@
     </svelte:fragment>
 </CardGrid>
 
-<Mfa bind:showSetup />
+{#if showSetup}
+    <Mfa bind:showSetup />
+{/if}
 <DeleteMfa bind:showDelete />