web/flows: make input elements read-only when loading

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2026-04-26 01:25:02 +02:00 · 2025-07-03 16:59:41 +02:00
1 changed files with 11 additions and 0 deletions
--- a/web/src/flow/FlowExecutor.ts
+++ b/web/src/flow/FlowExecutor.ts
@@ -199,6 +199,16 @@ export class FlowExecutor
        });
    }

+    private _loadingDisableInputs() {
+        const challengeElement = this.shadowRoot?.querySelector(this.challenge!.component);
+        if (!challengeElement) return;
+        challengeElement.shadowRoot?.querySelectorAll("ak-form-element").forEach((wrapper) => {
+            wrapper.querySelectorAll("input").forEach((input) => {
+                input.disabled = true;
+            });
+        });
+    }
+
    async submit(
        payload?: FlowChallengeResponseRequest,
        options?: SubmitOptions,
@@ -209,6 +219,7 @@ export class FlowExecutor
        payload.component = this.challenge.component;
        if (!options?.invisible) {
            this.loading = true;
+            this._loadingDisableInputs();
        }
        try {
            const challenge = await new FlowsApi(DEFAULT_CONFIG).flowsExecutorSolve({