habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Fix issues surrounding availability of controllers during init.

Browse Source
This commit is contained in:
Teffen Ellis
2025-05-21 15:48:52 +02:00
parent 5fed8ca575
commit 95ee88c946
39 changed files with 579 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/admin/AdminInterface/AboutModal.ts
View File

@ -1,9 +1,8 @@
import { WithLicenseSummary } from "#elements/Interface/licenseSummaryProvider";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { globalAK } from "@goauthentik/common/global";
import { DefaultBrand } from "@goauthentik/common/ui/config";
import "@goauthentik/elements/EmptyState";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider";
import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
import { msg } from "@lit/localize";
@ -57,7 +56,8 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton))
}
renderModal() {
let product = globalAK().brand.brandingTitle || DefaultBrand.brandingTitle;
let product = this.brandingTitle;
if (this.licenseSummary.status !== LicenseSummaryStatusEnum.Unlicensed) {
product += ` ${msg("Enterprise")}`;
}
@ -73,7 +73,7 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton))
<div class="pf-c-about-modal-box__brand">
<img
class="pf-c-about-modal-box__brand-image"
src=${this.brand?.brandingFavicon ?? DefaultBrand.brandingFavicon}
src=${this.brand.brandingFavicon}
alt="${msg("authentik Logo")}"
/>
</div>

16
web/src/admin/AdminInterface/index.entrypoint.ts
View File

