From d854d819d1ba881c6651ca38c0927422c6ec0363 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 26 Dec 2021 15:14:39 +0100
Subject: [PATCH] web/flows: fix duplicate loading spinners when using webauthn

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../AuthenticatorValidateStage.ts             |  7 +++++
 .../AuthenticatorValidateStageWebAuthn.ts     | 30 ++++++++-----------
 web/src/flows/stages/base.ts                  |  1 +
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
index aadd5e668..97aee14ef 100644
--- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
@@ -37,6 +37,13 @@ export class AuthenticatorValidateStage
 {
     flowSlug = "";
 
+    set loading(value: boolean) {
+        this.host.loading = value;
+    }
+    get loading(): boolean {
+        return this.host.loading;
+    }
+
     @state()
     _selectedDeviceChallenge?: DeviceChallenge;
 
diff --git a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
index 73def1535..3da5f2fc3 100644
--- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
@@ -19,7 +19,6 @@ import {
     DeviceChallenge,
 } from "@goauthentik/api";
 
-import { PFSize } from "../../../elements/Spinner";
 import {
     transformAssertionForServer,
     transformCredentialRequestOptions,
@@ -35,11 +34,8 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
     @property({ attribute: false })
     deviceChallenge?: DeviceChallenge;
 
-    @property({ type: Boolean })
-    authenticateRunning = false;
-
     @property()
-    authenticateMessage = "";
+    authenticateMessage?: string;
 
     @property({ type: Boolean })
     showBackButton = false;
@@ -101,31 +97,24 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
     }
 
     async authenticateWrapper(): Promise<void> {
-        if (this.authenticateRunning) {
+        if (this.host.loading) {
             return;
         }
-        this.authenticateRunning = true;
+        this.host.loading = true;
         this.authenticate()
             .catch((e) => {
                 console.error(e);
                 this.authenticateMessage = e.toString();
             })
             .finally(() => {
-                this.authenticateRunning = false;
+                this.host.loading = false;
             });
     }
 
     render(): TemplateResult {
         return html`<div class="pf-c-login__main-body">
-                ${this.authenticateRunning
-                    ? html`<div class="pf-c-empty-state__content">
-                          <div class="pf-l-bullseye">
-                              <div class="pf-l-bullseye__item">
-                                  <ak-spinner size="${PFSize.XLarge}"></ak-spinner>
-                              </div>
-                          </div>
-                      </div>`
-                    : html` <div class="pf-c-form__group pf-m-action">
+                ${this.authenticateMessage
+                    ? html`<div class="pf-c-form__group pf-m-action">
                           <p class="pf-m-block">${this.authenticateMessage}</p>
                           <button
                               class="pf-c-button pf-m-primary pf-m-block"
@@ -135,7 +124,12 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
                           >
                               ${t`Retry authentication`}
                           </button>
-                      </div>`}
+                      </div>`
+                    : html`<div class="pf-c-form__group pf-m-action">
+                          <p class="pf-m-block">&nbsp;</p>
+                          <p class="pf-m-block">&nbsp;</p>
+                          <p class="pf-m-block">&nbsp;</p>
+                      </div> `}
             </div>
             <footer class="pf-c-login__main-footer">
                 <ul class="pf-c-login__main-footer-links">
diff --git a/web/src/flows/stages/base.ts b/web/src/flows/stages/base.ts
index c6911298b..e1f3551d5 100644
--- a/web/src/flows/stages/base.ts
+++ b/web/src/flows/stages/base.ts
@@ -6,6 +6,7 @@ import { ErrorDetail } from "@goauthentik/api";
 export interface StageHost {
     challenge?: unknown;
     flowSlug: string;
+    loading: boolean;
     submit(payload: unknown): Promise<void>;
 }