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

@@ -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);

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 => {
+    callAction = (): Promise<void> => {
-        if (this.isRunning === true) {
-            return;
-        }
         this.setLoading();
-        this.apiRequest().then(() => {
+        return this.apiRequest().catch((e: Error | Response) => {
-            this.setDone(SUCCESS_CLASS);
-        }).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;
         });
     };
 }

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

web/src/elements/forms/ConfirmationForm.ts

@@ -20,8 +20,8 @@ export class ConfirmationForm extends ModalButton {
     @property({attribute: false})
     onConfirm!: () => Promise<unknown>;
 
-    confirm(): void {
+    confirm(): Promise<void> {
-        this.onConfirm().then(() => {
+        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">

web/src/elements/forms/DeleteForm.ts

@@ -18,8 +18,8 @@ export class DeleteForm extends ModalButton {
     @property({attribute: false})
     delete!: () => Promise<unknown>;
 
-    confirm(): void {
+    confirm(): Promise<void> {
-        this.delete().then(() => {
+        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">

web/src/elements/forms/ModalForm.ts

@@ -11,26 +11,26 @@ export class ModalForm extends ModalButton {
     @property({ type: Boolean })
     closeAfterSuccessfulSubmit = true;
 
-    confirm(): void {
+    confirm(): Promise<void>  {
-        this.querySelectorAll<Form<unknown>>("[slot=form]").forEach(form => {
+        const form = this.querySelector<Form<unknown>>("[slot=form]");
-            const formPromise = form.submit(new Event("submit"));
+        if (!form) {
-            if (!formPromise) {
+            return Promise.reject(t`No form found`);
-                return;
+        }
+        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(() => {
+            this.dispatchEvent(
-                if (this.closeAfterSuccessfulSubmit) {
+                new CustomEvent(EVENT_REFRESH, {
-                    this.open = false;
+                    bubbles: true,
-                    form.reset();
+                    composed: true,
-                }
+                })
-                this.dispatchEvent(
+            );
-                    new CustomEvent(EVENT_REFRESH, {
-                        bubbles: true,
-                        composed: true,
-                    })
-                );
-            }).catch((e) => {
-                console.log(e);
-            });
         });
     }
 
@@ -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">

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">