web: move context controllers into reactive controller plugins

web/src/common/api/config.ts

@@ -3,7 +3,7 @@ import {
     EventMiddleware,
     LoggingMiddleware,
 } from "@goauthentik/common/api/middleware";
-import { EVENT_LOCALE_REQUEST, EVENT_REFRESH, VERSION } from "@goauthentik/common/constants";
+import { EVENT_LOCALE_REQUEST, VERSION } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
 
 import { Config, Configuration, CoreApi, CurrentBrand, RootApi } from "@goauthentik/api";
@@ -86,13 +86,4 @@ export function AndNext(url: string): string {
     return `?next=${encodeURIComponent(url)}`;
 }
 
-window.addEventListener(EVENT_REFRESH, () => {
-    // Upon global refresh, disregard whatever was pre-hydrated and
-    // actually load info from API
-    globalConfigPromise = undefined;
-    globalBrandPromise = undefined;
-    config();
-    brand();
-});
-
 console.debug(`authentik(early): version ${VERSION}, apiBase ${DEFAULT_CONFIG.basePath}`);

web/src/elements/AuthentikContexts.ts

@@ -1,9 +1,11 @@
 import { createContext } from "@lit/context";
 
-import type { Config, CurrentBrand, LicenseSummary } from "@goauthentik/api";
+import type { Config, CurrentBrand, LicenseSummary, SessionUser } from "@goauthentik/api";
 
 export const authentikConfigContext = createContext<Config>(Symbol("authentik-config-context"));
 
+export const authentikUserContext = createContext<SessionUser>(Symbol("authentik-user-context"));
+
 export const authentikEnterpriseContext = createContext<LicenseSummary>(
     Symbol("authentik-enterprise-context"),
 );

web/src/elements/Interface/BrandContextController.ts

@@ -0,0 +1,52 @@
+import { EVENT_REFRESH } from "@goauthentik/authentik/common/constants";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { authentikBrandContext } from "@goauthentik/elements/AuthentikContexts";
+
+import { ContextProvider } from "@lit/context";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+import type { CurrentBrand } from "@goauthentik/api";
+import { CoreApi } from "@goauthentik/api";
+
+import type { AkInterface } from "./Interface";
+
+type ReactiveElementHost = Partial<ReactiveControllerHost> & AkInterface;
+
+export class BrandContextController implements ReactiveController {
+    host!: ReactiveElementHost;
+
+    context!: ContextProvider<{ __context__: CurrentBrand | undefined }>;
+
+    constructor(host: ReactiveElementHost) {
+        this.host = host;
+        this.context = new ContextProvider(this.host, {
+            context: authentikBrandContext,
+            initialValue: undefined,
+        });
+        this.fetch = this.fetch.bind(this);
+        this.fetch();
+    }
+
+    fetch() {
+        new CoreApi(DEFAULT_CONFIG).coreBrandsCurrentRetrieve().then((brand) => {
+            this.context.setValue(brand);
+            this.host.brand = brand;
+        });
+    }
+
+    hostConnected() {
+        window.addEventListener(EVENT_REFRESH, this.fetch);
+    }
+
+    hostDisconnected() {
+        window.removeEventListener(EVENT_REFRESH, this.fetch);
+    }
+
+    hostUpdate() {
+        // If the Interface changes its brand information for some reason,
+        // we should notify all users of the context of that change. doesn't
+        if (this.host.brand !== this.context.value) {
+            this.context.setValue(this.host.brand);
+        }
+    }
+}

web/src/elements/Interface/ConfigContextController.ts

@@ -0,0 +1,53 @@
+import { EVENT_REFRESH } from "@goauthentik/authentik/common/constants";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts";
+
+import { ContextProvider } from "@lit/context";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+import type { Config } from "@goauthentik/api";
+import { RootApi } from "@goauthentik/api";
+
+import type { AkInterface } from "./Interface";
+
+type ReactiveElementHost = Partial<ReactiveControllerHost> & AkInterface;
+
+export class ConfigContextController implements ReactiveController {
+    host!: ReactiveElementHost;
+
+    context!: ContextProvider<{ __context__: Config | undefined }>;
+
+    constructor(host: ReactiveElementHost) {
+        this.host = host;
+        this.context = new ContextProvider(this.host, {
+            context: authentikConfigContext,
+            initialValue: undefined,
+        });
+        this.fetch = this.fetch.bind(this);
+        this.fetch();
+    }
+
+    fetch() {
+        new RootApi(DEFAULT_CONFIG).rootConfigRetrieve().then((config) => {
+            this.context.setValue(config);
+            this.host.config = config;
+        });
+    }
+
+    hostConnected() {
+        window.addEventListener(EVENT_REFRESH, this.fetch);
+    }
+
+    hostDisconnected() {
+        window.removeEventListener(EVENT_REFRESH, this.fetch);
+    }
+
+    hostUpdate() {
+        // If the Interface changes its config information, we should notify all
+        // users of the context of that change, without creating an infinite
+        // loop of resets.
+        if (this.host.config !== this.context.value) {
+            this.context.setValue(this.host.config);
+        }
+    }
+}

web/src/elements/Interface/EnterpriseContextController.ts

