From a7933c84c1558d3b92c9bd5729b468d22b8328a1 Mon Sep 17 00:00:00 2001 From: Jens L Date: Mon, 6 Nov 2023 17:50:31 +0100 Subject: [PATCH] web/flows: attempt to fix bitwareden android compatibility (#7455) Signed-off-by: Jens Langhammer --- .../identification/IdentificationStage.ts | 54 ++++++++++--------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts index 49b530026..e0399d10d 100644 --- a/web/src/flow/stages/identification/IdentificationStage.ts +++ b/web/src/flow/stages/identification/IdentificationStage.ts @@ -80,11 +80,12 @@ export class IdentificationStage extends BaseStage< } createHelperForm(): void { + const compatMode = "ShadyDOM" in window; this.form = document.createElement("form"); document.documentElement.appendChild(this.form); // Only add the additional username input if we're in a shadow dom // 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 // adapted from https://github.com/home-assistant/frontend/issues/3133 const username = document.createElement("input"); @@ -104,30 +105,33 @@ export class IdentificationStage extends BaseStage< }; this.form.appendChild(username); } - const password = document.createElement("input"); - password.setAttribute("type", "password"); - password.setAttribute("name", "password"); - password.setAttribute("autocomplete", "current-password"); - password.onkeyup = (ev: KeyboardEvent) => { - if (ev.key == "Enter") { - this.submitForm(ev); - } - const el = ev.target as HTMLInputElement; - // Because the password field is not actually on this page, - // and we want to 'prefill' the password for the user, - // save it globally - PasswordManagerPrefill.password = el.value; - // Because password managers fill username, then password, - // we need to re-focus the uid_field here too - (this.shadowRoot || this) - .querySelectorAll("input[name=uidField]") - .forEach((input) => { - // 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); + // Only add the password field when we don't already show a password field + if (!compatMode && !this.challenge.passwordFields) { + const password = document.createElement("input"); + password.setAttribute("type", "password"); + password.setAttribute("name", "password"); + password.setAttribute("autocomplete", "current-password"); + password.onkeyup = (ev: KeyboardEvent) => { + if (ev.key == "Enter") { + this.submitForm(ev); + } + const el = ev.target as HTMLInputElement; + // Because the password field is not actually on this page, + // and we want to 'prefill' the password for the user, + // save it globally + PasswordManagerPrefill.password = el.value; + // Because password managers fill username, then password, + // we need to re-focus the uid_field here too + (this.shadowRoot || this) + .querySelectorAll("input[name=uidField]") + .forEach((input) => { + // 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); + } const totp = document.createElement("input"); totp.setAttribute("type", "text"); totp.setAttribute("name", "code");