diff --git a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts index 985e5da53..cea68a3d3 100644 --- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts +++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts @@ -2,6 +2,7 @@ import { t } from "@lingui/macro"; import { css, CSSResult, html, TemplateResult } from "lit"; import { customElement, state } from "lit/decorators"; +import { ifDefined } from "lit/directives/if-defined"; import AKGlobal from "../../../authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; @@ -65,6 +66,9 @@ export class AuthenticatorValidateStage static get styles(): CSSResult[] { return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css` + ul { + padding-top: 1rem; + } ul > li:not(:last-child) { padding-bottom: 1rem; } @@ -75,7 +79,7 @@ export class AuthenticatorValidateStage i { font-size: 1.5rem; padding: 1rem 0; - width: 5rem; + width: 3rem; } .right { display: flex; @@ -205,15 +209,34 @@ export class AuthenticatorValidateStage } return html`

${this.challenge.flowInfo?.title}

- ${this.selectedDeviceChallenge - ? "" - : html`

- ${t`Select an authentication method.`} -

`}
${this.selectedDeviceChallenge ? this.renderDeviceChallenge() - : html`
${this.renderDevicePicker()}
+ : html`
+
+ +
+ ${t`Not you?`} +
+
+ + ${this.selectedDeviceChallenge + ? "" + : html`

${t`Select an authentication method.`}

`} +
+ ${this.renderDevicePicker()} +
`}`;