web/admin: implement groupform using webcomponents

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

web/src/elements/forms/Form.ts

@@ -10,6 +10,7 @@ import AKGlobal from "../../authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import { MessageLevel } from "../messages/Message";
+import { IronFormElement } from "@polymer/iron-form/iron-form";
 
 interface ErrorResponse {
     [key: string]: string[];
@@ -40,6 +41,23 @@ export class Form<T> extends LitElement {
         `];
     }
 
+    serializeForm(form: IronFormElement): T {
+        const elements = form._getSubmittableElements();
+        const json: { [key: string]: unknown } = {};
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i] as HTMLInputElement;
+            const values = form._serializeElementValues(element);
+            if (element.tagName.toLowerCase() === "select" && "multiple" in element.attributes) {
+                json[element.name] = values;
+            } else {
+                for (let v = 0; v < values.length; v++) {
+                    form._addSerializedElement(json, element.name, values[v]);
+                }
+            }
+        }
+        return json as unknown as T;
+    }
+
     submit(ev: Event): Promise<T> | undefined {
         ev.preventDefault();
         const ironForm = this.shadowRoot?.querySelector("iron-form");
@@ -47,7 +65,7 @@ export class Form<T> extends LitElement {
             console.warn("authentik/forms: failed to find iron-form");
             return;
         }
-        const data = ironForm.serializeForm() as T;
+        const data = this.serializeForm(ironForm);
         return this.send(data).then((r) => {
             showMessage({
                 level: MessageLevel.success,
@@ -56,24 +74,24 @@ export class Form<T> extends LitElement {
             return r;
         }).catch((ex: Response) => {
             if (ex.status > 399 && ex.status < 500) {
-                return ex.json();
+                return ex.json().then((errorMessage: ErrorResponse) => {
+                    if (!errorMessage) return errorMessage;
+                    if (errorMessage instanceof Error) {
+                        throw errorMessage;
+                    }
+                    const elements: PaperInputElement[] = ironForm._getSubmittableElements();
+                    elements.forEach((element) => {
+                        const elementName = element.name;
+                        if (!elementName) return;
+                        if (elementName in errorMessage) {
+                            element.errorMessage = errorMessage[elementName].join(", ");
+                            element.invalid = true;
+                        }
+                    });
+                    throw new APIError(errorMessage);
+                });
             }
-            return ex;
-        }).then((errorMessage: ErrorResponse | Error) => {
-            if (!errorMessage) return errorMessage;
-            if (errorMessage instanceof Error) {
-                throw errorMessage;
-            }
-            const elements: PaperInputElement[] = ironForm._getSubmittableElements();
-            elements.forEach((element) => {
-                const elementName = element.name;
-                if (!elementName) return;
-                if (elementName in errorMessage) {
-                    element.errorMessage = errorMessage[elementName].join(", ");
-                    element.invalid = true;
-                }
-            });
-            throw new APIError(errorMessage);
+            throw ex;
         });
     }
 

web/src/elements/forms/ModalForm.ts

@@ -1,5 +1,5 @@
 import { gettext } from "django";
-import { customElement, html, property, TemplateResult } from "lit-element";
+import { customElement, html, TemplateResult } from "lit-element";
 import { ModalButton } from "../buttons/ModalButton";
 import { Form } from "./Form";
 
@@ -12,7 +12,7 @@ export class ModalForm extends ModalButton {
             if (!formPromise) {
                 return;
             }
-            formPromise.then((a) => {
+            formPromise.then(() => {
                 this.open = false;
             }).catch((e) => {
                 console.log(e);

web/src/elements/forms/utils.ts

@@ -0,0 +1,16 @@
+import { TemplateResult, html } from "lit-html";
+
+export function formGroup(label: string, body: TemplateResult): TemplateResult {
+    return html`<div class="pf-c-form__group">
+            <div class="pf-c-form__group-label">
+                <label class="pf-c-form__label">
+                    <span class="pf-c-form__label-text">${label}</span>
+                </label>
+            </div>
+            <div class="pf-c-form__group-control">
+                <div class="pf-c-form__horizontal-group">
+                    ${body}
+                </div>
+            </div>
+        </div>`;
+}