2fa page retheme

This commit is contained in:
core 2023-09-25 22:02:11 -04:00
parent 5fe6a5766a
commit fdc4e2cf10
Signed by: core
GPG Key ID: FDBF740DADDCEECF
2 changed files with 34 additions and 14 deletions

View File

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

View File

@ -10,7 +10,7 @@
let loading = true; let loading = true;
let isError = false; let isError = false;
let error = ''; let error = '';
$: currentlyLoading = $isLoading || loading; $: currentlyLoading = $isLoading;
logSetup(); logSetup();
let logger = new Logger("2fa/+page.svelte"); let logger = new Logger("2fa/+page.svelte");
@ -43,7 +43,6 @@
if (create_res[0] == APIResult.Failed) { if (create_res[0] == APIResult.Failed) {
logger.error(`totp auth fail`); logger.error(`totp auth fail`);
isError = true;
let err = create_res[1] as APIError; let err = create_res[1] as APIError;
let etext = err.code; let etext = err.code;
@ -55,7 +54,8 @@
return; return;
} }
error = $t('2fasetup.error.generic', {values:{err:etext}}); errForm = $t('2fa.error.' + etext);
hasErrForm = true;
loading = false; loading = false;
return; return;
} }
@ -71,14 +71,31 @@
</svelte:head> </svelte:head>
<LoadingWrapper isLoading={currentlyLoading} isError={isError} error={error}> <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">
<form on:submit|preventDefault={onSubmit}> <div class="card w-25">
<label for="mfacode">{$t('2fa.label')}</label> <div class="card-body">
<input type="text" bind:value={mfacode} id="mfacode"/> <h4 class="card-title">{$t('2fa.title')}</h4>
<button>{$t('2fa.button')}</button> <p class="card-text">{$t('2fa.subtitle')}</p>
{#if hasErrForm}
<p>{errForm}</p> <form on:submit|preventDefault={onSubmit}>
{/if} <label class="form-label" for="mfacode">{$t('2fa.label')}</label>
</form> <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 class="mt-2 mb-0 text-danger">{errForm}</p>
{/if}
</form>
</div>
</div>
</div>
</LoadingWrapper> </LoadingWrapper>