habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/flows: improve UI for TOTP code input (#5676)

Browse Source 
* web/flows: improve UI for TOTP code input

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update locale

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update phrasing

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-05-18 18:41:53 +02:00
committed by GitHub
parent 7e3b325929
commit 6cf7a72831
15 changed files with 1041 additions and 1115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts
View File

@ -135,7 +135,7 @@ export class AuthenticatorValidateStage
<small>${t`In case you can't access any other method.`}</small>
</div>`;
case DeviceClassesEnum.Sms:
return html`<i class="fas fa-mobile"></i>
return html`<i class="fas fa-mobile-alt"></i>
<div class="right">
<p>${t`SMS`}</p>
<small>${t`Tokens sent via SMS.`}</small>

41
web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
View File

@ -7,7 +7,7 @@ import { PasswordManagerPrefill } from "@goauthentik/flow/stages/identification/
import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, html } from "lit";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -37,7 +37,24 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
showBackButton = false;
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
return [
PFBase,
PFLogin,
PFForm,
PFFormControl,
PFTitle,
PFButton,
css`
.icon-description {
display: flex;
}
.icon-description i {
font-size: 2em;
padding: 0.25em;
padding-right: 0.5em;
}
`,
];
}
render(): TemplateResult {
@ -62,13 +79,23 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
>
</div>
</ak-form-static>
${this.deviceChallenge?.deviceClass == DeviceClassesEnum.Sms
? html`<p>${t`A code has been sent to you via SMS.`}</p>`
: html``}
<div class="icon-description">
<i
class="fa ${this.deviceChallenge?.deviceClass == DeviceClassesEnum.Sms
? "fa-key"
: "fa-mobile-alt"}"
aria-hidden="true"
></i>
${this.deviceChallenge?.deviceClass == DeviceClassesEnum.Sms
? html`<p>${t`A code has been sent to you via SMS.`}</p>`
: html`<p>
${t`Open your two-factor authenticator app to view your authentication code.`}
</p>`}
</div>
<ak-form-element
label="${this.deviceChallenge?.deviceClass === DeviceClassesEnum.Static
? t`Static token`
: t`Code`}"
: t`Authentication code`}"
?required="${true}"
class="pf-c-form__group"
.errors=${(this.challenge?.responseErrors || {})["code"]}
@ -85,7 +112,7 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
DeviceClassesEnum.Static
? "[0-9a-zA-Z]*"
: "[0-9]*"}"
placeholder="${t`Please enter your Code`}"
placeholder="${t`Please enter your code`}"
autofocus=""
autocomplete="one-time-code"
class="pf-c-form-control"