2fasetup retheme

tfweb/src/components/QrCode.svelte

@@ -14,14 +14,7 @@
         if (canvas === undefined) {
             logger.warn(`component has not yet mounted, delaying 500ms and trying again`);
             setTimeout(() => {
-                logger.info(`updating qrcode to ${value}`);
-                QRCode.toCanvas(canvas, value, (err) => {
-                    if (err) {
-                        logger.error(`error updating qrcode: ${err}`);
-                    } else {
-                        logger.info(`qrcode updated successfully`);
-                    }
-                })
+                updateQrCode();
             }, 500);
             return;
         }

tfweb/src/lib/i18n/locales/en.json

@@ -58,7 +58,8 @@
     "button": "Enable 2FA",
     "error": {
       "generic": "Unable to enable 2fa: {err}",
-      "api": "Unable to contact the server. Try again later."
+      "api": "Unable to contact the server. Try again later.",
+      "ERR_UNAUTHORIZED": "Incorrect 2FA code"
     }
   },
   "2fa": {

tfweb/src/routes/2fasetup/+page.svelte

@@ -13,7 +13,7 @@
     let loading = true;
     let isError = false;
     let error = '';
-    $: currentlyLoading = $isLoading || loading;
+    $: currentlyLoading = $isLoading;
 
     logSetup();
     let logger = new Logger("2fasetup/+page.svelte");
@@ -24,6 +24,9 @@
 
     let code = '';
 
+    let has_error = false;
+    let form_err = '';
+
     onMount(async () => {
         let session_load_info = await isAuthedSession();
         if (session_load_info[0] == APIResult.Failed) {
@@ -42,7 +45,6 @@
 
         if (create_res[0] == APIResult.Failed) {
             logger.error(`totp create fail`);
-            isError = true;
             let err = create_res[1] as APIError;
 
             let etext = err.code;
@@ -54,7 +56,8 @@
                 return;
             }
 
-            error = $t('2fasetup.error.generic', {values:{err:etext}});
+            has_error = true;
+            error = $t('2fasetup.error.' + etext);
             loading = false;
             return;
         }
@@ -76,7 +79,6 @@
 
         if (create_res[0] == APIResult.Failed) {
             logger.error(`totp auth fail`);
-            isError = true;
             let err = create_res[1] as APIError;
 
             let etext = err.code;
@@ -88,7 +90,8 @@
                 return;
             }
 
-            error = $t('2fasetup.error.generic', {values:{err:etext}});
+            has_error = true;
+            form_err = $t('2fasetup.error.' + etext);
             loading = false;
             return;
         }
@@ -103,17 +106,35 @@
 </svelte:head>
 
 <LoadingWrapper isLoading={currentlyLoading} isError={isError} error={error}>
-    <h1>{$t('2fasetup.title')}</h1>
-    <p>{$t('2fasetup.body')}</p>
-    <h4>{$t('2fasetup.scan')}</h4>
+
+    <div class="h-100 d-flex align-items-center justify-content-center">
+        <div class="card w-25">
+            <div class="card-body">
+                <h4 class="card-title">{$t('2fasetup.title')}</h4>
+                <p class="card-text">{$t('2fasetup.body')}</p>
+                <hr>
+                <h5 class="card-title">{$t('2fasetup.scan')}</h5>
                 <div>
                     <QrCode bind:value={otp_url}/>
                 </div>
-    <h4>{$t('2fasetup.code')}</h4>
-    <div><span>{totp_secret}</span></div>
+                <hr>
+                <h5 class="card-title">{$t('2fasetup.code')}</h5>
+                <p><code>{totp_secret}</code></p>
+                <hr>
                 <form on:submit|preventDefault={onSubmit}>
-        <label for="code">{$t('2fasetup.verify')}</label>
-        <input bind:value={code} type="text" id="code" />
-        <button>{$t('2fasetup.button')}</button>
+                    <label class="form-label" for="code">{$t('2fasetup.verify')}</label>
+                    <input placeholder="123456" class="form-control" bind:value={code} type="text" id="code" />
+
+                    {#if loading}
+                        <button disabled class="w-100 mt-2 btn btn-primary"><i class="fas fa-spin fa-gear"></i></button>
+                    {:else}
+                        <button class="w-100 mt-2 btn btn-primary">{$t('2fasetup.button')}</button>
+                    {/if}
                 </form>
+                {#if has_error}
+                    <p class="mt-2 mb-0 text-danger">{form_err}</p>
+                {/if}
+            </div>
+        </div>
+    </div>
 </LoadingWrapper>