From 002c048d0b910bf14a000a6a32b94755c2e18bbf Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 4 Apr 2021 20:42:50 +0200
Subject: [PATCH] web/elements: rewrite SpinnerButton to promises, fix spinner
 button with forms after errors

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/authentik.css                      |  9 -----
 web/src/elements/buttons/ActionButton.ts   | 12 ++----
 web/src/elements/buttons/SpinnerButton.ts  | 10 +++--
 web/src/elements/forms/ConfirmationForm.ts |  9 +++--
 web/src/elements/forms/DeleteForm.ts       |  9 +++--
 web/src/elements/forms/ModalForm.ts        | 43 +++++++++++-----------
 web/src/pages/users/UserActiveForm.ts      |  4 +-
 7 files changed, 44 insertions(+), 52 deletions(-)

diff --git a/web/src/authentik.css b/web/src/authentik.css
index 6a81f4eb9..1b4b9defc 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -101,15 +101,6 @@ body {
         --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
         --pf-global--link--Color: var(--ak-dark-foreground-link);
     }
-
-    paper-input {
-        /* --paper-input-container-input-color: var(--ak-dark-foreground); */
-        --primary-text-color: var(--ak-dark-foreground);
-    }
-    paper-checkbox {
-        --primary-text-color: var(--ak-dark-foreground);
-    }
-
     /* Global page background colour */
     .pf-c-page {
         --pf-c-page--BackgroundColor: var(--ak-dark-background);
diff --git a/web/src/elements/buttons/ActionButton.ts b/web/src/elements/buttons/ActionButton.ts
index e0d7d85b5..ded130b77 100644
--- a/web/src/elements/buttons/ActionButton.ts
+++ b/web/src/elements/buttons/ActionButton.ts
@@ -1,5 +1,4 @@
 import { customElement, property } from "lit-element";
-import { ERROR_CLASS, SUCCESS_CLASS } from "../../constants";
 import { SpinnerButton } from "./SpinnerButton";
 import { showMessage } from "../messages/MessageContainer";
 import { MessageLevel } from "../messages/Message";
@@ -16,14 +15,9 @@ export class ActionButton extends SpinnerButton {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     apiRequest: () => Promise<any> = () => { throw new Error(); };
 
-    callAction = (): void => {
-        if (this.isRunning === true) {
-            return;
-        }
+    callAction = (): Promise<void> => {
         this.setLoading();
-        this.apiRequest().then(() => {
-            this.setDone(SUCCESS_CLASS);
-        }).catch((e: Error | Response) => {
+        return this.apiRequest().catch((e: Error | Response) => {
             if (e instanceof Error) {
                 showMessage({
                     level: MessageLevel.error,
@@ -37,7 +31,7 @@ export class ActionButton extends SpinnerButton {
                     });
                 });
             }
-            this.setDone(ERROR_CLASS);
+            throw e;
         });
     };
 }
diff --git a/web/src/elements/buttons/SpinnerButton.ts b/web/src/elements/buttons/SpinnerButton.ts
index 73d5b3074..5476ea27f 100644
--- a/web/src/elements/buttons/SpinnerButton.ts
+++ b/web/src/elements/buttons/SpinnerButton.ts
@@ -4,7 +4,7 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
 import AKGlobal from "../../authentik.css";
 import { SpinnerSize } from "../Spinner";
-import { PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
+import { ERROR_CLASS, PRIMARY_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../../constants";
 
 @customElement("ak-spinner-button")
 export class SpinnerButton extends LitElement {
@@ -12,7 +12,7 @@ export class SpinnerButton extends LitElement {
     isRunning = false;
 
     @property()
-    callAction?: () => void;
+    callAction?: () => Promise<void>;
 
     static get styles(): CSSResult[] {
         return [
@@ -60,7 +60,11 @@ export class SpinnerButton extends LitElement {
                 }
                 this.setLoading();
                 if (this.callAction) {
-                    this.callAction();
+                    this.callAction().then(() => {
+                        this.setDone(SUCCESS_CLASS);
+                    }).catch(() => {
+                        this.setDone(ERROR_CLASS);
+                    });
                 }
             }}>
             ${this.isRunning
diff --git a/web/src/elements/forms/ConfirmationForm.ts b/web/src/elements/forms/ConfirmationForm.ts
index e004154c8..1872f30f8 100644
--- a/web/src/elements/forms/ConfirmationForm.ts
+++ b/web/src/elements/forms/ConfirmationForm.ts
@@ -20,8 +20,8 @@ export class ConfirmationForm extends ModalButton {
     @property({attribute: false})
     onConfirm!: () => Promise<unknown>;
 
-    confirm(): void {
-        this.onConfirm().then(() => {
+    confirm(): Promise<void> {
+        return this.onConfirm().then(() => {
             this.onSuccess();
             this.open = false;
             this.dispatchEvent(
@@ -32,6 +32,7 @@ export class ConfirmationForm extends ModalButton {
             );
         }).catch((e) => {
             this.onError(e);
+            throw e;
         });
     }
 
@@ -65,13 +66,13 @@ export class ConfirmationForm extends ModalButton {
         <footer class="pf-c-modal-box__footer">
             <ak-spinner-button
                 .callAction=${() => {
-                    this.confirm();
+                    return this.confirm();
                 }}
                 class="pf-m-danger">
                 ${this.action}
             </ak-spinner-button>&nbsp;
             <ak-spinner-button
-                .callAction=${() => {
+                .callAction=${async () => {
                     this.open = false;
                 }}
                 class="pf-m-secondary">
diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts
index 65f1fb1d6..2368fecdd 100644
--- a/web/src/elements/forms/DeleteForm.ts
+++ b/web/src/elements/forms/DeleteForm.ts
@@ -18,8 +18,8 @@ export class DeleteForm extends ModalButton {
     @property({attribute: false})
     delete!: () => Promise<unknown>;
 
-    confirm(): void {
-        this.delete().then(() => {
+    confirm(): Promise<void> {
+        return this.delete().then(() => {
             this.onSuccess();
             this.open = false;
             this.dispatchEvent(
@@ -30,6 +30,7 @@ export class DeleteForm extends ModalButton {
             );
         }).catch((e) => {
             this.onError(e);
+            throw e;
         });
     }
 
@@ -65,13 +66,13 @@ export class DeleteForm extends ModalButton {
         <footer class="pf-c-modal-box__footer">
             <ak-spinner-button
                 .callAction=${() => {
-                    this.confirm();
+                    return this.confirm();
                 }}
                 class="pf-m-danger">
                 ${t`Delete`}
             </ak-spinner-button>&nbsp;
             <ak-spinner-button
-                .callAction=${() => {
+                .callAction=${async () => {
                     this.open = false;
                 }}
                 class="pf-m-secondary">
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index d224c2885..ef740512c 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -11,26 +11,26 @@ export class ModalForm extends ModalButton {
     @property({ type: Boolean })
     closeAfterSuccessfulSubmit = true;
 
-    confirm(): void {
-        this.querySelectorAll<Form<unknown>>("[slot=form]").forEach(form => {
-            const formPromise = form.submit(new Event("submit"));
-            if (!formPromise) {
-                return;
+    confirm(): Promise<void>  {
+        const form = this.querySelector<Form<unknown>>("[slot=form]");
+        if (!form) {
+            return Promise.reject(t`No form found`);
+        }
+        const formPromise = form.submit(new Event("submit"));
+        if (!formPromise) {
+            return Promise.reject(t`Form didn't return a promise for submitting`);
+        }
+        return formPromise.then(() => {
+            if (this.closeAfterSuccessfulSubmit) {
+                this.open = false;
+                form.reset();
             }
-            formPromise.then(() => {
-                if (this.closeAfterSuccessfulSubmit) {
-                    this.open = false;
-                    form.reset();
-                }
-                this.dispatchEvent(
-                    new CustomEvent(EVENT_REFRESH, {
-                        bubbles: true,
-                        composed: true,
-                    })
-                );
-            }).catch((e) => {
-                console.log(e);
-            });
+            this.dispatchEvent(
+                new CustomEvent(EVENT_REFRESH, {
+                    bubbles: true,
+                    composed: true,
+                })
+            );
         });
     }
 
@@ -48,13 +48,14 @@ export class ModalForm extends ModalButton {
         <footer class="pf-c-modal-box__footer">
             <ak-spinner-button
                 .callAction=${() => {
-                    this.confirm();
+                    return this.confirm();
                 }}
                 class="pf-m-primary">
                 <slot name="submit"></slot>
             </ak-spinner-button>&nbsp;
             <ak-spinner-button
-                .callAction=${() => {
+                .callAction=${async () => {
+                    this.resetForms();
                     this.open = false;
                 }}
                 class="pf-m-secondary">
diff --git a/web/src/pages/users/UserActiveForm.ts b/web/src/pages/users/UserActiveForm.ts
index 7e60c763a..753a7750a 100644
--- a/web/src/pages/users/UserActiveForm.ts
+++ b/web/src/pages/users/UserActiveForm.ts
@@ -48,13 +48,13 @@ export class UserActiveForm extends DeleteForm {
         <footer class="pf-c-modal-box__footer">
             <ak-spinner-button
                 .callAction=${() => {
-                    this.confirm();
+                    return this.confirm();
                 }}
                 class="pf-m-warning">
                 ${t`Update`}
             </ak-spinner-button>&nbsp;
             <ak-spinner-button
-                .callAction=${() => {
+                .callAction=${async () => {
                     this.open = false;
                 }}
                 class="pf-m-secondary">