2fa page retheme

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

@@ -65,7 +65,10 @@
     "title": "Authenticate with TOTP",
     "subtitle": "Enter the 6-digit code displayed in your authenticator app",
     "label": "TOTP Code",
-    "button": "Verify"
+    "button": "Verify",
+    "error": {
+      "ERR_UNAUTHORIZED": "Invalid 2FA code"
+    }
   },
   "networkcreate": {
     "title": "Create your network",

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

@@ -10,7 +10,7 @@
     let loading = true;
     let isError = false;
     let error = '';
-    $: currentlyLoading = $isLoading || loading;
+    $: currentlyLoading = $isLoading;
 
     logSetup();
     let logger = new Logger("2fa/+page.svelte");
@@ -43,7 +43,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;
@@ -55,7 +54,8 @@
                 return;
             }
 
-            error = $t('2fasetup.error.generic', {values:{err:etext}});
+            errForm = $t('2fa.error.' + etext);
+            hasErrForm = true;
             loading = false;
             return;
         }
@@ -71,14 +71,31 @@
 </svelte:head>
 
 <LoadingWrapper isLoading={currentlyLoading} isError={isError} error={error}>
-    <h1>{$t('2fa.title')}</h1>
-    <h3>{$t('2fa.subtitle')}</h3>
+
+    <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('2fa.title')}</h4>
+                <p class="card-text">{$t('2fa.subtitle')}</p>
+
                 <form on:submit|preventDefault={onSubmit}>
-        <label for="mfacode">{$t('2fa.label')}</label>
-        <input type="text" bind:value={mfacode} id="mfacode"/>
-        <button>{$t('2fa.button')}</button>
+                    <label class="form-label" for="mfacode">{$t('2fa.label')}</label>
+                    <input placeholder="123456" class="form-control" type="text" bind:value={mfacode} id="mfacode"/>
+
+                    {#if loading}
+                        <button disabled class="mt-2 w-100 btn btn-primary"><i class="fas fa-gear fa-spin"></i></button>
+                    {:else}
+                        <button class="mt-2 w-100 btn-primary btn">{$t('2fa.button')}</button>
+                    {/if}
+
                     {#if hasErrForm}
-            <p>{errForm}</p>
+                        <p class="mt-2 mb-0 text-danger">{errForm}</p>
                     {/if}
                 </form>
+            </div>
+        </div>
+    </div>
+
+
+
 </LoadingWrapper>