web/admin: better footer links

web/package.json

@@ -328,12 +328,18 @@
         },
         "test:e2e:watch": {
             "command": "wdio run ./tests/wdio.conf.ts",
+            "dependencies": [
+                "build"
+            ],
             "env": {
                 "TS_NODE_PROJECT": "./tests/tsconfig.test.json"
             }
         },
         "test:watch": {
             "command": "wdio run ./wdio.conf.ts",
+            "dependencies": [
+                "build"
+            ],
             "env": {
                 "TS_NODE_PROJECT": "tsconfig.test.json"
             }

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

@@ -0,0 +1,100 @@
+import { AkControlElement } from "@goauthentik/elements/AkControlElement.js";
+import { type Spread } from "@goauthentik/elements/types";
+import { spread } from "@open-wc/lit-helpers";
+
+import { msg } from "@lit/localize";
+import { css, html } from "lit";
+import { customElement, property, queryAll } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+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";
+
+import { FooterLink } from "@goauthentik/api";
+
+export interface IFooterLinkInput {
+    footerLink: FooterLink;
+}
+
+const LEGAL_SCHEMES = ["http://", "https://", "mailto:"];
+const hasLegalScheme = (url: string) =>
+    LEGAL_SCHEMES.some((scheme) => url.substr(0, scheme.length).toLowerCase() === scheme);
+
+@customElement("ak-admin-settings-footer-link")
+export class FooterLinkInput extends AkControlElement<FooterLink> {
+    static get styles() {
+        return [
+            PFBase,
+            PFInputGroup,
+            PFFormControl,
+            css`
+                .pf-c-input-group input#linkname {
+                    flex-grow: 1;
+                    width: 8rem;
+                }
+            `,
+        ];
+    }
+
+    @property({ type: Object, attribute: false })
+    footerLink: FooterLink = {
+        name: "",
+        href: "",
+    };
+
+    @queryAll(".ak-form-control")
+    controls?: HTMLInputElement[];
+
+    json() {
+        return Object.fromEntries(
+            Array.from(this.controls ?? []).map((control) => [control.name, control.value]),
+        ) as unknown as FooterLink;
+    }
+
+    get isValid() {
+        const href = this.json()?.href ?? "";
+        return hasLegalScheme(href) && URL.canParse(href);
+    }
+
+    render() {
+        const onChange = () => {
+            this.dispatchEvent(new Event("change", { composed: true, bubbles: true }));
+        };
+
+        return html` <div class="pf-c-input-group">
+            <input
+                type="text"
+                @change=${onChange}
+                value=${this.footerLink.name}
+                id="linkname"
+                class="pf-c-form-control ak-form-control"
+                name="name"
+                placeholder=${msg("Link Title")}
+                tabindex="1"
+            />
+            <input
+                type="text"
+                @change=${onChange}
+                value="${ifDefined(this.footerLink.href ?? undefined)}"
+                class="pf-c-form-control ak-form-control"
+                required
+                placeholder=${msg("URL")}
+                name="href"
+                tabindex="1"
+            />
+        </div>`;
+    }
+}
+
+export function akFooterLinkInput(properties: IFooterLinkInput) {
+    return html`<ak-admin-settings-footer-link
+        ${spread(properties as unknown as Spread)}
+    ></ak-admin-settings-footer-link>`;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-admin-settings-footer-link": FooterLinkInput;
+    }
+}

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.js";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -13,13 +12,16 @@ import "@goauthentik/elements/forms/SearchSelect";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
 
 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 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";
+
+import "./AdminSettingsFooterLinks.js";
+import { IFooterLinkInput, akFooterLinkInput } from "./AdminSettingsFooterLinks.js";
 
 @customElement("ak-admin-settings-form")
 export class AdminSettingsForm extends Form<SettingsRequest> {
@@ -40,7 +42,14 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
     private _settings?: Settings;
 
     static get styles(): CSSResult[] {
-        return super.styles.concat(PFList);
+        return super.styles.concat(
+            PFList,
+            css`
+                ak-array-input {
+                    width: 100%;
+                }
+            `,
+        );
     }
 
     getSuccessMessage(): string {
@@ -166,15 +175,21 @@ 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
+                    .items=${this._settings?.footerLinks ?? []}
+                    .newItem=${() => ({ name: "", href: "" })}
+                    .row=${(f?: FooterLink) =>
+                        akFooterLinkInput({
+                            ".footerLink": f,
+                            "style": "width: 100%",
+                            "name": "footer-link",
+                        } as unknown as IFooterLinkInput)}
+                >
+                </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:",
+                        "This option configures the footer links on the flow executor pages. The URL is limited to web and mail addresses. If the name is left blank, the URL will be shown.",
                     )}
-                    <code>[{"name": "Link Name","href":"https://goauthentik.io"}]</code>
                 </p>
             </ak-form-element-horizontal>
             <ak-switch-input

web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts

