Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Nov 6, 2023
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 29 additions & 25 deletions web/src/flow/stages/identification/IdentificationStage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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<HTMLInputElement>("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<HTMLInputElement>("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");
Expand Down