Merge branch 'master' into publish-api-to-npm

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

# Conflicts:
#	web/package-lock.json
#	web/src/pages/sources/oauth/OAuthSourceForm.ts

web/src/elements/LoadingOverlay.ts

@@ -1,9 +1,20 @@
-import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+import {
+    css,
+    CSSResult,
+    customElement,
+    html,
+    LitElement,
+    property,
+    TemplateResult,
+} from "lit-element";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import { PFSize } from "./Spinner";
 
 @customElement("ak-loading-overlay")
 export class LoadingOverlay extends LitElement {
+    @property({ type: Boolean })
+    topMost = false;
+
     static get styles(): CSSResult[] {
         return [
             PFBase,
@@ -18,6 +29,9 @@ export class LoadingOverlay extends LitElement {
                     background-color: var(--pf-global--BackgroundColor--dark-transparent-100);
                     z-index: 1;
                 }
+                :host([topMost]) {
+                    z-index: 999;
+                }
             `,
         ];
     }

web/src/elements/buttons/ModalButton.ts

@@ -46,6 +46,9 @@ export class ModalButton extends LitElement {
     @property({ type: Boolean })
     open = false;
 
+    @property({ type: Boolean })
+    locked = false;
+
     handlerBound = false;
 
     static get styles(): CSSResult[] {
@@ -63,6 +66,11 @@ export class ModalButton extends LitElement {
             PFContent,
             AKGlobal,
             MODAL_BUTTON_STYLES,
+            css`
+                .locked {
+                    overflow-y: hidden !important;
+                }
+            `,
         ];
     }
 
@@ -108,7 +116,11 @@ export class ModalButton extends LitElement {
     renderModal(): TemplateResult {
         return html`<div class="pf-c-backdrop">
             <div class="pf-l-bullseye">
-                <div class="pf-c-modal-box ${this.size}" role="dialog" aria-modal="true">
+                <div
+                    class="pf-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"
+                    role="dialog"
+                    aria-modal="true"
+                >
                     <button
                         @click=${() => (this.open = false)}
                         class="pf-c-button pf-m-plain"

web/src/elements/forms/HorizontalFormElement.ts

@@ -5,6 +5,7 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import AKGlobal from "../../authentik.css";
 import { t } from "@lingui/macro";
+import { FormGroup } from "./FormGroup";
 
 @customElement("ak-form-element-horizontal")
 export class HorizontalFormElement extends LitElement {
@@ -43,8 +44,20 @@ export class HorizontalFormElement extends LitElement {
     @property()
     errorMessage = "";
 
+    _invalid = false;
+
     @property({ type: Boolean })
-    invalid = false;
+    set invalid(v: boolean) {
+        this._invalid = v;
+        // check if we're in a form group, and expand that form group
+        const parent = this.parentElement?.parentElement;
+        if (parent && "expanded" in parent) {
+            (parent as FormGroup).expanded = true;
+        }
+    }
+    get invalid(): boolean {
+        return this._invalid;
+    }
 
     @property()
     name = "";

web/src/elements/forms/ModalForm.ts

@@ -30,6 +30,7 @@ export class ModalForm extends ModalButton {
                     form?.resetForm();
                 }
                 this.loading = false;
+                this.locked = false;
                 this.dispatchEvent(
                     new CustomEvent(EVENT_REFRESH, {
                         bubbles: true,
@@ -39,12 +40,15 @@ export class ModalForm extends ModalButton {
             })
             .catch((exc) => {
                 this.loading = false;
+                this.locked = false;
                 throw exc;
             });
     }
 
     renderModalInner(): TemplateResult {
-        return html`${this.loading ? html`<ak-loading-overlay></ak-loading-overlay>` : html``}
+        return html`${this.loading
+                ? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>`
+                : html``}
             <section class="pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">
@@ -59,6 +63,7 @@ export class ModalForm extends ModalButton {
                 <ak-spinner-button
                     .callAction=${() => {
                         this.loading = true;
+                        this.locked = true;
                         return this.confirm();
                     }}
                     class="pf-m-primary"