@ -1,9 +1,13 @@
import "#admin/AdminInterface/AboutModal";
import type { AboutModal } from "#admin/AdminInterface/AboutModal";
import { ROUTES } from "#admin/Routes";
import { EVENT_API_DRAWER_TOGGLE, EVENT_NOTIFICATION_DRAWER_TOGGLE } from "#common/constants";
import { configureSentry } from "#common/sentry/index";
import { me } from "#common/users";
import { WebsocketClient } from "#common/ws";
import { AuthenticatedInterface } from "#elements/Interface/Interface";
import { WithLicenseSummary } from "#elements/Interface/licenseSummaryProvider";
import { SidebarToggleEventDetail } from "#components/ak-page-header";
import { AuthenticatedInterface } from "#elements/AuthenticatedInterface";
import { WithCapabilitiesConfig } from "#elements/Interface/capabilitiesProvider";
import "#elements/ak-locale-context/ak-locale-context";
import "#elements/banner/EnterpriseStatusBanner";
import "#elements/banner/EnterpriseStatusBanner";
@ -17,10 +21,6 @@ import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
import "#elements/router/RouterOutlet";
import "#elements/sidebar/Sidebar";
import "#elements/sidebar/SidebarItem";
import "@goauthentik/admin/AdminInterface/AboutModal";
import type { AboutModal } from "@goauthentik/admin/AdminInterface/AboutModal";
import { ROUTES } from "@goauthentik/admin/Routes";
import { SidebarToggleEventDetail } from "@goauthentik/components/ak-page-header.js";
import { CSSResult, TemplateResult, css, html, nothing } from "lit";
import { customElement, eventOptions, property, query } from "lit/decorators.js";
@ -45,7 +45,7 @@ if (process.env.NODE_ENV === "development") {
}
@customElement("ak-interface-admin")
export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterface) {
//#region Properties
@property({ type: Boolean })
@ -202,7 +202,7 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
<ak-sidebar class="${classMap(sidebarClasses)}">
${renderSidebarItems(AdminSidebarEntries)}
${this.config?.capabilities.includes(CapabilitiesEnum.IsEnterprise)
${this.can(CapabilitiesEnum.IsEnterprise)
? renderSidebarItems(AdminSidebarEnterpriseEntries)
: nothing}
</ak-sidebar>

9
web/src/admin/applications/ApplicationForm.ts
View File

@ -1,3 +1,4 @@
import { CapabilitiesEnum, WithCapabilitiesConfig } from "#elements/Interface/capabilitiesProvider";
import "@goauthentik/admin/applications/ProviderSelectModal";
import { iconHelperText } from "@goauthentik/admin/helperText";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
@ -6,18 +7,14 @@ import "@goauthentik/components/ak-radio-input";
import "@goauthentik/components/ak-switch-input";
import "@goauthentik/components/ak-text-input";
import "@goauthentik/components/ak-textarea-input";
import "@goauthentik/elements/Alert.js";
import {
CapabilitiesEnum,
WithCapabilitiesConfig,
} from "@goauthentik/elements/Interface/capabilitiesProvider";
import "@goauthentik/elements/Alert";
import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement";
import "@goauthentik/elements/forms/ModalForm";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/ProxyForm";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import "@goauthentik/elements/forms/SearchSelect/ak-search-select";
import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
import { msg } from "@lit/localize";

10
web/src/admin/applications/ApplicationListPage.ts
View File

@ -1,10 +1,10 @@
import "@goauthentik/admin/applications/ApplicationForm";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import MDApplication from "@goauthentik/docs/add-secure-apps/applications/index.md";
import "@goauthentik/elements/AppIcon.js";
import "@goauthentik/elements/AppIcon";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
import "@goauthentik/elements/ak-mdx";
import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/ak-mdx/ak-mdx";
import "@goauthentik/elements/buttons/SpinnerButton/ak-spinner-button";
import "@goauthentik/elements/forms/DeleteBulkForm";
import "@goauthentik/elements/forms/ModalForm";
import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
@ -22,7 +22,7 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
import { Application, CoreApi, PoliciesApi } from "@goauthentik/api";
import "./ApplicationWizardHint";
import "./ApplicationWizardHint.js";
export const applicationListStyle = css`
/* Fix alignment issues with images in tables */
@ -50,7 +50,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
}
pageDescription(): string {
return msg(
str`External applications that use ${this.brand?.brandingTitle ?? "authentik"} as an identity provider via protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access.`,
str`External applications that use ${this.brandingTitle} as an identity provider via protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access.`,
);
}
pageIcon(): string {

2
web/src/admin/groups/RelatedUserList.ts
View File

@ -295,7 +295,7 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
${msg("Set password")}
</button>
</ak-forms-modal>
${this.brand?.flowRecovery
${this.brand.flowRecovery
? html`
<ak-action-button
class="pf-m-secondary"

2
web/src/admin/users/UserListPage.ts
View File

@ -11,10 +11,10 @@ import { parseAPIResponseError } from "@goauthentik/common/errors/network";
import { userTypeToLabel } from "@goauthentik/common/labels";
import { MessageLevel } from "@goauthentik/common/messages";
import { formatElapsedTime } from "@goauthentik/common/temporal";
import { rootInterface } from "@goauthentik/common/theme";
import { DefaultUIConfig, uiConfig } from "@goauthentik/common/ui/config";
import { me } from "@goauthentik/common/users";
import "@goauthentik/components/ak-status-label";
import { rootInterface } from "@goauthentik/elements/Base";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
import {
CapabilitiesEnum,

1
web/src/common/constants.ts
View File

@ -18,7 +18,6 @@ export const CURRENT_CLASS = "pf-m-current";
//#region Application
export const TITLE_DEFAULT = "authentik";
/**
* The delimiter used to parse the URL for the current route.
*

24
web/src/common/errors/network.ts
View File

@ -26,8 +26,12 @@ export const HTTPStatusCodeTransformer: Record<number, HTTPErrorJSONTransformer>
[HTTPStatusCode.Forbidden]: GenericErrorFromJSON,
} as const;
//#endregion
//#region Type Predicates
/**
* Type guard to check if a response contains a JSON body.
* Type predicate to check if a response contains a JSON body.
*
* This is useful to guard against parsing errors when attempting to read the response body.
*/
@ -35,6 +39,24 @@ export function isJSONResponse(response: Response): boolean {
return Boolean(response.headers.get("content-type")?.includes("application/json"));
}
/**
* An error originating from an aborted request.
*
* @see {@linkcode isAbortError} to check if an error originates from an aborted request.
*/
export interface AbortErrorLike extends DOMException {
name: "AbortError";
}
/**
* Type predicate to check if an error originates from an aborted request.
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort | MDN}
*/
export function isAbortError(error: unknown): error is AbortErrorLike {
return error instanceof DOMException && error.name === "AbortError";
}
//#endregion
//#region API

41
web/src/common/theme.ts
View File

@ -1,14 +1,17 @@
/**
* @file Theme utilities.
*/
import { type StyleRoot, createStyleSheetUnsafe, setAdoptedStyleSheets } from "#common/stylesheets";
import { UIConfig } from "#common/ui/config";
import {
type StyleRoot,
createStyleSheetUnsafe,
setAdoptedStyleSheets,
} from "@goauthentik/common/stylesheets";
import AKBase from "#common/styles/authentik.css";
import AKBaseDark from "#common/styles/theme-dark.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { Config, CurrentBrand, UiThemeEnum } from "@goauthentik/api";
import { UiThemeEnum } from "@goauthentik/api";
//#region Stylesheet Exports
@ -259,6 +262,8 @@ export function applyUITheme(
export function applyDocumentTheme(hint: CSSColorSchemeValue | UIThemeHint = "auto"): void {
const preferredColorScheme = formatColorScheme(hint);
if (document.documentElement.dataset.theme === preferredColorScheme) return;
const applyStyleSheets: UIThemeListener = (currentUITheme) => {
console.debug(`authentik/theme (document): switching to ${currentUITheme} theme`);
@ -285,36 +290,20 @@ export function applyDocumentTheme(hint: CSSColorSchemeValue | UIThemeHint = "au
applyStyleSheets(preferredColorScheme);
}
/**
* An element that can be themed.
*/
export interface ThemedElement extends HTMLElement {
/**
* The brand information for the current theme.
*/
readonly brand?: CurrentBrand;
/**
* The UI configuration for the current theme,
* typically injected through a Lit Mixin.
*
* @see {@linkcode UIConfig} for details.
*/
readonly uiConfig?: UIConfig;
/**
* An authentik configuration initially provided by the server.
*/
readonly config?: Config;
activeTheme: ResolvedUITheme;
}
/**
* Returns the root interface element of the page.
*
* @todo Can this be handled with a Lit Mixin?
*/
export function rootInterface<T extends ThemedElement = ThemedElement>(): T | null {
export function rootInterface<T extends HTMLElement = HTMLElement>(): T {
const element = document.body.querySelector<T>("[data-ak-interface-root]");
if (!element) {
throw new Error(
`Could not find root interface element. Was this element added before the parent interface element?`,
);
}
return element;
}

9
web/src/components/ak-page-navbar.ts
View File

@ -1,7 +1,6 @@
import { EVENT_WS_MESSAGE, TITLE_DEFAULT } from "#common/constants";
import { EVENT_WS_MESSAGE } from "#common/constants";
import { globalAK } from "#common/global";
import { UIConfig, UserDisplay, getConfigForUser } from "#common/ui/config";
import { DefaultBrand } from "#common/ui/config";
import { me } from "#common/users";
import "#components/ak-nav-buttons";
import type { PageHeaderInit, SidebarToggleEventDetail } from "#components/ak-page-header";
@ -290,7 +289,7 @@ export class AKPageNavbar
//#region Private Methods
#setTitle(header?: string) {
let title = this.brand?.brandingTitle || TITLE_DEFAULT;
let title = this.brandingTitle;
if (isAdminRoute()) {
title = `${msg("Admin")} - ${title}`;
@ -368,9 +367,7 @@ export class AKPageNavbar
<a href="#/">
<div class="logo">
<img
src=${themeImage(
this.brand?.brandingLogo ?? DefaultBrand.brandingLogo,
)}
src=${themeImage(this.brandingLogo)}
alt="${msg("authentik Logo")}"
loading="lazy"
/>

12
web/src/elements/AuthenticatedInterface.ts Normal file
View File

@ -0,0 +1,12 @@
import { LicenseContextController } from "#elements/Interface/EnterpriseContextController";
import { VersionContextController } from "#elements/Interface/VersionContextController";
import { Interface } from "@goauthentik/elements/Interface";
export class AuthenticatedInterface extends Interface {
constructor() {
super();
this.addController(new LicenseContextController(this));
this.addController(new VersionContextController(this));
}
}

17
web/src/elements/AuthentikContexts.ts
View File

@ -1,17 +0,0 @@
import { createContext } from "@lit/context";
import type { Config, CurrentBrand, LicenseSummary, SessionUser, Version } 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"),
);
export const authentikBrandContext = createContext<CurrentBrand>(Symbol("authentik-brand-context"));
export const authentikVersionContext = createContext<Version>(Symbol("authentik-version-context"));
export default authentikConfigContext;

16
web/src/elements/Base.ts
View File

@ -1,19 +1,14 @@
import { globalAK } from "@goauthentik/common/global.js";
import {
StyleRoot,
createCSSResult,
createStyleSheetUnsafe,
} from "@goauthentik/common/stylesheets.js";
import { globalAK } from "#common/global";
import { StyleRoot, createCSSResult, createStyleSheetUnsafe } from "#common/stylesheets";
import {
$AKBase,
CSSColorSchemeValue,
ResolvedUITheme,
ThemedElement,
applyUITheme,
createUIThemeEffect,
formatColorScheme,
resolveUITheme,
} from "@goauthentik/common/theme.js";
} from "#common/theme";
import { localized } from "@lit/localize";
import { CSSResult, CSSResultGroup, CSSResultOrNative, LitElement } from "lit";
@ -21,11 +16,8 @@ import { property } from "lit/decorators.js";
import { UiThemeEnum } from "@goauthentik/api";
// Re-export the theme helpers
export { rootInterface } from "@goauthentik/common/theme";
@localized()
export class AKElement extends LitElement implements ThemedElement {
export class AKElement extends LitElement {
//#region Static Properties
public static styles?: Array<CSSResult | CSSModule>;

33
web/src/elements/Interface.ts Normal file
View File

@ -0,0 +1,33 @@
import { BrandingContextController } from "#elements/Interface/BrandContextController";
import { ConfigContextController } from "#elements/Interface/ConfigContextController";
import { WithAuthentikConfig } from "#elements/Interface/authentikConfigProvider";
import { globalAK } from "@goauthentik/common/global";
import { applyDocumentTheme } from "@goauthentik/common/theme";
import { AKElement } from "@goauthentik/elements/Base";
import { ModalOrchestrationController } from "@goauthentik/elements/controllers/ModalOrchestrationController";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
/**
* The base interface element for the application.
*/
export abstract class Interface extends WithAuthentikConfig(AKElement) {
static styles = [PFBase];
constructor() {
super();
const { config, brand } = globalAK();
applyDocumentTheme(brand.uiTheme);
this.addController(new ConfigContextController(this, config));
this.addController(new BrandingContextController(this, brand));
this.addController(new ModalOrchestrationController());
}
public connectedCallback(): void {
super.connectedCallback();
this.dataset.akInterfaceRoot = this.tagName.toLowerCase();
}
}

80
web/src/elements/Interface/BrandContextController.ts
View File

@ -1,50 +1,74 @@
import { BrandingContext, BrandingMixin } from "#elements/Interface/brandProvider";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { ThemedElement } from "@goauthentik/common/theme";
import { authentikBrandContext } from "@goauthentik/elements/AuthentikContexts";
import type { ReactiveElementHost } from "@goauthentik/elements/types.js";
import { isAbortError } from "@goauthentik/common/errors/network";
import type { ReactiveElementHost } from "@goauthentik/elements/types";
import { ContextProvider } from "@lit/context";
import { Context, ContextProvider } from "@lit/context";
import type { ReactiveController } from "lit";
import type { CurrentBrand } from "@goauthentik/api";
import { CoreApi } from "@goauthentik/api";
export class BrandContextController implements ReactiveController {
host!: ReactiveElementHost<ThemedElement>;
export class BrandingContextController implements ReactiveController {
#log = console.debug.bind(console, `authentik/controller/branding`);
#abortController: null | AbortController = null;
context!: ContextProvider<{ __context__: CurrentBrand | undefined }>;
#host: ReactiveElementHost<BrandingMixin>;
#context: ContextProvider<Context<unknown, CurrentBrand>>;
constructor(host: ReactiveElementHost<ThemedElement>) {
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;
constructor(host: ReactiveElementHost<BrandingMixin>, initialValue: CurrentBrand) {
this.#host = host;
this.#context = new ContextProvider(this.#host, {
context: BrandingContext,
initialValue,
});
}
hostConnected() {
window.addEventListener(EVENT_REFRESH, this.fetch);
#fetch = () => {
this.#log("Fetching configuration...");
this.#abortController?.abort();
this.#abortController = new AbortController();
return new CoreApi(DEFAULT_CONFIG)
.coreBrandsCurrentRetrieve({
signal: this.#abortController.signal,
})
.then((brand) => {
this.#context.setValue(brand);
this.#host.brand = brand;
})
.catch((error: unknown) => {
if (isAbortError(error)) {
this.#log("Aborted fetching brand");
return;
}
throw error;
})
.finally(() => {
this.#abortController = null;
});
};
public hostConnected() {
window.addEventListener(EVENT_REFRESH, this.#fetch);
this.#fetch();
}
hostDisconnected() {
window.removeEventListener(EVENT_REFRESH, this.fetch);
public hostDisconnected() {
window.removeEventListener(EVENT_REFRESH, this.#fetch);
this.#abortController?.abort();
}
hostUpdate() {
public 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);
if (this.#host.brand && this.#host.brand !== this.#context.value) {
this.#context.setValue(this.#host.brand);
}
}
}

90
web/src/elements/Interface/ConfigContextController.ts
View File

@ -1,55 +1,79 @@
import { AKConfigMixin, AuthentikConfigContext } from "#elements/Interface/authentikConfigProvider";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { globalAK } from "@goauthentik/common/global";
import { ThemedElement } from "@goauthentik/common/theme";
import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts";
import type { ReactiveElementHost } from "@goauthentik/elements/types.js";
import { isAbortError } from "@goauthentik/common/errors/network";
import type { ReactiveElementHost } from "@goauthentik/elements/types";
import { ContextProvider } from "@lit/context";
import { Context, ContextProvider } from "@lit/context";
import type { ReactiveController } from "lit";
import type { Config } from "@goauthentik/api";
import { RootApi } from "@goauthentik/api";
import { Config, RootApi } from "@goauthentik/api";
/**
* A controller that provides the application configuration to the element.
*/
export class ConfigContextController implements ReactiveController {
host!: ReactiveElementHost<ThemedElement>;
#log = console.debug.bind(console, `authentik/controller/config`);
#abortController: null | AbortController = null;
context!: ContextProvider<{ __context__: Config | undefined }>;
#host: ReactiveElementHost<AKConfigMixin>;
#context: ContextProvider<Context<unknown, Config>>;
constructor(host: ReactiveElementHost<ThemedElement>) {
this.host = host;
this.context = new ContextProvider(this.host, {
context: authentikConfigContext,
initialValue: undefined,
constructor(host: ReactiveElementHost<AKConfigMixin>, initialValue: Config) {
this.#host = host;
this.#context = new ContextProvider(this.#host, {
context: AuthentikConfigContext,
initialValue,
});
// Pre-hydrate from template-embedded config
this.context.setValue(globalAK().config);
this.host.config = globalAK().config;
this.fetch = this.fetch.bind(this);
this.fetch();
this.#host.authentikConfig = initialValue;
}
fetch() {
new RootApi(DEFAULT_CONFIG).rootConfigRetrieve().then((config) => {
this.context.setValue(config);
this.host.config = config;
});
#fetch = () => {
this.#log("Fetching configuration...");
this.#abortController?.abort();
this.#abortController = new AbortController();
return new RootApi(DEFAULT_CONFIG)
.rootConfigRetrieve({
signal: this.#abortController.signal,
})
.then((authentikConfig) => {
this.#context.setValue(authentikConfig);
this.#host.authentikConfig = authentikConfig;
})
.catch((error: unknown) => {
if (isAbortError(error)) {
this.#log("Aborted fetching configuration");
return;
}
throw error;
})
.finally(() => {
this.#abortController = null;
});
};
public hostConnected() {
window.addEventListener(EVENT_REFRESH, this.#fetch);
this.#fetch();
}
hostConnected() {
window.addEventListener(EVENT_REFRESH, this.fetch);
public hostDisconnected() {
window.removeEventListener(EVENT_REFRESH, this.#fetch);
this.#abortController?.abort();
}
hostDisconnected() {
window.removeEventListener(EVENT_REFRESH, this.fetch);
}
hostUpdate() {
public 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);
if (this.#host.authentikConfig && this.#host.authentikConfig !== this.#context.value) {
this.#context.setValue(this.#host.authentikConfig);
}
}
}

87
web/src/elements/Interface/EnterpriseContextController.ts
View File

@ -1,52 +1,77 @@
import { LicenseContext, LicenseMixin } from "#elements/Interface/licenseSummaryProvider";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { EVENT_REFRESH_ENTERPRISE } from "@goauthentik/common/constants";
import { authentikEnterpriseContext } from "@goauthentik/elements/AuthentikContexts";
import type { ReactiveElementHost } from "@goauthentik/elements/types.js";
import { isAbortError } from "@goauthentik/common/errors/network";
import type { ReactiveElementHost } from "@goauthentik/elements/types";
import { ContextProvider } from "@lit/context";
import { Context, ContextProvider } from "@lit/context";
import type { ReactiveController } from "lit";
import type { LicenseSummary } from "@goauthentik/api";
import { EnterpriseApi } from "@goauthentik/api";
import { EnterpriseApi, LicenseSummary } from "@goauthentik/api";
import type { AkAuthenticatedInterface } from "./Interface";
export class LicenseContextController implements ReactiveController {
#log = console.debug.bind(console, `authentik/controller/license`);
#abortController: null | AbortController = null;
export class EnterpriseContextController implements ReactiveController {
host!: ReactiveElementHost<AkAuthenticatedInterface>;
#host: ReactiveElementHost<LicenseMixin>;
#context: ContextProvider<Context<unknown, LicenseSummary>>;
context!: ContextProvider<{ __context__: LicenseSummary | undefined }>;
constructor(host: ReactiveElementHost<AkAuthenticatedInterface>) {
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;
constructor(host: ReactiveElementHost<LicenseMixin>, initialValue?: LicenseSummary) {
this.#host = host;
this.#context = new ContextProvider(this.#host, {
context: LicenseContext,
initialValue: initialValue,
});
}
hostConnected() {
window.addEventListener(EVENT_REFRESH_ENTERPRISE, this.fetch);
#fetch = () => {
this.#log("Fetching license summary...");
this.#abortController?.abort();
this.#abortController = new AbortController();
return new EnterpriseApi(DEFAULT_CONFIG)
.enterpriseLicenseSummaryRetrieve(
{},
{
signal: this.#abortController.signal,
},
)
.then((enterprise) => {
this.#context.setValue(enterprise);
this.#host.licenseSummary = enterprise;
})
.catch((error: unknown) => {
if (isAbortError(error)) {
this.#log("Aborted fetching license summary");
return;
}
throw error;
})
.finally(() => {
this.#abortController = null;
});
};
public hostConnected() {
window.addEventListener(EVENT_REFRESH_ENTERPRISE, this.#fetch);
this.#fetch();
}
hostDisconnected() {
window.removeEventListener(EVENT_REFRESH_ENTERPRISE, this.fetch);
public hostDisconnected() {
window.removeEventListener(EVENT_REFRESH_ENTERPRISE, this.#fetch);
this.#abortController?.abort();
}
hostUpdate() {
public 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);
if (this.#host.licenseSummary && this.#host.licenseSummary !== this.#context.value) {
this.#context.setValue(this.#host.licenseSummary);
}
}
}

85
web/src/elements/Interface/Interface.ts
View File

@ -1,85 +0,0 @@
import { globalAK } from "@goauthentik/common/global.js";
import { ThemedElement, applyDocumentTheme } from "@goauthentik/common/theme.js";
import { UIConfig } from "@goauthentik/common/ui/config.js";
import { AKElement } from "@goauthentik/elements/Base.js";
import { VersionContextController } from "@goauthentik/elements/Interface/VersionContextController.js";
import { ModalOrchestrationController } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
import { state } from "lit/decorators.js";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import {
type Config,
type CurrentBrand,
type LicenseSummary,
type Version,
} from "@goauthentik/api";
import { BrandContextController } from "./BrandContextController.js";
import { ConfigContextController } from "./ConfigContextController.js";
import { EnterpriseContextController } from "./EnterpriseContextController.js";
const configContext = Symbol("configContext");
const modalController = Symbol("modalController");
const versionContext = Symbol("versionContext");
export abstract class LightInterface extends AKElement implements ThemedElement {
constructor() {
super();
this.dataset.akInterfaceRoot = this.tagName.toLowerCase();
if (!document.documentElement.dataset.theme) {
applyDocumentTheme(globalAK().brand.uiTheme);
}
}
}
export abstract class Interface extends LightInterface implements ThemedElement {
static styles = [PFBase];
protected [configContext]: ConfigContextController;
protected [modalController]: ModalOrchestrationController;
@state()
public config?: Config;
@state()
public brand?: CurrentBrand;
constructor() {
super();
this.addController(new BrandContextController(this));
this[configContext] = new ConfigContextController(this);
this[modalController] = new ModalOrchestrationController(this);
}
}
export interface AkAuthenticatedInterface extends ThemedElement {
licenseSummary?: LicenseSummary;
version?: Version;
}
const enterpriseContext = Symbol("enterpriseContext");
export class AuthenticatedInterface extends Interface implements AkAuthenticatedInterface {
[enterpriseContext]!: EnterpriseContextController;
[versionContext]!: VersionContextController;
@state()
public uiConfig?: UIConfig;
@state()
public licenseSummary?: LicenseSummary;
@state()
public version?: Version;
constructor() {
super();
this[enterpriseContext] = new EnterpriseContextController(this);
this[versionContext] = new VersionContextController(this);
}
}

79
web/src/elements/Interface/VersionContextController.ts
View File

@ -1,51 +1,74 @@
import { VersionContext, VersionMixin } from "#elements/Interface/versionProvider";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { authentikVersionContext } from "@goauthentik/elements/AuthentikContexts";
import type { ReactiveElementHost } from "@goauthentik/elements/types.js";
import { isAbortError } from "@goauthentik/common/errors/network";
import type { ReactiveElementHost } from "@goauthentik/elements/types";
import { ContextProvider } from "@lit/context";
import { Context, ContextProvider } from "@lit/context";
import type { ReactiveController } from "lit";
import type { Version } from "@goauthentik/api";
import { AdminApi } from "@goauthentik/api";
import type { AkAuthenticatedInterface } from "./Interface";
export class VersionContextController implements ReactiveController {
host!: ReactiveElementHost<AkAuthenticatedInterface>;
#log = console.debug.bind(console, `authentik/controller/version`);
#abortController: null | AbortController = null;
context!: ContextProvider<{ __context__: Version | undefined }>;
#host: ReactiveElementHost<VersionMixin>;
#context: ContextProvider<Context<unknown, Version>>;
constructor(host: ReactiveElementHost<AkAuthenticatedInterface>) {
this.host = host;
this.context = new ContextProvider(this.host, {
context: authentikVersionContext,
initialValue: undefined,
});
this.fetch = this.fetch.bind(this);
this.fetch();
}
fetch() {
new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve().then((version) => {
this.context.setValue(version);
this.host.version = version;
constructor(host: ReactiveElementHost<VersionMixin>, initialValue?: Version) {
this.#host = host;
this.#context = new ContextProvider(this.#host, {
context: VersionContext,
initialValue,
});
}
hostConnected() {
window.addEventListener(EVENT_REFRESH, this.fetch);
#fetch = () => {
this.#log("Fetching latest version...");
this.#abortController?.abort();
this.#abortController = new AbortController();
return new AdminApi(DEFAULT_CONFIG)
.adminVersionRetrieve({
signal: this.#abortController.signal,
})
.then((version) => {
this.#context.setValue(version);
this.#host.version = version;
})
.catch((error: unknown) => {
if (isAbortError(error)) {
this.#log("Aborted fetching license summary");
return;
}
throw error;
})
.finally(() => {
this.#abortController = null;
});
};
public hostConnected() {
window.addEventListener(EVENT_REFRESH, this.#fetch);
this.#fetch();
}
hostDisconnected() {
window.removeEventListener(EVENT_REFRESH, this.fetch);
public hostDisconnected() {
window.removeEventListener(EVENT_REFRESH, this.#fetch);
this.#abortController?.abort();
}
hostUpdate() {
public hostUpdate() {
// If the Interface changes its version information for some reason,
// we should notify all users of the context of that change. doesn't
if (this.host.version !== this.context.value) {
this.context.setValue(this.host.version);
if (this.#host.version && this.#host.version !== this.#context.value) {
this.#context.setValue(this.#host.version);
}
}
}

17
web/src/elements/Interface/authentikConfigProvider.ts
View File

@ -1,12 +1,23 @@
import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts";
import { createMixin } from "@goauthentik/elements/types";
import { consume } from "@lit/context";
import { consume, createContext } from "@lit/context";
import type { Config } from "@goauthentik/api";
/**
* The Lit context for the application configuration.
*
* @category Context
* @see {@linkcode AKConfigMixin}
* @see {@linkcode WithAuthentikConfig}
*/
export const AuthentikConfigContext = createContext<Config>(Symbol("authentik-config-context"));
/**
* A consumer that provides the application configuration to the element.
*
* @category Mixin
* @see {@linkcode WithAuthentikConfig}
*/
export interface AKConfigMixin {
/**
@ -33,7 +44,7 @@ export const WithAuthentikConfig = createMixin<AKConfigMixin>(
}) => {
abstract class AKConfigProvider extends SuperClass implements AKConfigMixin {
@consume({
context: authentikConfigContext,
context: AuthentikConfigContext,
subscribe,
})
public readonly authentikConfig!: Readonly<Config>;

45
web/src/elements/Interface/brandProvider.ts
View File

@ -1,19 +1,34 @@
import { authentikBrandContext } from "@goauthentik/elements/AuthentikContexts";
import { DefaultBrand } from "@goauthentik/common/ui/config";
import { createMixin } from "@goauthentik/elements/types";
import { consume } from "@lit/context";
import { consume, createContext } from "@lit/context";
import { state } from "lit/decorators.js";
import type { CurrentBrand } from "@goauthentik/api";
/**
* A mixin that provides the current brand to the element.
* The Lit context for application branding.
*
* @category Context
* @see {@linkcode BrandingMixin}
* @see {@linkcode WithBrandConfig}
*/
export interface StyleBrandMixin {
export const BrandingContext = createContext<CurrentBrand>(Symbol("authentik-branding-context"));
/**
* A mixin that provides the current brand to the element.
*
* @see {@linkcode WithBrandConfig}
*/
export interface BrandingMixin {
/**
* The current style branding configuration.
*/
brand: CurrentBrand;
readonly brand: Readonly<CurrentBrand>;
readonly brandingTitle: string;
readonly brandingLogo: string;
readonly brandingFavicon: string;
}
/**
@ -23,7 +38,7 @@ export interface StyleBrandMixin {
*
* @see {@link https://lit.dev/docs/composition/mixins/#mixins-in-typescript | Lit Mixins}
*/
export const WithBrandConfig = createMixin<StyleBrandMixin>(
export const WithBrandConfig = createMixin<BrandingMixin>(
({
/**
* The superclass constructor to extend.
@ -34,15 +49,27 @@ export const WithBrandConfig = createMixin<StyleBrandMixin>(
*/
subscribe = true,
}) => {
abstract class StyleBrandProvider extends SuperClass implements StyleBrandMixin {
abstract class BrandingProvider extends SuperClass implements BrandingMixin {
@consume({
context: authentikBrandContext,
context: BrandingContext,
subscribe,
})
@state()
public brand!: CurrentBrand;
public get brandingTitle(): string {
return this.brand.brandingTitle || DefaultBrand.brandingTitle;
}
public get brandingLogo(): string {
return this.brand.brandingLogo || DefaultBrand.brandingLogo;
}
public get brandingFavicon(): string {
return this.brand.brandingFavicon || DefaultBrand.brandingFavicon;
}
}
return StyleBrandProvider;
return BrandingProvider;
},
);

30
web/src/elements/Interface/capabilitiesProvider.ts
View File

@ -1,10 +1,7 @@
import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts";
import { AKConfigMixin } from "#elements/Interface/authentikConfigProvider";
import { createMixin } from "@goauthentik/elements/types";
import { consume } from "@lit/context";
import { CapabilitiesEnum } from "@goauthentik/api";
import { Config } from "@goauthentik/api";
/**
* A consumer that provides the capability methods to the element.
@ -22,13 +19,6 @@ export interface CapabilitiesMixin {
): boolean;
}
/**
* Lexically-scoped symbol for the capabilities configuration.
*
* @internal
*/
const kCapabilitiesConfig: unique symbol = Symbol("capabilitiesConfig");
/**
* A mixin that provides the capability methods to the element.
*
@ -37,14 +27,14 @@ const kCapabilitiesConfig: unique symbol = Symbol("capabilitiesConfig");
* After importing, simply mixin this function:
*
* ```ts
* export class AkMyNiftyNewFeature extends withCapabilitiesContext(AKElement) {
* export class AkMyNiftyNewFeature extends WithCapabilitiesConfig(AKElement) {
* }
* ```
*
* And then if you need to check on a capability:
*
* ```ts
* if (this.can(CapabilitiesEnum.IsEnterprise) { ... }
* if (this.can(CapabilitiesEnum.IsEnterprise)) { ... }
* ```
*
*
@ -53,21 +43,15 @@ const kCapabilitiesConfig: unique symbol = Symbol("capabilitiesConfig");
* @category Mixin
*
*/
export const WithCapabilitiesConfig = createMixin<CapabilitiesMixin>(
({ SuperClass, subscribe = true }) => {
export const WithCapabilitiesConfig = createMixin<CapabilitiesMixin, AKConfigMixin>(
({ SuperClass }) => {
abstract class CapabilitiesProvider extends SuperClass implements CapabilitiesMixin {
@consume({
context: authentikConfigContext,
subscribe,
})
private readonly [kCapabilitiesConfig]: Config | undefined;
public can(capability: CapabilitiesEnum) {
const config = this[kCapabilitiesConfig];
const config = this.authentikConfig;
if (!config) {
throw new Error(
"ConfigContext: Attempted to access site configuration before initialization.",
`ConfigContext: Attempted to check capability "${capability}" before initialization. Does the element have the AuthentikConfigMixin applied?`,
);
}

4
web/src/elements/Interface/index.ts
View File

@ -1,4 +0,0 @@
import { AuthenticatedInterface, Interface, LightInterface } from "./Interface";
export { Interface, AuthenticatedInterface, LightInterface };
export default Interface;

7
web/src/elements/Interface/licenseSummaryProvider.ts
View File

@ -1,10 +1,11 @@
import { authentikEnterpriseContext } from "@goauthentik/elements/AuthentikContexts";
import { createMixin } from "@goauthentik/elements/types";
import { consume } from "@lit/context";
import { consume, createContext } from "@lit/context";
import { type LicenseSummary, LicenseSummaryStatusEnum } from "@goauthentik/api";
export const LicenseContext = createContext<LicenseSummary>(Symbol("authentik-license-context"));
/**
* A consumer that provides license information to the element.
*/
@ -26,7 +27,7 @@ export interface LicenseMixin {
export const WithLicenseSummary = createMixin<LicenseMixin>(({ SuperClass, subscribe = true }) => {
abstract class LicenseProvider extends SuperClass implements LicenseMixin {
@consume({
context: authentikEnterpriseContext,
context: LicenseContext,
subscribe,
})
public readonly licenseSummary!: LicenseSummary;

72
web/src/elements/Interface/versionProvider.ts
View File

@ -1,35 +1,61 @@
import { authentikVersionContext } from "@goauthentik/elements/AuthentikContexts";
import { createMixin } from "@goauthentik/elements/types";
import { consume } from "@lit/context";
import { Constructor } from "@lit/reactive-element/decorators/base.js";
import type { LitElement } from "lit";
import { consume, createContext } from "@lit/context";
import { state } from "lit/decorators.js";
import type { Version } from "@goauthentik/api";
/**
* A consumer that provides version information to the element.
* The Lit context for application branding.
*
* @category Context
* @see {@linkcode VersionMixin}
* @see {@linkcode WithVersion}
*/
export declare class VersionConsumer {
export const VersionContext = createContext<Version>(Symbol("authentik-version-context"));
/**
* A mixin that provides the current version to the element.
*
* @see {@linkcode WithVersion}
*/
export interface VersionMixin {
/**
* The current version of the application.
*
* @format semver
*/
public readonly version: Version;
readonly version: Version;
}
export function WithVersion<T extends Constructor<LitElement>>(
/**
* The superclass constructor to extend.
*/
SuperClass: T,
/**
* Whether or not to subscribe to the context.
*/
subscribe = true,
) {
class VersionProvider extends SuperClass {
@consume({ context: authentikVersionContext, subscribe })
public version!: Version;
}
/**
* A mixin that provides the current authentik version to the element.
*
* @category Mixin
*
* @see {@link https://lit.dev/docs/composition/mixins/#mixins-in-typescript | Lit Mixins}
*/
export const WithVersion = createMixin<VersionMixin>(
({
/**
* The superclass constructor to extend.
*/
SuperClass,
/**
* Whether or not to subscribe to the context.
*/
subscribe = true,
}) => {
abstract class VersionProvider extends SuperClass implements VersionMixin {
@consume({
context: VersionContext,
subscribe,
})
@state()
public version!: Version;
}
return VersionProvider as Constructor<VersionConsumer> & T;
}
return VersionProvider;
},
);

2
web/src/elements/ak-locale-context/ak-locale-context.ts
View File

@ -70,7 +70,7 @@ export class LocaleContext extends WithBrandConfig(AKElement) {
}
updateLocale(requestedLocale: string | undefined = undefined) {
const localeRequest = autoDetectLanguage(requestedLocale, this.brand?.defaultLocale);
const localeRequest = autoDetectLanguage(requestedLocale, this.brand.defaultLocale);
const locale = getBestMatchLocale(localeRequest);
if (!locale) {
console.warn(`authentik/locale: failed to find locale for code ${localeRequest}`);

97
web/src/elements/controllers/ModalOrchestrationController.ts
View File

@ -1,10 +1,8 @@
import { bound } from "@goauthentik/elements/decorators/bound.js";
import { LitElement, ReactiveController } from "lit";
import { LitElement, ReactiveController, ReactiveControllerHost } from "lit";
type ReactiveElementHost = Partial<ReactiveControllerHost> & LitElement;
type ModalElement = LitElement & { closeModal(): void | boolean };
interface ModalElement extends LitElement {
closeModal(): void | boolean;
}
export class ModalShowEvent extends Event {
modal: ModalElement;
@ -50,75 +48,70 @@ const modalIsLive = (modal: ModalElement) => modal.isConnected && modal.checkVis
*/
export class ModalOrchestrationController implements ReactiveController {
host!: ReactiveElementHost;
#knownModals: ModalElement[] = [];
knownModals: ModalElement[] = [];
constructor(host: ReactiveElementHost) {
this.host = host;
host.addController(this);
}
hostConnected() {
public hostConnected() {
window.addEventListener("keyup", this.handleKeyup);
window.addEventListener("ak-modal-show", this.addModal);
window.addEventListener("ak-modal-show", this.#addModal);
window.addEventListener("ak-modal-hide", this.closeModal);
}
hostDisconnected() {
public hostDisconnected() {
window.removeEventListener("keyup", this.handleKeyup);
window.removeEventListener("ak-modal-show", this.addModal);
window.removeEventListener("ak-modal-show", this.#addModal);
window.removeEventListener("ak-modal-hide", this.closeModal);
}
@bound
addModal(e: ModalShowEvent) {
this.knownModals = [...this.knownModals, e.modal];
}
#addModal = (e: ModalShowEvent) => {
this.#knownModals = [...this.#knownModals, e.modal];
};
scheduleCleanup(modal: ModalElement) {
setTimeout(() => {
this.knownModals = this.knownModals.filter((m) => modalIsLive(m) && modal !== m);
}, 0);
}
#cleanupFrameID = -1;
@bound
closeModal(e: ModalHideEvent) {
#scheduleCleanup = (modal: ModalElement) => {
cancelAnimationFrame(this.#cleanupFrameID);
this.#cleanupFrameID = requestAnimationFrame(() => {
this.#knownModals = this.#knownModals.filter((m) => modalIsLive(m) && modal !== m);
});
};
closeModal = (e: ModalHideEvent) => {
const modal = e.modal;
if (!modalIsLive(modal)) {
return;
}
if (modal.closeModal() !== false) {
this.scheduleCleanup(modal);
}
}
removeTopmostModal() {
const knownModals = [...this.knownModals];
if (!modalIsLive(modal)) return;
if (modal.closeModal() !== false) {
this.#scheduleCleanup(modal);
}
};
#removeTopmostModal = () => {
const knownModals = [...this.#knownModals];
// Pop off modals until you find the first live one, schedule it to be closed, and make that
// cleaned list the current state. Since this is our *only* state object, this has the
// effect of creating a new "knownModals" collection with some semantics.
while (true) {
const modal = knownModals.pop();
if (!modal) {
break;
}
if (!modalIsLive(modal)) {
continue;
}
if (!modal) break;
if (!modalIsLive(modal)) continue;
if (modal.closeModal() !== false) {
this.scheduleCleanup(modal);
this.#scheduleCleanup(modal);
}
break;
}
this.knownModals = knownModals;
}
this.#knownModals = knownModals;
};
@bound
handleKeyup(e: KeyboardEvent) {
handleKeyup = ({ key }: KeyboardEvent) => {
// The latter handles Firefox 37 and earlier.
if (e.key === "Escape" || e.key === "Esc") {
this.removeTopmostModal();
if (key === "Escape" || key === "Esc") {
this.#removeTopmostModal();
}
}
};
}

5
web/src/elements/sidebar/SidebarVersion.ts
View File

@ -1,7 +1,8 @@
import type { AdminInterface } from "@goauthentik/admin/AdminInterface/index.entrypoint.js";
import type { AdminInterface } from "@goauthentik/admin/AdminInterface/index.entrypoint";
import { globalAK } from "@goauthentik/common/global";
import { rootInterface } from "@goauthentik/common/theme";
import { DefaultBrand } from "@goauthentik/common/ui/config";
import { AKElement, rootInterface } from "@goauthentik/elements/Base";
import { AKElement } from "@goauthentik/elements/Base";
import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider";
import { WithVersion } from "@goauthentik/elements/Interface/versionProvider";

17
web/src/elements/types.ts
View File

@ -15,10 +15,13 @@ export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
*/
export type ReactiveElementHost<T> = Partial<ReactiveControllerHost & Writeable<T>> & HTMLElement;
export type AbstractLitElementConstructor = abstract new (...args: never[]) => LitElement;
export type AbstractLitElementConstructor<T = unknown> = abstract new (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
...args: any[]
) => LitElement & T;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type LitElementConstructor = new (...args: any[]) => LitElement;
export type LitElementConstructor<T = unknown> = new (...args: any[]) => LitElement & T;
/**
* A constructor that has been extended with a mixin.
@ -37,11 +40,11 @@ export type ConstructorWithMixin<SuperClass, Mixin> =
/**
* The init object passed to the `createMixin` callback.
*/
export interface CreateMixinInit<T extends LitElementConstructor = LitElementConstructor> {
export interface CreateMixinInit<C = unknown> {
/**
* The superclass constructor to extend.
*/
SuperClass: T;
SuperClass: LitElementConstructor<C>;
/**
* Whether or not to subscribe to the context.
*
@ -58,7 +61,9 @@ export interface CreateMixinInit<T extends LitElementConstructor = LitElementCon
* @param mixinCallback The callback that will be called to create the mixin.
* @template Mixin The mixin class to union with the superclass.
*/
export function createMixin<Mixin>(mixinCallback: (init: CreateMixinInit) => unknown) {
export function createMixin<Mixin, C = unknown>(
mixinCallback: (init: CreateMixinInit<C>) => unknown,
) {
return <T extends LitElementConstructor | AbstractLitElementConstructor>(
/**
* The superclass constructor to extend.
@ -73,7 +78,7 @@ export function createMixin<Mixin>(mixinCallback: (init: CreateMixinInit) => unk
subscribe?: boolean,
) => {
const MixinClass = mixinCallback({
SuperClass: SuperClass as LitElementConstructor,
SuperClass: SuperClass as LitElementConstructor<C>,
subscribe,
});

6
web/src/elements/utils/images.ts
View File

@ -1,8 +1,8 @@
import { resolveUITheme } from "@goauthentik/common/theme";
import { rootInterface } from "@goauthentik/elements/Base";
import { resolveUITheme, rootInterface } from "#common/theme";
import type { AKElement } from "#elements/Base";
export function themeImage(rawPath: string) {
const enabledTheme = rootInterface()?.activeTheme || resolveUITheme();
const enabledTheme = rootInterface<AKElement>()?.activeTheme || resolveUITheme();
return rawPath.replaceAll("%(theme)s", enabledTheme);
}

25
web/src/flow/FlowExecutor.ts
View File

@ -1,16 +1,14 @@
import { WithCapabilitiesConfig } from "#elements/Interface/capabilitiesProvider";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import {
EVENT_FLOW_ADVANCE,
EVENT_FLOW_INSPECTOR_TOGGLE,
TITLE_DEFAULT,
} from "@goauthentik/common/constants";
import { EVENT_FLOW_ADVANCE, EVENT_FLOW_INSPECTOR_TOGGLE } from "@goauthentik/common/constants";
import { globalAK } from "@goauthentik/common/global";
import { configureSentry } from "@goauthentik/common/sentry";
import { DefaultBrand } from "@goauthentik/common/ui/config";
import { WebsocketClient } from "@goauthentik/common/ws";
import { Interface } from "@goauthentik/elements/Interface";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
import "@goauthentik/elements/LoadingOverlay";
import "@goauthentik/elements/ak-locale-context";
import "@goauthentik/elements/ak-locale-context/ak-locale-context";
import { themeImage } from "@goauthentik/elements/utils/images";
import "@goauthentik/flow/components/ak-brand-footer";
import "@goauthentik/flow/sources/apple/AppleLoginInit";
@ -48,7 +46,10 @@ import {
} from "@goauthentik/api";
@customElement("ak-flow-executor")
export class FlowExecutor extends Interface implements StageHost {
export class FlowExecutor
extends WithCapabilitiesConfig(WithBrandConfig(Interface))
implements StageHost
{
@property()
flowSlug: string = window.location.pathname.split("/")[3];
@ -58,9 +59,9 @@ export class FlowExecutor extends Interface implements StageHost {
set challenge(value: ChallengeTypes | undefined) {
this._challenge = value;
if (value?.flowInfo?.title) {
document.title = `${value.flowInfo?.title} - ${this.brand?.brandingTitle}`;
document.title = `${value.flowInfo?.title} - ${this.brandingTitle}`;
} else {
document.title = this.brand?.brandingTitle || TITLE_DEFAULT;
document.title = this.brandingTitle;
}
this.requestUpdate();
}
@ -238,7 +239,7 @@ export class FlowExecutor extends Interface implements StageHost {
}
async firstUpdated(): Promise<void> {
if (this.config?.capabilities.includes(CapabilitiesEnum.CanDebug)) {
if (this.can(CapabilitiesEnum.CanDebug)) {
this.inspectorAvailable = true;
}
this.loading = true;
@ -520,7 +521,7 @@ export class FlowExecutor extends Interface implements StageHost {
>
<img
src="${themeImage(
this.brand?.brandingLogo ??
this.brand.brandingLogo ??
globalAK()?.brand.brandingLogo ??
DefaultBrand.brandingLogo,
)}"
@ -531,7 +532,7 @@ export class FlowExecutor extends Interface implements StageHost {
</div>
<ak-brand-links
class="pf-c-login__footer"
.links=${this.brand?.uiFooterLinks ?? []}
.links=${this.brand.uiFooterLinks ?? []}
></ak-brand-links>
</div>
</div>

8
web/src/rac/index.entrypoint.ts
View File

@ -1,5 +1,5 @@
import { TITLE_DEFAULT } from "@goauthentik/common/constants";
import { Interface } from "@goauthentik/elements/Interface";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
import "@goauthentik/elements/LoadingOverlay";
import Guacamole from "guacamole-common-js";
@ -43,7 +43,7 @@ const RECONNECT_ATTEMPTS_INITIAL = 5;
const RECONNECT_ATTEMPTS = 5;
@customElement("ak-rac")
export class RacInterface extends Interface {
export class RacInterface extends WithBrandConfig(Interface) {
static get styles(): CSSResult[] {
return [
PFBase,
@ -231,10 +231,12 @@ export class RacInterface extends Interface {
}
updateTitle(): void {
let title = this.brand?.brandingTitle || TITLE_DEFAULT;
let title = this.brand.brandingTitle;
if (this.endpointName) {
title = `${this.endpointName} - ${title}`;
}
document.title = `${title}`;
}

10
web/src/standalone/api-browser/index.entrypoint.ts
View File

@ -5,8 +5,7 @@ import "@goauthentik/elements/ak-locale-context/index.js";
import { CSRFHeaderName } from "@goauthentik/common/api/middleware.js";
import { EVENT_THEME_CHANGE } from "@goauthentik/common/constants.js";
import { getCookie } from "@goauthentik/common/utils.js";
import { Interface } from "@goauthentik/elements/Interface/Interface.js";
import { DefaultBrand } from "@goauthentik/common/ui/config.js";
import { Interface } from "@goauthentik/elements/Interface.js";
import { themeImage } from "@goauthentik/elements/utils/images.js";
import { msg } from "@lit/localize";
@ -15,9 +14,10 @@ import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { UiThemeEnum } from "@goauthentik/api";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
@customElement("ak-api-browser")
export class APIBrowser extends Interface {
export class APIBrowser extends WithBrandConfig(Interface) {
@property()
schemaPath?: string;
@ -102,9 +102,7 @@ export class APIBrowser extends Interface {
<img
alt="${msg("authentik Logo")}"
class="logo"
src="${themeImage(
this.brand?.brandingLogo ?? DefaultBrand.brandingLogo,
)}"
src="${themeImage(this.brandingLogo)}"
/>
</div>
</rapi-doc>

16
web/src/standalone/loading/index.entrypoint.ts
View File

@ -1,4 +1,6 @@
import { LightInterface } from "@goauthentik/elements/Interface";
import { globalAK } from "@goauthentik/common/global";
import { applyDocumentTheme } from "@goauthentik/common/theme";
import { AKElement } from "@goauthentik/elements/Base";
import { msg } from "@lit/localize";
import { TemplateResult, css, html } from "lit";
@ -10,7 +12,7 @@ import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@customElement("ak-loading")
export class Loading extends LightInterface {
export class Loading extends AKElement {
static styles = [
PFBase,
PFPage,
@ -23,6 +25,16 @@ export class Loading extends LightInterface {
`,
];
constructor() {
super();
applyDocumentTheme(globalAK().brand.uiTheme);
}
public connectedCallback(): void {
this.dataset.akInterfaceRoot = this.tagName.toLowerCase();
}
render(): TemplateResult {
return html` <section
class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl"

12
web/src/user/LibraryApplication/index.ts
View File

@ -1,8 +1,9 @@
import { PFSize } from "@goauthentik/common/enums.js";
import { globalAK } from "@goauthentik/common/global";
import { rootInterface } from "@goauthentik/common/theme";
import { truncateWords } from "@goauthentik/common/utils";
import "@goauthentik/elements/AppIcon";
import { AKElement, rootInterface } from "@goauthentik/elements/Base";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Expand";
import "@goauthentik/user/LibraryApplication/RACLaunchEndpointModal";
import type { RACLaunchEndpointModal } from "@goauthentik/user/LibraryApplication/RACLaunchEndpointModal";
@ -71,14 +72,14 @@ export class LibraryApplication extends AKElement {
}
renderExpansion(application: Application) {
const me = rootInterface<UserInterface>()?.me;
const { me, uiConfig } = rootInterface<UserInterface>();
return html`<ak-expand textOpen=${msg("Fewer details")} textClosed=${msg("More details")}>
<div class="pf-c-content">
<small>${application.metaPublisher}</small>
</div>
${truncateWords(application.metaDescription || "", 10)}
${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser
${uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser
? html`
<a
class="pf-c-button pf-m-control pf-m-small pf-m-block"
@ -148,9 +149,10 @@ export class LibraryApplication extends AKElement {
return html`<ak-spinner></ak-spinner>`;
}
const me = rootInterface<UserInterface>()?.me;
const { me, uiConfig } = rootInterface<UserInterface>();
const expandable =
(rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser) ||
(uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser) ||
this.application.metaPublisher !== "" ||
this.application.metaDescription !== "";

7
web/src/user/LibraryPage/ak-library.ts
View File

@ -1,7 +1,9 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { rootInterface } from "@goauthentik/common/theme";
import { me } from "@goauthentik/common/users";
import { AKElement, rootInterface } from "@goauthentik/elements/Base";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/EmptyState";
import type { UserInterface } from "@goauthentik/user/index.entrypoint";
import { localized, msg } from "@lit/localize";
import { html } from "lit";
@ -47,7 +49,8 @@ export class LibraryPage extends AKElement {
constructor() {
super();
const uiConfig = rootInterface()?.uiConfig;
const { uiConfig } = rootInterface<UserInterface>();
if (!uiConfig) {
throw new Error("Could not retrieve uiConfig. Reason: unknown. Check logs.");
}

49
web/src/user/index.entrypoint.ts
View File

@ -11,11 +11,12 @@ import { DefaultBrand } from "@goauthentik/common/ui/config";
import { me } from "@goauthentik/common/users";
import { WebsocketClient } from "@goauthentik/common/ws";
import "@goauthentik/components/ak-nav-buttons";
import { AuthenticatedInterface } from "@goauthentik/elements/AuthenticatedInterface";
import { AKElement } from "@goauthentik/elements/Base";
import { AuthenticatedInterface } from "@goauthentik/elements/Interface";
import "@goauthentik/elements/ak-locale-context";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
import "@goauthentik/elements/ak-locale-context/ak-locale-context";
import "@goauthentik/elements/banner/EnterpriseStatusBanner";
import "@goauthentik/elements/buttons/ActionButton";
import "@goauthentik/elements/buttons/ActionButton/ak-action-button";
import "@goauthentik/elements/messages/MessageContainer";
import "@goauthentik/elements/notifications/APIDrawer";
import "@goauthentik/elements/notifications/NotificationDrawer";
@ -41,7 +42,7 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import { CurrentBrand, EventsApi, SessionUser } from "@goauthentik/api";
import { EventsApi, SessionUser } from "@goauthentik/api";
if (process.env.NODE_ENV === "development") {
await import("@goauthentik/esbuild-plugin-live-reload/client");
@ -117,21 +118,19 @@ const customStyles = css`
@customElement("ak-interface-user-presentation")
// @ts-ignore
class UserInterfacePresentation extends AKElement {
static get styles() {
return [
PFBase,
PFDisplay,
PFBrand,
PFPage,
PFAvatar,
PFButton,
PFDrawer,
PFDropdown,
PFNotificationBadge,
customStyles,
];
}
class UserInterfacePresentation extends WithBrandConfig(AKElement) {
static styles = [
PFBase,
PFDisplay,
PFBrand,
PFPage,
PFAvatar,
PFButton,
PFDrawer,
PFDropdown,
PFNotificationBadge,
customStyles,
];
@property({ type: Object })
uiConfig!: UIConfig;
@ -148,9 +147,6 @@ class UserInterfacePresentation extends AKElement {
@property({ type: Number })
notificationsCount = 0;
@property({ type: Object })
brand!: CurrentBrand;
get canAccessAdmin() {
return (
this.me.user.isSuperuser ||
@ -207,7 +203,7 @@ class UserInterfacePresentation extends AKElement {
<img
class="pf-c-brand"
src="${themeImage(this.brand.brandingLogo)}"
alt="${this.brand.brandingTitle}"
alt="${this.brandingTitle}"
/>
</a>
</div>
@ -265,7 +261,7 @@ class UserInterfacePresentation extends AKElement {
//
//
@customElement("ak-interface-user")
export class UserInterface extends AuthenticatedInterface {
export class UserInterface extends WithBrandConfig(AuthenticatedInterface) {
@property({ type: Boolean })
notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
@ -278,7 +274,10 @@ export class UserInterface extends AuthenticatedInterface {
notificationsCount = 0;
@state()
me?: SessionUser;
me: SessionUser | null = null;
@state()
uiConfig: UIConfig | null = null;
constructor() {
configureSentry(true);

3
web/src/user/user-settings/UserSettingsPage.ts
View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { AKElement, rootInterface } from "@goauthentik/elements/Base";
import { rootInterface } from "@goauthentik/common/theme";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/user/SessionList";
import "@goauthentik/elements/user/UserConsentList";

8
web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
View File

@ -92,10 +92,10 @@ export class UserSettingsFlowExecutor
updated(changedProperties: PropertyValues<this>): void {
if (changedProperties.has("brand") && this.brand) {
this.flowSlug = this.brand?.flowUserSettings;
if (!this.flowSlug) {
return;
}
this.flowSlug = this.brand.flowUserSettings;
if (!this.flowSlug) return;
this.nextChallenge();
}
}