@@ -0,0 +1,80 @@
+import "@goauthentik/elements/messages/MessageContainer";
+import { Meta, StoryObj, WebComponentsRenderer } from "@storybook/web-components";
+import { DecoratorFunction } from "storybook/internal/types";
+
+import { html } from "lit";
+
+import { FooterLinkInput } from "../AdminSettingsFooterLinks.js";
+import "../AdminSettingsFooterLinks.js";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Decorator = DecoratorFunction<WebComponentsRenderer, any>;
+
+const metadata: Meta<FooterLinkInput> = {
+    title: "Components / Footer Link Input",
+    component: "ak-admin-settings-footer-link",
+    parameters: {
+        docs: {
+            description: {
+                component: "A stylized control for the footer links",
+            },
+        },
+    },
+    decorators: [
+        (story: Decorator) => {
+            window.setTimeout(() => {
+                const control = document.getElementById("footer-link");
+                if (!control) {
+                    throw new Error("Test was not initialized correctly.");
+                }
+                const messages = document.getElementById("reported-value");
+                control.addEventListener("change", (event: Event) => {
+                    if (!event.target) {
+                        return;
+                    }
+                    const target = event.target as FooterLinkInput;
+                    messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.isValid ? "Yes" : "No"}`;
+                });
+            }, 250);
+
+            return html`<div
+                style="background: #fff; padding: 2em; position: relative"
+                id="the-main-event"
+            >
+                <style>
+                    li {
+                        display: block;
+                    }
+                    p {
+                        margin-top: 1em;
+                    }
+                    #the-answer-block {
+                        padding-top: 3em;
+                    }
+                </style>
+                <div>
+                    ${
+                        // @ts-expect-error The types for web components are not well-defined }
+                        story()
+                    }
+                </div>
+                <div style="margin-top: 2rem">
+                    <p>Reported value:</p>
+                    <pre id="reported-value"></pre>
+                </div>
+            </div>`;
+        },
+    ],
+};
+
+export default metadata;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () =>
+        html` <ak-admin-settings-footer-link
+            id="footer-link"
+            name="the-footer"
+        ></ak-admin-settings-footer-link>`,
+};

web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.test.ts

@@ -0,0 +1,68 @@
+import { render } from "@goauthentik/elements/tests/utils.js";
+import { $, expect } from "@wdio/globals";
+
+import { html } from "lit";
+
+import "../AdminSettingsFooterLinks.js";
+
+describe("ak-admin-settings-footer-link", () => {
+    afterEach(async () => {
+        await browser.execute(async () => {
+            await document.body.querySelector("ak-admin-settings-footer-link")?.remove();
+            if (document.body["_$litPart$"]) {
+                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
+                await delete document.body["_$litPart$"];
+            }
+        });
+    });
+
+    it("should render an empty control", async () => {
+        render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
+        const link = await $("ak-admin-settings-footer-link");
+        await expect(await link.getProperty("isValid")).toStrictEqual(false);
+        await expect(await link.getProperty("toJson")).toEqual({ name: "", href: "" });
+    });
+
+    it("should not be valid if just a name is filled in", async () => {
+        render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
+        const link = await $("ak-admin-settings-footer-link");
+        await link.$('input[name="name"]').setValue("foo");
+        await expect(await link.getProperty("isValid")).toStrictEqual(false);
+        await expect(await link.getProperty("toJson")).toEqual({ name: "foo", href: "" });
+    });
+
+    it("should be valid if just a URL is filled in", async () => {
+        render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
+        const link = await $("ak-admin-settings-footer-link");
+        await link.$('input[name="href"]').setValue("https://foo.com");
+        await expect(await link.getProperty("isValid")).toStrictEqual(true);
+        await expect(await link.getProperty("toJson")).toEqual({
+            name: "",
+            href: "https://foo.com",
+        });
+    });
+
+    it("should be valid if both are filled in", async () => {
+        render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
+        const link = await $("ak-admin-settings-footer-link");
+        await link.$('input[name="name"]').setValue("foo");
+        await link.$('input[name="href"]').setValue("https://foo.com");
+        await expect(await link.getProperty("isValid")).toStrictEqual(true);
+        await expect(await link.getProperty("toJson")).toEqual({
+            name: "foo",
+            href: "https://foo.com",
+        });
+    });
+
+    it("should not be valid if the URL is not valid", async () => {
+        render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
+        const link = await $("ak-admin-settings-footer-link");
+        await link.$('input[name="name"]').setValue("foo");
+        await link.$('input[name="href"]').setValue("never://foo.com");
+        await expect(await link.getProperty("toJson")).toEqual({
+            name: "foo",
+            href: "never://foo.com",
+        });
+        await expect(await link.getProperty("isValid")).toStrictEqual(false);
+    });
+});

web/src/elements/AkControlElement.ts

@@ -8,13 +8,21 @@ import { AKElement } from "./Base";
  * extracting the value.
  *
  */
-export class AkControlElement extends AKElement {
+export class AkControlElement<T = string | string[]> extends AKElement {
     constructor() {
         super();
         this.dataset.akControl = "true";
     }
 
-    json() {
+    json(): T {
         throw new Error("Controllers using this protocol must override this method");
     }
+
+    get toJson(): T {
+        return this.json();
+    }
+
+    get isValid(): boolean {
+        return true;
+    }
 }