web/flows/authenticator_validate: auto-select TOTP device when password manager prefills it

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-27 22:27:32 +01:00
parent 103e0f3b06
commit 9bab708e6e
1 changed files with 15 additions and 3 deletions

View File

@ -11,6 +11,7 @@ import AKGlobal from "../../../authentik.css";
import { BaseStage, StageHost } from "../base"; import { BaseStage, StageHost } from "../base";
import "./AuthenticatorValidateStageWebAuthn"; import "./AuthenticatorValidateStageWebAuthn";
import "./AuthenticatorValidateStageCode"; import "./AuthenticatorValidateStageCode";
import { PasswordManagerPrefill } from "../identification/IdentificationStage";
export enum DeviceClasses { export enum DeviceClasses {
STATIC = "static", STATIC = "static",
@ -83,6 +84,17 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
<small>${gettext("Use a security key to prove your identity.")}</small> <small>${gettext("Use a security key to prove your identity.")}</small>
</div>`; </div>`;
case DeviceClasses.TOTP: case DeviceClasses.TOTP:
// TOTP is a bit special, assuming that TOTP is allowed from the backend,
// and we have a pre-filled value from the password manager,
// directly set the the TOTP device Challenge as active.
if (PasswordManagerPrefill.totp) {
console.debug("authentik/stages/authenticator_validate: found prefill totp code, selecting totp challenge");
this.selectedDeviceChallenge = deviceChallenge;
// Delay the update as a re-render isn't triggered from here
setTimeout(() => {
this.requestUpdate();
}, 100);
}
return html`<i class="fas fa-clock"></i> return html`<i class="fas fa-clock"></i>
<div class="right"> <div class="right">
<p>${gettext("Traditional authenticator")}</p> <p>${gettext("Traditional authenticator")}</p>
@ -141,9 +153,9 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
render(): TemplateResult { render(): TemplateResult {
if (!this.challenge) { if (!this.challenge) {
return html`<ak-empty-state return html`<ak-empty-state
?loading="${true}" ?loading="${true}"
header=${gettext("Loading")}> header=${gettext("Loading")}>
</ak-empty-state>`; </ak-empty-state>`;
} }
// User only has a single device class, so we don't show a picker // User only has a single device class, so we don't show a picker
if (this.challenge?.device_challenges.length === 1) { if (this.challenge?.device_challenges.length === 1) {