web/legible/disambiguate-footer-links

# What

- Replaces the "brand links" box at the bottom of FlowExecutor with a component for showing brand
  links.

# Why

- Confusion arose about what "footer links" mean in any given context, and breaking this out,
  labeling it "brand-links," reduces that confusion. It also isolates and reduces the testable
  surface area of the Executor.

web/src/flow/FlowExecutor.ts

@@ -5,7 +5,6 @@ import {
     TITLE_DEFAULT,
 } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
-import { purify } from "@goauthentik/common/purify";
 import { configureSentry } from "@goauthentik/common/sentry";
 import { first } from "@goauthentik/common/utils";
 import { WebsocketClient } from "@goauthentik/common/ws";
@@ -14,6 +13,7 @@ import "@goauthentik/elements/LoadingOverlay";
 import "@goauthentik/elements/ak-locale-context";
 import { DefaultBrand } from "@goauthentik/elements/sidebar/SidebarBrand";
 import { themeImage } from "@goauthentik/elements/utils/images";
+import "@goauthentik/flow/components/ak-brand-footer";
 import "@goauthentik/flow/sources/apple/AppleLoginInit";
 import "@goauthentik/flow/sources/plex/PlexLoginInit";
 import "@goauthentik/flow/stages/FlowErrorStage";
@@ -516,25 +516,9 @@ export class FlowExecutor extends Interface implements StageHost {
                                             ${until(this.renderChallenge())}
                                         </div>
                                         <footer class="pf-c-login__footer">
-                                            <ul class="pf-c-list pf-m-inline">
+                                            <ak-brand-links
-                                                ${this.brand?.uiFooterLinks?.map((link) => {
+                                                .links=${this.brand?.uiFooterLinks ?? []}
-                                                    if (link.href) {
+                                            ></ak-brand-links>
-                                                        return html`${purify(
-                                                            html`<li>
-                                                                <a href="${link.href}"
-                                                                    >${link.name}</a
-                                                                >
-                                                            </li>`,
-                                                        )}`;
-                                                    }
-                                                    return html`<li>
-                                                        <span>${link.name}</span>
-                                                    </li>`;
-                                                })}
-                                                <li>
-                                                    <span>${msg("Powered by authentik")}</span>
-                                                </li>
-                                            </ul>
                                         </footer>
                                     </div>
                                 </div>

web/src/flow/components/ak-brand-footer.ts

@@ -0,0 +1,51 @@
+import { purify } from "@goauthentik/common/purify";
+import { AKElement } from "@goauthentik/elements/Base.js";
+
+import { msg } from "@lit/localize";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+
+import PFList from "@patternfly/patternfly/components/List/list.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { FooterLink } from "@goauthentik/api";
+
+const styles = css`
+    .pf-c-list a {
+        color: unset;
+    }
+    ul.pf-c-list.pf-m-inline {
+        justify-content: center;
+        padding: calc(var(--pf-global--spacer--xs) / 2) 0px;
+    }
+`;
+
+const salesMark: FooterLink = { name: msg("Powered by authentik"), href: "" };
+
+@customElement("ak-brand-links")
+export class BrandLinks extends AKElement {
+    static get styles() {
+        return [PFBase, PFList, styles];
+    }
+
+    @property({ type: Array, attribute: false })
+    links: FooterLink[] = [];
+
+    render() {
+        const links = [...(this.links ?? []), salesMark];
+        return html` <ul class="pf-c-list pf-m-inline">
+            ${map(links, (link) =>
+                link.href
+                    ? purify(html`<li><a href="${link.href}">${link.name}</a></li>`)
+                    : html`<li><span>${link.name}</span></li>`,
+            )}
+        </ul>`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-brand-links": BrandLinks;
+    }
+}