trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/flows: only add helper username input if using native shadow dom to prevent browser confusion 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-01-03 22:30:56 +01:00
parent 9b7f57cc75
commit 28e675596b
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/flows/stages/identification/IdentificationStage.ts
View File

@ -76,24 +76,28 @@ export class IdentificationStage extends BaseStage<
firstUpdated(): void { firstUpdated(): void {
this.form = document.createElement("form"); this.form = document.createElement("form");
document.documentElement.appendChild(this.form); document.documentElement.appendChild(this.form);
// This is a workaround for the fact that we're in a shadow dom // Only add the additional username input if we're in a shadow dom
// adapted from https://github.com/home-assistant/frontend/issues/3133 // otherwise it just confuses browsers
const username = document.createElement("input"); if (!("ShadyDOM" in window)) {
username.setAttribute("type", "text"); // This is a workaround for the fact that we're in a shadow dom
username.setAttribute("name", "username"); // username as name for high compatibility // adapted from https://github.com/home-assistant/frontend/issues/3133
username.setAttribute("autocomplete", "username"); const username = document.createElement("input");
username.onkeyup = (ev: Event) => { username.setAttribute("type", "text");
const el = ev.target as HTMLInputElement; username.setAttribute("name", "username"); // username as name for high compatibility
(this.shadowRoot || this) username.setAttribute("autocomplete", "username");
.querySelectorAll<HTMLInputElement>("input[name=uidField]") username.onkeyup = (ev: Event) => {
.forEach((input) => { const el = ev.target as HTMLInputElement;
input.value = el.value; (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(); input.value = el.value;
}); // Because we assume only one input field exists that matches this
}; // call focus so the user can press enter
this.form.appendChild(username); input.focus();
});
};
this.form.appendChild(username);
}
const password = document.createElement("input"); const password = document.createElement("input");
password.setAttribute("type", "password"); password.setAttribute("type", "password");
password.setAttribute("name", "password"); password.setAttribute("name", "password");