From 9b7f57cc757c8b92c4a73ea8a0d99218f6e7a33e Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 3 Jan 2022 22:25:28 +0100
Subject: [PATCH] web/flows: add workaround for autofocus not working in
 password stage

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../flows/stages/password/PasswordStage.ts    | 47 +++++++++++++++----
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/web/src/flows/stages/password/PasswordStage.ts b/web/src/flows/stages/password/PasswordStage.ts
index e57dd6ecf..2eec3c27b 100644
--- a/web/src/flows/stages/password/PasswordStage.ts
+++ b/web/src/flows/stages/password/PasswordStage.ts
@@ -26,6 +26,42 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
         return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
     }
 
+    input?: HTMLInputElement;
+
+    timer?: number;
+
+    renderInput(): HTMLInputElement {
+        this.input = document.createElement("input");
+        this.input.type = "password";
+        this.input.name = "password";
+        this.input.placeholder = t`Please enter your password`;
+        this.input.autofocus = true;
+        this.input.autocomplete = "current-password";
+        this.input.classList.add("pf-c-form-control");
+        this.input.required = true;
+        this.input.value = PasswordManagerPrefill.password || "";
+        // This is somewhat of a crude way to get autofocus, but in most cases the `autofocus` attribute
+        // isn't enough, due to timing within shadow doms and such.
+        this.timer = window.setInterval(() => {
+            if (!this.input) {
+                return;
+            }
+            if (document.activeElement === this.input) {
+                this.cleanup();
+            }
+            this.input.focus();
+        }, 10);
+        console.debug("authentik/stages/password: started focus timer");
+        return this.input;
+    }
+
+    cleanup(): void {
+        if (this.timer) {
+            console.debug("authentik/stages/password: cleared focus timer");
+            window.clearInterval(this.timer);
+        }
+    }
+
     render(): TemplateResult {
         if (!this.challenge) {
             return html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`;
@@ -63,16 +99,7 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
                         class="pf-c-form__group"
                         .errors=${(this.challenge?.responseErrors || {})["password"]}
                     >
-                        <input
-                            type="password"
-                            name="password"
-                            placeholder="${t`Please enter your password`}"
-                            autofocus=""
-                            autocomplete="current-password"
-                            class="pf-c-form-control"
-                            required
-                            value=${PasswordManagerPrefill.password || ""}
-                        />
+                        ${this.renderInput()}
                     </ak-form-element>
 
                     ${this.challenge.recoveryUrl