web/flows: attempt to fix bitwareden android compatibility (cherry-pick #7455) (#7457)

web/flows: attempt to fix bitwareden android compatibility (#7455)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens L <jens@goauthentik.io>
This commit is contained in:
gcp-cherry-pick-bot[bot] 2023-11-06 23:58:44 +01:00 committed by GitHub
parent 3716298639
commit 1def9865cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 25 deletions

View File

@ -80,11 +80,12 @@ export class IdentificationStage extends BaseStage<
} }
createHelperForm(): void { createHelperForm(): void {
const compatMode = "ShadyDOM" in window;
this.form = document.createElement("form"); this.form = document.createElement("form");
document.documentElement.appendChild(this.form); document.documentElement.appendChild(this.form);
// Only add the additional username input if we're in a shadow dom // Only add the additional username input if we're in a shadow dom
// otherwise it just confuses browsers // otherwise it just confuses browsers
if (!("ShadyDOM" in window)) { if (!compatMode) {
// This is a workaround for the fact that we're in a shadow dom // This is a workaround for the fact that we're in a shadow dom
// adapted from https://github.com/home-assistant/frontend/issues/3133 // adapted from https://github.com/home-assistant/frontend/issues/3133
const username = document.createElement("input"); const username = document.createElement("input");
@ -104,30 +105,33 @@ export class IdentificationStage extends BaseStage<
}; };
this.form.appendChild(username); this.form.appendChild(username);
} }
const password = document.createElement("input"); // Only add the password field when we don't already show a password field
password.setAttribute("type", "password"); if (!compatMode && !this.challenge.passwordFields) {
password.setAttribute("name", "password"); const password = document.createElement("input");
password.setAttribute("autocomplete", "current-password"); password.setAttribute("type", "password");
password.onkeyup = (ev: KeyboardEvent) => { password.setAttribute("name", "password");
if (ev.key == "Enter") { password.setAttribute("autocomplete", "current-password");
this.submitForm(ev); password.onkeyup = (ev: KeyboardEvent) => {
} if (ev.key == "Enter") {
const el = ev.target as HTMLInputElement; this.submitForm(ev);
// Because the password field is not actually on this page, }
// and we want to 'prefill' the password for the user, const el = ev.target as HTMLInputElement;
// save it globally // Because the password field is not actually on this page,
PasswordManagerPrefill.password = el.value; // and we want to 'prefill' the password for the user,
// Because password managers fill username, then password, // save it globally
// we need to re-focus the uid_field here too PasswordManagerPrefill.password = el.value;
(this.shadowRoot || this) // Because password managers fill username, then password,
.querySelectorAll<HTMLInputElement>("input[name=uidField]") // we need to re-focus the uid_field here too
.forEach((input) => { (this.shadowRoot || this)
// Because we assume only one input field exists that matches this .querySelectorAll<HTMLInputElement>("input[name=uidField]")
// call focus so the user can press enter .forEach((input) => {
input.focus(); // Because we assume only one input field exists that matches this
}); // call focus so the user can press enter
}; input.focus();
this.form.appendChild(password); });
};
this.form.appendChild(password);
}
const totp = document.createElement("input"); const totp = document.createElement("input");
totp.setAttribute("type", "text"); totp.setAttribute("type", "text");
totp.setAttribute("name", "code"); totp.setAttribute("name", "code");