@@ -0,0 +1,53 @@
+import { EVENT_REFRESH_ENTERPRISE } from "@goauthentik/authentik/common/constants";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { authentikEnterpriseContext } from "@goauthentik/elements/AuthentikContexts";
+
+import { ContextProvider } from "@lit/context";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+import type { LicenseSummary } from "@goauthentik/api";
+import { EnterpriseApi } from "@goauthentik/api";
+
+import type { AkEnterpriseInterface } from "./Interface";
+
+type ReactiveElementHost = Partial<ReactiveControllerHost> & AkEnterpriseInterface;
+
+export class EnterpriseContextController implements ReactiveController {
+    host!: ReactiveElementHost;
+
+    context!: ContextProvider<{ __context__: LicenseSummary | undefined }>;
+
+    constructor(host: ReactiveElementHost) {
+        this.host = host;
+        this.context = new ContextProvider(this.host, {
+            context: authentikEnterpriseContext,
+            initialValue: undefined,
+        });
+        this.fetch = this.fetch.bind(this);
+        this.fetch();
+    }
+
+    fetch() {
+        new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseSummaryRetrieve().then((enterprise) => {
+            this.context.setValue(enterprise);
+            this.host.licenseSummary = enterprise;
+        });
+    }
+
+    hostConnected() {
+        window.addEventListener(EVENT_REFRESH_ENTERPRISE, this.fetch);
+    }
+
+    hostDisconnected() {
+        window.removeEventListener(EVENT_REFRESH_ENTERPRISE, this.fetch);
+    }
+
+    hostUpdate() {
+        // If the Interface changes its config information, we should notify all
+        // users of the context of that change, without creating an infinite
+        // loop of resets.
+        if (this.host.licenseSummary !== this.context.value) {
+            this.context.setValue(this.host.licenseSummary);
+        }
+    }
+}

web/src/elements/Interface/Interface.ts

@@ -1,77 +1,47 @@
-import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { brand, config } from "@goauthentik/common/api/config";
-import { EVENT_REFRESH_ENTERPRISE } from "@goauthentik/common/constants";
 import { UIConfig, uiConfig } from "@goauthentik/common/ui/config";
-import {
-    authentikBrandContext,
-    authentikConfigContext,
-    authentikEnterpriseContext,
-} from "@goauthentik/elements/AuthentikContexts";
 import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet";
 
-import { ContextProvider } from "@lit/context";
 import { state } from "lit/decorators.js";
 
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import type { Config, CurrentBrand, LicenseSummary } from "@goauthentik/api";
-import { EnterpriseApi, UiThemeEnum } from "@goauthentik/api";
+import { UiThemeEnum } from "@goauthentik/api";
 
 import { AKElement } from "../Base";
+import { BrandContextController } from "./BrandContextController";
+import { ConfigContextController } from "./ConfigContextController";
+import { EnterpriseContextController } from "./EnterpriseContextController";
 
-type AkInterface = HTMLElement & {
+export type AkInterface = HTMLElement & {
     getTheme: () => Promise<UiThemeEnum>;
     brand?: CurrentBrand;
     uiConfig?: UIConfig;
     config?: Config;
 };
 
+const brandContext = Symbol("brandContext");
+const configContext = Symbol("configContext");
+
 export class Interface extends AKElement implements AkInterface {
     @state()
     uiConfig?: UIConfig;
 
-    _configContext = new ContextProvider(this, {
-        context: authentikConfigContext,
-        initialValue: undefined,
-    });
+    [brandContext]!: BrandContextController;
 
-    _config?: Config;
+    [configContext]!: ConfigContextController;
 
     @state()
-    set config(c: Config) {
-        this._config = c;
-        this._configContext.setValue(c);
-        this.requestUpdate();
-    }
-
-    get config(): Config | undefined {
-        return this._config;
-    }
-
-    _brandContext = new ContextProvider(this, {
-        context: authentikBrandContext,
-        initialValue: undefined,
-    });
-
-    _brand?: CurrentBrand;
+    config?: Config;
 
     @state()
-    set brand(c: CurrentBrand) {
-        this._brand = c;
-        this._brandContext.setValue(c);
-        this.requestUpdate();
-    }
-
-    get brand(): CurrentBrand | undefined {
-        return this._brand;
-    }
+    brand?: CurrentBrand;
 
     constructor() {
         super();
         document.adoptedStyleSheets = [...document.adoptedStyleSheets, ensureCSSStyleSheet(PFBase)];
-        brand().then((brand) => (this.brand = brand));
-        config().then((config) => (this.config = config));
-
+        this[brandContext] = new BrandContextController(this);
+        this[configContext] = new ConfigContextController(this);
         this.dataset.akInterfaceRoot = "true";
     }
 
@@ -88,37 +58,20 @@ export class Interface extends AKElement implements AkInterface {
     }
 }
 
-export class EnterpriseAwareInterface extends Interface {
-    _licenseSummaryContext = new ContextProvider(this, {
-        context: authentikEnterpriseContext,
-        initialValue: undefined,
-    });
+export type AkEnterpriseInterface = AkInterface & {
+    licenseSummary?: LicenseSummary;
+};
 
-    _licenseSummary?: LicenseSummary;
+const enterpriseContext = Symbol("enterpriseContext");
 
-    @state()
-    set licenseSummary(c: LicenseSummary) {
-        this._licenseSummary = c;
-        this._licenseSummaryContext.setValue(c);
-        this.requestUpdate();
-    }
+export class EnterpriseAwareInterface extends Interface {
+    [enterpriseContext]!: EnterpriseContextController;
 
-    get licenseSummary(): LicenseSummary | undefined {
-        return this._licenseSummary;
-    }
+    @state()
+    licenseSummary?: LicenseSummary;
 
     constructor() {
         super();
-        const refreshStatus = () => {
-            new EnterpriseApi(DEFAULT_CONFIG)
-                .enterpriseLicenseSummaryRetrieve()
-                .then((enterprise) => {
-                    this.licenseSummary = enterprise;
-                });
-        };
-        refreshStatus();
-        window.addEventListener(EVENT_REFRESH_ENTERPRISE, () => {
-            refreshStatus();
-        });
+        this[enterpriseContext] = new EnterpriseContextController(this);
     }
 }