web: Captcha Refinements, Part 2 (#19757)

* Move inline styles into separate file.

* Fix preferred order of captcha vendor discovery.

* Clean up mutation and resize observer lifecycle.

* Flesh out controllers.

* Tidy refresh.

* Fix incompatibilities with Storybook.

* Flesh out captcha stories.

* Bump package.

* Flesh out stories.

* Move inline styles into separate file.

* Fix preferred order of captcha vendor discovery.

* Clean up mutation and resize observer lifecycle.

* Flesh out controllers.

* Tidy refresh.

* Remove unused.

* Bump package.

(cherry picked from commit 388f426)

Author: GirlBossRush

web/.storybook/main.js

@@ -3,6 +3,13 @@
  * @import { StorybookConfig } from "@storybook/web-components-vite";
  */
 
+/**
+ * @param {TemplateStringsArray} strings
+ * @param  {...any} values
+ * @returns {string}
+ */
+const html = (strings, ...values) => String.raw({ raw: strings }, ...values);
+
 /**
  * @satisfies {StorybookConfig}
  */
@@ -18,6 +25,27 @@ const config = {
         "@storybook/addon-docs",
     ],
     framework: "@storybook/web-components-vite",
+    viteFinal: async (config) => {
+        return {
+            ...config,
+            define: {
+                ...config.define,
+                "import.meta.env.AK_BUNDLER": JSON.stringify("storybook"),
+            },
+            resolve: {
+                ...config.resolve,
+                // Avoid multiple instances of web components packages.
+                conditions: [],
+            },
+        };
+    },
+
+    previewBody: (body) => html`
+        <ak-skip-to-content></ak-skip-to-content>
+        <ak-message-container></ak-message-container>
+
+        ${body}
+    `,
 };
 
 export default config;

web/.storybook/preview.js

@@ -5,6 +5,7 @@
  */
 
 import "#styles/authentik/interface.global.css";
+import "#styles/authentik/static.global.css";
 import "#styles/authentik/storybook.css";
 
 import { ThemedDocsContainer } from "./DocsContainer.tsx";

web/bundler/utils/node.js

@@ -27,6 +27,7 @@ export function createBundleDefinitions() {
         AK_DOCS_RELEASE_NOTES_URL: ReleaseNotesURL.href,
         AK_DOCS_PRE_RELEASE_URL: PreReleaseDocsURL.href,
         AK_API_BASE_PATH: process.env.AK_API_BASE_PATH ?? "",
+        AK_BUNDLER: JSON.stringify(process.env.AK_BUNDLER ?? "authentik"),
     };
 
     return {

web/package-lock.json

@@ -176,7 +176,7 @@
         "remark-frontmatter": "^5.0.0",
         "remark-gfm": "^4.0.1",
         "remark-mdx-frontmatter": "^5.2.0",
-        "storybook": "^10.0.8",
+        "storybook": "^10.2.1",
         "style-mod": "^4.1.3",
         "trusted-types": "^2.0.0",
         "ts-pattern": "^5.9.0",

web/package.json

@@ -22,8 +22,9 @@ export class LoggingMiddleware implements Middleware {
 
     constructor(brand: CurrentBrand) {
         const prefix =
-            brand.matchedDomain === "authentik-default" ? "api" : `api/${brand.matchedDomain}`;
-
+            brand.matchedDomain && brand.matchedDomain !== "authentik-default"
+                ? `api/${brand.matchedDomain}`
+                : "api";
         this.#logger = ConsoleLogger.prefix(prefix);
     }
 

web/src/common/api/middleware.ts

@@ -321,29 +321,38 @@ function pluckCurrentBackgroundURL(
     return null;
 }
 
+export interface BackgroundImageInit {
+    baseOrigin?: string;
+    target?: HTMLElement | null;
+}
+
 /**
  * Applies the given background image URL to the document body.
  *
  * This method is very defensive to avoid unnecessary DOM repaints.
  */
 export function applyBackgroundImageProperty(
     value?: string | null,
-    baseOrigin = window.location.origin,
+    init?: BackgroundImageInit,
 ): void {
+    const baseOrigin = init?.baseOrigin ?? window.location.origin;
+
     if (!value || !URL.canParse(value, baseOrigin)) {
         return;
     }
 
+    const target = init?.target ?? document.body;
+
     const nextURL = new URL(value, baseOrigin);
 
-    const { backgroundImage } = getComputedStyle(document.body, "::before");
+    const { backgroundImage } = getComputedStyle(target, "::before");
 
     const currentURL = pluckCurrentBackgroundURL(backgroundImage, baseOrigin);
     if (currentURL?.href === nextURL.href) {
         return;
     }
 
-    document.body.style.setProperty(AKBackgroundImageProperty, `url("${nextURL.href}")`);
+    target.style.setProperty(AKBackgroundImageProperty, `url("${nextURL.href}")`);
 }
 
 /**

web/src/common/theme.ts

@@ -2,6 +2,15 @@
  * @file Common utility types.
  */
 
+/**
+ * Type utility to make all properties in T recursively optional.
+ */
+export type DeepPartial<T> = T extends object
+    ? {
+          [P in keyof T]?: DeepPartial<T[P]>;
+      }
+    : T;
+
 /**
  * Type utility to make readonly properties mutable.
  */