web/elements: array select

web/src/admin/admin-settings/AdminSettingsForm.ts

@@ -3,8 +3,7 @@ import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-number-input";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
-import "@goauthentik/elements/CodeMirror";
-import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/ak-array-input/ak-array-input";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -19,7 +18,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 import PFList from "@patternfly/patternfly/components/List/list.css";
 
-import { AdminApi, Settings, SettingsRequest } from "@goauthentik/api";
+import { AdminApi, FooterLink, Settings, SettingsRequest } from "@goauthentik/api";
 
 @customElement("ak-admin-settings-form")
 export class AdminSettingsForm extends Form<SettingsRequest> {
@@ -166,15 +165,29 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
             >
             </ak-text-input>
             <ak-form-element-horizontal label=${msg("Footer links")} name="footerLinks">
-                <ak-codemirror
-                    mode=${CodeMirrorMode.YAML}
-                    .value="${first(this._settings?.footerLinks, [])}"
-                ></ak-codemirror>
+                <ak-array-input
+                    .elements=${this._settings?.footerLinks || []}
+                    allowEmpty
+                    .elementRenderer=${(entry: FooterLink) => {
+                        return html`<input
+                                type="text"
+                                value="${entry.name}"
+                                class="pf-c-form-control"
+                                required
+                                name="name"
+                                placeholder=${msg("Name")}
+                            />
+                            <input
+                                type="text"
+                                value="${entry.href || ""}"
+                                class="pf-c-form-control"
+                                name="href"
+                                placeholder=${msg("URL")}
+                            />`;
+                    }}
+                ></ak-array-input>
                 <p class="pf-c-form__helper-text">
-                    ${msg(
-                        "This option configures the footer links on the flow executor pages. It must be a valid YAML or JSON list and can be used as follows:",
-                    )}
-                    <code>[{"name": "Link Name","href":"https://goauthentik.io"}]</code>
+                    ${msg("This option configures the footer links on the flow executor pages.")}
                 </p>
             </ak-form-element-horizontal>
             <ak-switch-input

web/src/elements/ak-array-input/ak-array-input.ts

@@ -0,0 +1,92 @@
+import { AkControlElement } from "@goauthentik/elements/AkControlElement";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+@customElement("ak-array-input")
+export class AkArrayInput<T> extends AkControlElement {
+    @property()
+    elementRenderer: (el: T, idx: number) => TemplateResult = () => {
+        return html``;
+    };
+
+    @property({ type: Array })
+    elements: T[] = [];
+
+    @property({ type: Boolean })
+    allowEmpty = false;
+
+    static get styles() {
+        return [
+            PFBase,
+            PFButton,
+            PFInputGroup,
+            PFFormControl,
+            css`
+                select.pf-c-form-control {
+                    width: 100px;
+                }
+                .pf-c-input-group {
+                    padding-bottom: 8px;
+                }
+            `,
+        ];
+    }
+
+    json() {
+        const serializedEntries: { [key: string]: unknown }[] = [];
+        // TODO: This should probably use `serializeForm`, however that is built around
+        // a) having multiple HorizontalFormElements, and
+        // b) having one input element in each
+        this.shadowRoot?.querySelectorAll<HTMLDivElement>(".pf-c-input-group").forEach((group) => {
+            const entry: { [key: string]: unknown } = {};
+            group.querySelectorAll<HTMLInputElement>("[name]").forEach((el) => {
+                entry[el.name] = el.value;
+            });
+            serializedEntries.push(entry);
+        });
+        return serializedEntries;
+    }
+
+    renderButtons(el: T) {
+        return html`${this.elements.length > 1 || this.allowEmpty
+            ? html`<button
+                  class="pf-c-button pf-m-control"
+                  type="button"
+                  @click=${() => {
+                      const index = this.elements.indexOf(el);
+                      if (index > -1) {
+                          this.elements.splice(index, 1);
+                          this.requestUpdate();
+                      }
+                  }}
+              >
+                  <i class="fas fa-minus" aria-hidden="true"></i>
+              </button>`
+            : nothing}`;
+    }
+
+    render() {
+        return html`${this.elements.map((el, idx) => {
+                return html`<div class="pf-c-input-group">
+                    ${this.elementRenderer(el, idx)}${this.renderButtons(el)}
+                </div>`;
+            })}
+            <button
+                class="pf-c-button pf-m-link"
+                type="button"
+                @click=${() => {
+                    this.elements.push({} as unknown as T);
+                    this.requestUpdate();
+                }}
+            >
+                <i class="fas fa-plus" aria-hidden="true"></i>&nbsp; ${msg("Add entry")}
+            </button>`;
+    }
+}

web/src/elements/forms/HorizontalFormElement.ts

@@ -2,7 +2,7 @@ import { convertToSlug } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
 import { FormGroup } from "@goauthentik/elements/forms/FormGroup";
 
-import { msg } from "@lit/localize";
+import { msg, str } from "@lit/localize";
 import { CSSResult, css } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -33,7 +33,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
  *    where the field isn't available for the user to view unless they explicitly request to be able
  *    to see the content; otherwise, a dead password field is shown. There are 10 uses of this
  *    feature.
- * 
+ *
  */
 
 const isAkControl = (el: unknown): boolean =>
@@ -86,7 +86,7 @@ export class HorizontalFormElement extends AKElement {
     writeOnlyActivated = false;
 
     @property({ attribute: false })
-    errorMessages: string[] = [];
+    errorMessages: string[] | string[][] = [];
 
     @property({ type: Boolean })
     slugMode = false;
@@ -183,6 +183,16 @@ export class HorizontalFormElement extends AKElement {
                           </p>`
                         : html``}
                     ${this.errorMessages.map((message) => {
+                        if (message instanceof Object) {
+                            return html`${Object.entries(message).map(([field, errMsg]) => {
+                                return html`<p
+                                    class="pf-c-form__helper-text pf-m-error"
+                                    aria-live="polite"
+                                >
+                                    ${msg(str`${field}: ${errMsg}`)}
+                                </p>`;
+                            })}`;
+                        }
                         return html`<p class="pf-c-form__helper-text pf-m-error" aria-live="polite">
                             ${message}
                         </p>`;