web: re-organise frontend and cleanup common code (#3572)

* fix repo in api client

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* web: re-organise files to match their interface

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* core: include version in script tags

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* cleanup maybe broken

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* revert rename

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* web: get rid of Client.ts

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* move more to common

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* more moving

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* format

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* unfuck files that vscode fucked, thanks

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* move more

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* finish moving (maybe)

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* ok more moving

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* fix more stuff that vs code destroyed

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* get rid "web" prefix for virtual package

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* fix locales

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* use custom base element

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* fix css file

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* don't run autoDetectLanguage when importing locale

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* fix circular dependencies

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* web: fix build

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/Base.ts

@@ -0,0 +1,19 @@
+import { EVENT_LOCALE_CHANGE } from "@goauthentik/common/constants";
+
+import { LitElement } from "lit";
+
+export class AKElement extends LitElement {
+    constructor() {
+        super();
+        this.addEventListener(EVENT_LOCALE_CHANGE, this._handleLocaleChange);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(EVENT_LOCALE_CHANGE, this._handleLocaleChange);
+    }
+
+    private _handleLocaleChange() {
+        this.requestUpdate();
+    }
+}

web/src/elements/CodeMirror.ts

@@ -12,13 +12,13 @@ import {
 import * as yamlMode from "@codemirror/legacy-modes/mode/yaml";
 import { Compartment, EditorState, Extension } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { AKElement } from "@goauthentik/elements/Base";
 import YAML from "yaml";
 
-import { LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-codemirror")
-export class CodeMirrorTextarea extends LitElement {
+export class CodeMirrorTextarea extends AKElement {
     @property({ type: Boolean })
     readOnly = false;
 

web/src/elements/Divider.ts

@@ -1,11 +1,13 @@
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-divider")
-export class Divider extends LitElement {
+export class Divider extends AKElement {
     static get styles(): CSSResult[] {
         return [
             PFBase,

web/src/elements/EmptyState.ts

@@ -1,15 +1,16 @@
-import { PFSize } from "@goauthentik/web/elements/Spinner";
+import { AKElement } from "@goauthentik/elements/Base";
+import { PFSize } from "@goauthentik/elements/Spinner";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-empty-state")
-export class EmptyState extends LitElement {
+export class EmptyState extends AKElement {
     @property({ type: String })
     icon = "";
 

web/src/elements/Expand.ts

@@ -1,12 +1,14 @@
+import { AKElement } from "@goauthentik/elements/Base";
+
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";
 
 @customElement("ak-expand")
-export class Expand extends LitElement {
+export class Expand extends AKElement {
     @property({ type: Boolean })
     expanded = false;
 

web/src/elements/Label.ts

@@ -1,7 +1,9 @@
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFLabel from "@patternfly/patternfly/components/Label/label.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -13,7 +15,7 @@ export enum PFColor {
 }
 
 @customElement("ak-label")
-export class Label extends LitElement {
+export class Label extends AKElement {
     @property()
     color: PFColor = PFColor.Grey;
 

web/src/elements/LoadingOverlay.ts

@@ -1,12 +1,13 @@
-import { PFSize } from "@goauthentik/web/elements/Spinner";
+import { AKElement } from "@goauthentik/elements/Base";
+import { PFSize } from "@goauthentik/elements/Spinner";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-loading-overlay")
-export class LoadingOverlay extends LitElement {
+export class LoadingOverlay extends AKElement {
     @property({ type: Boolean })
     topMost = false;
 

web/src/elements/Markdown.ts

@@ -1,8 +1,10 @@
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 
@@ -13,7 +15,7 @@ export interface MarkdownDocument {
 }
 
 @customElement("ak-markdown")
-export class Markdown extends LitElement {
+export class Markdown extends AKElement {
     @property({ attribute: false })
     md?: MarkdownDocument;
 

web/src/elements/PageHeader.ts

@@ -1,20 +1,21 @@
-import { DEFAULT_CONFIG, tenant } from "@goauthentik/web/api/Config";
-import { currentInterface } from "@goauthentik/web/api/Sentry";
-import { me } from "@goauthentik/web/api/Users";
+import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config";
 import {
     EVENT_API_DRAWER_TOGGLE,
     EVENT_NOTIFICATION_DRAWER_TOGGLE,
     EVENT_SIDEBAR_TOGGLE,
     EVENT_WS_MESSAGE,
     TITLE_DEFAULT,
-} from "@goauthentik/web/constants";
+} from "@goauthentik/common/constants";
+import { currentInterface } from "@goauthentik/common/sentry";
+import { me } from "@goauthentik/common/users";
+import { AKElement } from "@goauthentik/elements/Base";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -23,7 +24,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import { EventsApi } from "@goauthentik/api";
 
 @customElement("ak-page-header")
-export class PageHeader extends LitElement {
+export class PageHeader extends AKElement {
     @property()
     icon?: string;
 

web/src/elements/SearchSelect.ts

@@ -1,16 +1,18 @@
+import { AKElement } from "@goauthentik/elements/Base";
+
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFSelect from "@patternfly/patternfly/components/Select/select.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-search-select")
-export class SearchSelect<T> extends LitElement {
+export class SearchSelect<T> extends AKElement {
     @property()
     query?: string;
 

web/src/elements/Spinner.ts

@@ -1,6 +1,8 @@
+import { AKElement } from "@goauthentik/elements/Base";
+
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
@@ -13,7 +15,7 @@ export enum PFSize {
 }
 
 @customElement("ak-spinner")
-export class Spinner extends LitElement {
+export class Spinner extends AKElement {
     @property()
     size: PFSize = PFSize.Medium;
 

web/src/elements/Tabs.ts

@@ -1,18 +1,19 @@
-import { CURRENT_CLASS, EVENT_REFRESH, ROUTE_SEPARATOR } from "@goauthentik/web/constants";
-import { getURLParams, updateURLParams } from "@goauthentik/web/elements/router/RouteMatch";
+import { CURRENT_CLASS, EVENT_REFRESH, ROUTE_SEPARATOR } from "@goauthentik/common/constants";
+import { AKElement } from "@goauthentik/elements/Base";
+import { getURLParams, updateURLParams } from "@goauthentik/elements/router/RouteMatch";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, css, 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 AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
 import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-tabs")
-export class Tabs extends LitElement {
+export class Tabs extends AKElement {
     @property()
     pageIdentifier = "page";
 

web/src/elements/Tooltip.ts

@@ -1,12 +1,14 @@
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFTooltip from "@patternfly/patternfly/components/Tooltip/tooltip.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-tooltip")
-export class Tooltip extends LitElement {
+export class Tooltip extends AKElement {
     @state()
     open = false;
 

web/src/elements/TreeView.ts

@@ -1,12 +1,13 @@
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import { setURLParams } from "@goauthentik/web/elements/router/RouteMatch";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { AKElement } from "@goauthentik/elements/Base";
+import { setURLParams } from "@goauthentik/elements/router/RouteMatch";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFTreeView from "@patternfly/patternfly/components/TreeView/tree-view.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -19,7 +20,7 @@ export interface TreeViewItem {
 }
 
 @customElement("ak-treeview-node")
-export class TreeViewNode extends LitElement {
+export class TreeViewNode extends AKElement {
     @property({ attribute: false })
     item?: TreeViewItem;
 
@@ -136,7 +137,7 @@ export class TreeViewNode extends LitElement {
 }
 
 @customElement("ak-treeview")
-export class TreeView extends LitElement {
+export class TreeView extends AKElement {
     static get styles(): CSSResult[] {
         return [PFBase, PFTreeView, AKGlobal];
     }

web/src/elements/buttons/ActionButton.ts

@@ -1,6 +1,6 @@
-import { SpinnerButton } from "@goauthentik/web/elements/buttons/SpinnerButton";
-import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
-import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { SpinnerButton } from "@goauthentik/elements/buttons/SpinnerButton";
+import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 
 import { customElement, property } from "lit/decorators.js";
 

web/src/elements/buttons/Dropdown.ts

@@ -1,10 +1,11 @@
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { AKElement } from "@goauthentik/elements/Base";
 
-import { LitElement, TemplateResult, html } from "lit";
+import { TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
 @customElement("ak-dropdown")
-export class DropdownButton extends LitElement {
+export class DropdownButton extends AKElement {
     menu: HTMLElement | null;
 
     constructor() {

web/src/elements/buttons/ModalButton.ts

@@ -1,9 +1,10 @@
-import { PFSize } from "@goauthentik/web/elements/Spinner";
+import { AKElement } from "@goauthentik/elements/Base";
+import { PFSize } from "@goauthentik/elements/Spinner";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -34,7 +35,7 @@ export const MODAL_BUTTON_STYLES = css`
 `;
 
 @customElement("ak-modal-button")
-export class ModalButton extends LitElement {
+export class ModalButton extends AKElement {
     @property()
     size: PFSize = PFSize.Large;
 
@@ -99,7 +100,7 @@ export class ModalButton extends LitElement {
         this.open = true;
         this.querySelectorAll("*").forEach((child) => {
             if ("requestUpdate" in child) {
-                (child as LitElement).requestUpdate();
+                (child as AKElement).requestUpdate();
             }
         });
     }

web/src/elements/buttons/SpinnerButton.ts

@@ -1,16 +1,17 @@
-import { ERROR_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "@goauthentik/web/constants";
-import { PFSize } from "@goauthentik/web/elements/Spinner";
+import { ERROR_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "@goauthentik/common/constants";
+import { AKElement } from "@goauthentik/elements/Base";
+import { PFSize } from "@goauthentik/elements/Spinner";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-spinner-button")
-export class SpinnerButton extends LitElement {
+export class SpinnerButton extends AKElement {
     @property({ type: Boolean })
     isRunning = false;
 

web/src/elements/buttons/TokenCopyButton.ts

@@ -1,9 +1,9 @@
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { ERROR_CLASS, SECONDARY_CLASS, SUCCESS_CLASS } from "@goauthentik/web/constants";
-import { PFSize } from "@goauthentik/web/elements/Spinner";
-import { ActionButton } from "@goauthentik/web/elements/buttons/ActionButton";
-import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
-import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { ERROR_CLASS, SECONDARY_CLASS, SUCCESS_CLASS } from "@goauthentik/common/constants";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { PFSize } from "@goauthentik/elements/Spinner";
+import { ActionButton } from "@goauthentik/elements/buttons/ActionButton";
+import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";

web/src/elements/cards/AggregateCard.ts

@@ -1,14 +1,16 @@
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-aggregate-card")
-export class AggregateCard extends LitElement {
+export class AggregateCard extends AKElement {
     @property()
     icon?: string;
 

web/src/elements/cards/AggregatePromiseCard.ts

@@ -1,6 +1,6 @@
-import { PFSize } from "@goauthentik/web/elements/Spinner";
-import "@goauthentik/web/elements/Spinner";
-import { AggregateCard } from "@goauthentik/web/elements/cards/AggregateCard";
+import { PFSize } from "@goauthentik/elements/Spinner";
+import "@goauthentik/elements/Spinner";
+import { AggregateCard } from "@goauthentik/elements/cards/AggregateCard";
 
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";

web/src/elements/charts/AdminLoginsChart.ts

@@ -1,5 +1,5 @@
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { AKChart } from "@goauthentik/web/elements/charts/Chart";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { AKChart } from "@goauthentik/elements/charts/Chart";
 import { ChartData } from "chart.js";
 
 import { t } from "@lingui/macro";

web/src/elements/charts/AdminModelPerDay.ts

@@ -1,5 +1,5 @@
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { AKChart } from "@goauthentik/web/elements/charts/Chart";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { AKChart } from "@goauthentik/elements/charts/Chart";
 import { ChartData, Tick } from "chart.js";
 
 import { t } from "@lingui/macro";

web/src/elements/charts/ApplicationAuthorizeChart.ts

@@ -1,5 +1,5 @@
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { AKChart } from "@goauthentik/web/elements/charts/Chart";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { AKChart } from "@goauthentik/elements/charts/Chart";
 import { ChartData } from "chart.js";
 
 import { t } from "@lingui/macro";

web/src/elements/charts/Chart.ts

@@ -1,8 +1,9 @@
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
 import {
     FONT_COLOUR_DARK_MODE,
     FONT_COLOUR_LIGHT_MODE,
-} from "@goauthentik/web/pages/flows/FlowDiagram";
+} from "@goauthentik/admin/flows/FlowDiagram";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { AKElement } from "@goauthentik/elements/Base";
 import { Chart, ChartConfiguration, ChartData, ChartOptions, Plugin, Tick } from "chart.js";
 import { Legend, Tooltip } from "chart.js";
 import { BarController, DoughnutController, LineController } from "chart.js";
@@ -12,7 +13,7 @@ import "chartjs-adapter-moment";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 Chart.register(Legend, Tooltip);
@@ -20,7 +21,7 @@ Chart.register(LineController, BarController, DoughnutController);
 Chart.register(ArcElement, BarElement);
 Chart.register(TimeScale, LinearScale);
 
-export abstract class AKChart<T> extends LitElement {
+export abstract class AKChart<T> extends AKElement {
     abstract apiRequest(): Promise<T>;
     abstract getChartData(data: T): ChartData;
 

web/src/elements/charts/UserChart.ts

@@ -1,5 +1,5 @@
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { AKChart } from "@goauthentik/web/elements/charts/Chart";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { AKChart } from "@goauthentik/elements/charts/Chart";
 import { ChartData } from "chart.js";
 
 import { t } from "@lingui/macro";

web/src/elements/chips/Chip.ts

@@ -1,13 +1,15 @@
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-chip")
-export class Chip extends LitElement {
+export class Chip extends AKElement {
     @property()
     value?: number | string;
 

web/src/elements/chips/ChipGroup.ts

@@ -1,16 +1,17 @@
-import { Chip } from "@goauthentik/web/elements/chips/Chip";
+import { AKElement } from "@goauthentik/elements/Base";
+import { Chip } from "@goauthentik/elements/chips/Chip";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
 import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-chip-group")
-export class ChipGroup extends LitElement {
+export class ChipGroup extends AKElement {
     static get styles(): CSSResult[] {
         return [
             PFBase,

web/src/elements/events/ObjectChangelog.ts

@@ -1,13 +1,13 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { EventWithContext } from "@goauthentik/web/api/Events";
-import { uiConfig } from "@goauthentik/web/common/config";
-import "@goauthentik/web/elements/Tabs";
-import "@goauthentik/web/elements/buttons/Dropdown";
-import "@goauthentik/web/elements/buttons/ModalButton";
-import "@goauthentik/web/elements/buttons/SpinnerButton";
-import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
-import "@goauthentik/web/pages/events/EventInfo";
+import "@goauthentik/admin/events/EventInfo";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { EventWithContext } from "@goauthentik/common/events";
+import { uiConfig } from "@goauthentik/common/ui/config";
+import "@goauthentik/elements/Tabs";
+import "@goauthentik/elements/buttons/Dropdown";
+import "@goauthentik/elements/buttons/ModalButton";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 
 import { t } from "@lingui/macro";
 
@@ -41,7 +41,7 @@ export class ObjectChangelog extends Table<Event> {
         return this._targetModelName;
     }
 
-    async apiEndpoint(page: number): Promise<AKResponse<Event>> {
+    async apiEndpoint(page: number): Promise<PaginatedResponse<Event>> {
         let modelName = this._targetModelName;
         let appName = this.targetModelApp;
         if (this._targetModelName.indexOf(".") !== -1) {

web/src/elements/events/UserEvents.ts

@@ -1,13 +1,14 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { EventWithContext } from "@goauthentik/web/api/Events";
-import { uiConfig } from "@goauthentik/web/common/config";
-import "@goauthentik/web/elements/../pages/events/EventInfo";
-import "@goauthentik/web/elements/Tabs";
-import "@goauthentik/web/elements/buttons/Dropdown";
-import "@goauthentik/web/elements/buttons/ModalButton";
-import "@goauthentik/web/elements/buttons/SpinnerButton";
-import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+import "@goauthentik/admin/events/EventInfo";
+import "@goauthentik/admin/events/EventInfo";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { EventWithContext } from "@goauthentik/common/events";
+import { uiConfig } from "@goauthentik/common/ui/config";
+import "@goauthentik/elements/Tabs";
+import "@goauthentik/elements/buttons/Dropdown";
+import "@goauthentik/elements/buttons/ModalButton";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 
 import { t } from "@lingui/macro";
 
@@ -26,7 +27,7 @@ export class ObjectChangelog extends Table<Event> {
     @property()
     targetUser!: string;
 
-    async apiEndpoint(page: number): Promise<AKResponse<Event>> {
+    async apiEndpoint(page: number): Promise<PaginatedResponse<Event>> {
         return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
             page: page,
             ordering: this.order,

web/src/elements/forms/ConfirmationForm.ts

@@ -1,8 +1,8 @@
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
-import "@goauthentik/web/elements/buttons/SpinnerButton";
-import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
-import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 
 import { t } from "@lingui/macro";
 

web/src/elements/forms/DeleteBulkForm.ts

@@ -1,11 +1,11 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import { PFSize } from "@goauthentik/web/elements/Spinner";
-import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
-import "@goauthentik/web/elements/buttons/SpinnerButton";
-import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
-import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
-import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { PFSize } from "@goauthentik/elements/Spinner";
+import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 
 import { t } from "@lingui/macro";
 
@@ -41,7 +41,7 @@ export class DeleteObjectsTable<T> extends Table<T> {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async apiEndpoint(page: number): Promise<AKResponse<T>> {
+    async apiEndpoint(page: number): Promise<PaginatedResponse<T>> {
         return Promise.resolve({
             pagination: {
                 count: this.objects.length,

web/src/elements/forms/DeleteForm.ts

@@ -1,8 +1,8 @@
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
-import "@goauthentik/web/elements/buttons/SpinnerButton";
-import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
-import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 
 import { t } from "@lingui/macro";
 

web/src/elements/forms/Form.ts

@@ -1,17 +1,18 @@
-import { SearchSelect } from "@goauthentik/web/SearchSelect";
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import { HorizontalFormElement } from "@goauthentik/web/elements/forms/HorizontalFormElement";
-import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
-import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
-import { camelToSnake, convertToSlug } from "@goauthentik/web/utils";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { camelToSnake, convertToSlug } from "@goauthentik/common/utils";
+import { AKElement } from "@goauthentik/elements/Base";
+import { SearchSelect } from "@goauthentik/elements/SearchSelect";
+import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
+import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 import "@polymer/iron-form/iron-form";
 import { IronFormElement } from "@polymer/iron-form/iron-form";
 import "@polymer/paper-input/paper-input";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -33,7 +34,7 @@ export interface KeyUnknown {
 }
 
 @customElement("ak-form")
-export class Form<T> extends LitElement {
+export class Form<T> extends AKElement {
     viewportCheck = true;
 
     @property()

web/src/elements/forms/FormElement.ts

@@ -1,4 +1,6 @@
-import { CSSResult, LitElement } from "lit";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -8,7 +10,7 @@ import PFFormControl from "@patternfly/patternfly/components/FormControl/form-co
 import { ErrorDetail } from "@goauthentik/api";
 
 @customElement("ak-form-element")
-export class FormElement extends LitElement {
+export class FormElement extends AKElement {
     static get styles(): CSSResult[] {
         return [PFForm, PFFormControl];
     }

web/src/elements/forms/FormGroup.ts

@@ -1,14 +1,16 @@
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-form-group")
-export class FormGroup extends LitElement {
+export class FormGroup extends AKElement {
     @property({ type: Boolean })
     expanded = false;
 

web/src/elements/forms/HorizontalFormElement.ts

@@ -1,19 +1,20 @@
-import { FormGroup } from "@goauthentik/web/elements/forms/FormGroup";
-import { convertToSlug } from "@goauthentik/web/utils";
+import { convertToSlug } from "@goauthentik/common/utils";
+import { AKElement } from "@goauthentik/elements/Base";
+import { FormGroup } from "@goauthentik/elements/forms/FormGroup";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, css } from "lit";
+import { CSSResult, css } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-form-element-horizontal")
-export class HorizontalFormElement extends LitElement {
+export class HorizontalFormElement extends AKElement {
     static get styles(): CSSResult[] {
         return [
             PFBase,

web/src/elements/forms/ModalForm.ts

@@ -1,8 +1,8 @@
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import "@goauthentik/web/elements/LoadingOverlay";
-import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
-import "@goauthentik/web/elements/buttons/SpinnerButton";
-import { Form } from "@goauthentik/web/elements/forms/Form";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import "@goauthentik/elements/LoadingOverlay";
+import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import { Form } from "@goauthentik/elements/forms/Form";
 
 import { t } from "@lingui/macro";
 

web/src/elements/forms/ModelForm.ts

@@ -1,5 +1,5 @@
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import { Form } from "@goauthentik/web/elements/forms/Form";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { Form } from "@goauthentik/elements/forms/Form";
 
 import { TemplateResult } from "lit";
 import { property } from "lit/decorators.js";

web/src/elements/forms/ProxyForm.ts

@@ -1,4 +1,4 @@
-import { Form } from "@goauthentik/web/elements/forms/Form";
+import { Form } from "@goauthentik/elements/forms/Form";
 
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";

web/src/elements/messages/Message.ts

@@ -1,4 +1,7 @@
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
@@ -6,12 +9,6 @@ import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-gro
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-export enum MessageLevel {
-    error = "error",
-    warning = "warning",
-    success = "success",
-    info = "info",
-}
 export interface APIMessage {
     level: MessageLevel;
     tags?: string;
@@ -27,7 +24,7 @@ const LEVEL_ICON_MAP: { [key: string]: string } = {
 };
 
 @customElement("ak-message")
-export class Message extends LitElement {
+export class Message extends AKElement {
     @property({ attribute: false })
     message?: APIMessage;
 

web/src/elements/messages/MessageContainer.ts

@@ -1,10 +1,15 @@
-import { SentryIgnoredError } from "@goauthentik/web/common/errors";
-import { WSMessage } from "@goauthentik/web/common/ws";
-import { EVENT_WS_MESSAGE, WS_MSG_TYPE_MESSAGE } from "@goauthentik/web/constants";
-import "@goauthentik/web/elements/messages/Message";
-import { APIMessage } from "@goauthentik/web/elements/messages/Message";
+import {
+    EVENT_MESSAGE,
+    EVENT_WS_MESSAGE,
+    WS_MSG_TYPE_MESSAGE,
+} from "@goauthentik/common/constants";
+import { SentryIgnoredError } from "@goauthentik/common/errors";
+import { WSMessage } from "@goauthentik/common/ws";
+import { AKElement } from "@goauthentik/elements/Base";
+import "@goauthentik/elements/messages/Message";
+import { APIMessage } from "@goauthentik/elements/messages/Message";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css";
@@ -20,7 +25,7 @@ export function showMessage(message: APIMessage, unique = false): void {
 }
 
 @customElement("ak-message-container")
-export class MessageContainer extends LitElement {
+export class MessageContainer extends AKElement {
     @property({ attribute: false })
     messages: APIMessage[] = [];
 
@@ -43,6 +48,9 @@ export class MessageContainer extends LitElement {
             if (e.detail.message_type !== WS_MSG_TYPE_MESSAGE) return;
             this.addMessage(e.detail as unknown as APIMessage);
         }) as EventListener);
+        this.addEventListener(EVENT_MESSAGE, ((e: CustomEvent<APIMessage>) => {
+            this.addMessage(e.detail);
+        }) as EventListener);
     }
 
     addMessage(message: APIMessage, unique = false): void {

web/src/elements/messages/Middleware.ts

@@ -1,5 +1,5 @@
-import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
-import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 
 import { t } from "@lingui/macro";
 

web/src/elements/notifications/APIDrawer.ts

@@ -1,45 +1,21 @@
-import { EVENT_API_DRAWER_REFRESH, EVENT_API_DRAWER_TOGGLE } from "@goauthentik/web/constants";
+import { RequestInfo } from "@goauthentik/common/api/middleware";
+import { EVENT_API_DRAWER_TOGGLE, EVENT_REQUEST_POST } from "@goauthentik/common/constants";
+import { AKElement } from "@goauthentik/elements/Base";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { Middleware, ResponseContext } from "@goauthentik/api";
-
-export interface RequestInfo {
-    method: string;
-    path: string;
-    status: number;
-}
-
-export class APIMiddleware implements Middleware {
-    post?(context: ResponseContext): Promise<Response | void> {
-        const request: RequestInfo = {
-            method: (context.init.method || "GET").toUpperCase(),
-            path: context.url,
-            status: context.response.status,
-        };
-        window.dispatchEvent(
-            new CustomEvent(EVENT_API_DRAWER_REFRESH, {
-                bubbles: true,
-                composed: true,
-                detail: request,
-            }),
-        );
-        return Promise.resolve(context.response);
-    }
-}
-
 @customElement("ak-api-drawer")
-export class APIDrawer extends LitElement {
+export class APIDrawer extends AKElement {
     @property({ attribute: false })
     requests: RequestInfo[] = [];
 
@@ -71,7 +47,7 @@ export class APIDrawer extends LitElement {
 
     constructor() {
         super();
-        window.addEventListener(EVENT_API_DRAWER_REFRESH, ((e: CustomEvent<RequestInfo>) => {
+        window.addEventListener(EVENT_REQUEST_POST, ((e: CustomEvent<RequestInfo>) => {
             this.requests.splice(0, 0, e.detail);
             if (this.requests.length > 50) {
                 this.requests.shift();

web/src/elements/notifications/NotificationDrawer.ts

@@ -1,17 +1,18 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { me } from "@goauthentik/web/api/Users";
-import { EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_REFRESH } from "@goauthentik/web/constants";
-import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
-import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
-import { ActionToLabel } from "@goauthentik/web/pages/events/utils";
+import { ActionToLabel } from "@goauthentik/admin/events/utils";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_REFRESH } from "@goauthentik/common/constants";
+import { MessageLevel } from "@goauthentik/common/messages";
+import { me } from "@goauthentik/common/users";
+import { AKElement } from "@goauthentik/elements/Base";
+import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
@@ -21,9 +22,9 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import { EventsApi, Notification } from "@goauthentik/api";
 
 @customElement("ak-notification-drawer")
-export class NotificationDrawer extends LitElement {
+export class NotificationDrawer extends AKElement {
     @property({ attribute: false })
-    notifications?: AKResponse<Notification>;
+    notifications?: PaginatedResponse<Notification>;
 
     @property({ type: Number })
     unread = 0;

web/src/elements/oauth/UserRefreshList.ts

@@ -1,9 +1,9 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { uiConfig } from "@goauthentik/web/common/config";
-import { PFColor } from "@goauthentik/web/elements/Label";
-import "@goauthentik/web/elements/forms/DeleteBulkForm";
-import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { uiConfig } from "@goauthentik/common/ui/config";
+import { PFColor } from "@goauthentik/elements/Label";
+import "@goauthentik/elements/forms/DeleteBulkForm";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 
 import { t } from "@lingui/macro";
 
@@ -25,7 +25,7 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
         return super.styles.concat(PFFlex);
     }
 
-    async apiEndpoint(page: number): Promise<AKResponse<RefreshTokenModel>> {
+    async apiEndpoint(page: number): Promise<PaginatedResponse<RefreshTokenModel>> {
         return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensList({
             user: this.userId,
             ordering: "expires",

web/src/elements/router/Route.ts

@@ -1,4 +1,4 @@
-import "@goauthentik/web/elements/EmptyState";
+import "@goauthentik/elements/EmptyState";
 
 import { TemplateResult, html } from "lit";
 import { until } from "lit/directives/until.js";

web/src/elements/router/RouteMatch.ts

@@ -1,5 +1,5 @@
-import { ROUTE_SEPARATOR } from "@goauthentik/web/constants";
-import { Route } from "@goauthentik/web/elements/router/Route";
+import { ROUTE_SEPARATOR } from "@goauthentik/common/constants";
+import { Route } from "@goauthentik/elements/router/Route";
 
 import { TemplateResult } from "lit";
 

web/src/elements/router/Router404.ts

@@ -1,6 +1,8 @@
+import { AKElement } from "@goauthentik/elements/Base";
+
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
@@ -8,7 +10,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-router-404")
-export class Router404 extends LitElement {
+export class Router404 extends AKElement {
     @property()
     url = "";
 

web/src/elements/router/RouterOutlet.ts

@@ -1,12 +1,13 @@
-import { ROUTE_SEPARATOR } from "@goauthentik/web/constants";
-import { Route } from "@goauthentik/web/elements/router/Route";
-import { RouteMatch } from "@goauthentik/web/elements/router/RouteMatch";
-import "@goauthentik/web/elements/router/Router404";
+import { ROUTE_SEPARATOR } from "@goauthentik/common/constants";
+import { AKElement } from "@goauthentik/elements/Base";
+import { Route } from "@goauthentik/elements/router/Route";
+import { RouteMatch } from "@goauthentik/elements/router/RouteMatch";
+import "@goauthentik/elements/router/Router404";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 
 // Poliyfill for hashchange.newURL,
 // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
@@ -44,7 +45,7 @@ export function navigate(url: string, params?: { [key: string]: unknown }): void
 }
 
 @customElement("ak-router-outlet")
-export class RouterOutlet extends LitElement {
+export class RouterOutlet extends AKElement {
     @property({ attribute: false })
     current?: RouteMatch;
 

web/src/elements/sidebar/Sidebar.ts

@@ -1,16 +1,17 @@
-import "@goauthentik/web/elements/sidebar/SidebarBrand";
-import "@goauthentik/web/elements/sidebar/SidebarUser";
+import { AKElement } from "@goauthentik/elements/Base";
+import "@goauthentik/elements/sidebar/SidebarBrand";
+import "@goauthentik/elements/sidebar/SidebarUser";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-sidebar")
-export class Sidebar extends LitElement {
+export class Sidebar extends AKElement {
     static get styles(): CSSResult[] {
         return [
             PFBase,

web/src/elements/sidebar/SidebarBrand.ts

@@ -1,12 +1,13 @@
-import { tenant } from "@goauthentik/web/api/Config";
-import { configureSentry } from "@goauthentik/web/api/Sentry";
-import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/web/constants";
-import { first } from "@goauthentik/web/utils";
+import { tenant } from "@goauthentik/common/api/config";
+import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/common/constants";
+import { configureSentry } from "@goauthentik/common/sentry";
+import { first } from "@goauthentik/common/utils";
+import { AKElement } from "@goauthentik/elements/Base";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
@@ -24,10 +25,11 @@ export const DefaultTenant: CurrentTenant = {
     brandingTitle: "authentik",
     uiFooterLinks: [],
     matchedDomain: "",
+    defaultLocale: "",
 };
 
 @customElement("ak-sidebar-brand")
-export class SidebarBrand extends LitElement {
+export class SidebarBrand extends AKElement {
     @property({ attribute: false })
     tenant: CurrentTenant = DefaultTenant;
 

web/src/elements/sidebar/SidebarItem.ts

@@ -1,17 +1,18 @@
-import { ROUTE_SEPARATOR } from "@goauthentik/web/constants";
+import { ROUTE_SEPARATOR } from "@goauthentik/common/constants";
+import { AKElement } from "@goauthentik/elements/Base";
 
-import { CSSResult, LitElement, css } from "lit";
+import { CSSResult, css } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-sidebar-item")
-export class SidebarItem extends LitElement {
+export class SidebarItem extends AKElement {
     static get styles(): CSSResult[] {
         return [
             PFBase,

web/src/elements/sidebar/SidebarUser.ts

@@ -1,6 +1,7 @@
-import { me } from "@goauthentik/web/api/Users";
+import { me } from "@goauthentik/common/users";
+import { AKElement } from "@goauthentik/elements/Base";
 
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
@@ -10,7 +11,7 @@ import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-sidebar-user")
-export class SidebarUser extends LitElement {
+export class SidebarUser extends AKElement {
     static get styles(): CSSResult[] {
         return [
             PFBase,

web/src/elements/table/Table.ts

@@ -1,21 +1,22 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import "@goauthentik/web/elements/EmptyState";
-import "@goauthentik/web/elements/buttons/SpinnerButton";
-import "@goauthentik/web/elements/chips/Chip";
-import "@goauthentik/web/elements/chips/ChipGroup";
-import { getURLParam, updateURLParams } from "@goauthentik/web/elements/router/RouteMatch";
-import "@goauthentik/web/elements/table/TablePagination";
-import "@goauthentik/web/elements/table/TableSearch";
-import { groupBy } from "@goauthentik/web/utils";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { groupBy } from "@goauthentik/common/utils";
+import { AKElement } from "@goauthentik/elements/Base";
+import "@goauthentik/elements/EmptyState";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import "@goauthentik/elements/chips/Chip";
+import "@goauthentik/elements/chips/ChipGroup";
+import { getURLParam, updateURLParams } from "@goauthentik/elements/router/RouteMatch";
+import "@goauthentik/elements/table/TablePagination";
+import { Pagination } from "@goauthentik/elements/table/TablePagination";
+import "@goauthentik/elements/table/TableSearch";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
@@ -88,8 +89,14 @@ export class TableColumn {
     }
 }
 
-export abstract class Table<T> extends LitElement {
-    abstract apiEndpoint(page: number): Promise<AKResponse<T>>;
+export interface PaginatedResponse<T> {
+    pagination: Pagination;
+
+    results: Array<T>;
+}
+
+export abstract class Table<T> extends AKElement {
+    abstract apiEndpoint(page: number): Promise<PaginatedResponse<T>>;
     abstract columns(): TableColumn[];
     abstract row(item: T): TemplateResult[];
 
@@ -108,7 +115,7 @@ export abstract class Table<T> extends LitElement {
     }
 
     @property({ attribute: false })
-    data?: AKResponse<T>;
+    data?: PaginatedResponse<T>;
 
     @property({ type: Number })
     page = 1;

web/src/elements/table/TableModal.ts

@@ -1,12 +1,13 @@
-import { PFSize } from "@goauthentik/web/elements/Spinner";
-import { MODAL_BUTTON_STYLES } from "@goauthentik/web/elements/buttons/ModalButton";
-import { Table } from "@goauthentik/web/elements/table/Table";
+import { AKElement } from "@goauthentik/elements/Base";
+import { PFSize } from "@goauthentik/elements/Spinner";
+import { MODAL_BUTTON_STYLES } from "@goauthentik/elements/buttons/ModalButton";
+import { Table } from "@goauthentik/elements/table/Table";
 
-import { CSSResult, LitElement } from "lit";
+import { CSSResult } from "lit";
 import { TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
@@ -56,7 +57,7 @@ export abstract class TableModal<T> extends Table<T> {
         this.open = true;
         this.querySelectorAll("*").forEach((child) => {
             if ("requestUpdate" in child) {
-                (child as LitElement).requestUpdate();
+                (child as AKElement).requestUpdate();
             }
         });
     }

web/src/elements/table/TablePage.ts

@@ -1,6 +1,6 @@
-import "@goauthentik/web/elements/../elements/PageHeader";
-import { updateURLParams } from "@goauthentik/web/elements/router/RouteMatch";
-import { Table } from "@goauthentik/web/elements/table/Table";
+import "@goauthentik/elements/PageHeader";
+import { updateURLParams } from "@goauthentik/elements/router/RouteMatch";
+import { Table } from "@goauthentik/elements/table/Table";
 
 import { t } from "@lingui/macro";
 

web/src/elements/table/TablePagination.ts

@@ -1,19 +1,31 @@
-import { AKPagination } from "@goauthentik/web/api/Client";
+import { AKElement } from "@goauthentik/elements/Base";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
+export interface Pagination {
+    next?: number;
+    previous?: number;
+
+    count: number;
+    current: number;
+    totalPages: number;
+
+    startIndex: number;
+    endIndex: number;
+}
+
 @customElement("ak-table-pagination")
-export class TablePagination extends LitElement {
+export class TablePagination extends AKElement {
     @property({ attribute: false })
-    pages?: AKPagination;
+    pages?: Pagination;
 
     @property({ attribute: false })
     // eslint-disable-next-line

web/src/elements/table/TableSearch.ts

@@ -1,10 +1,12 @@
+import { AKElement } from "@goauthentik/elements/Base";
+
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, css, 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 AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
@@ -12,7 +14,7 @@ import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-table-search")
-export class TableSearch extends LitElement {
+export class TableSearch extends AKElement {
     @property()
     value?: string;
 

web/src/elements/user/SessionList.ts

@@ -1,8 +1,8 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { uiConfig } from "@goauthentik/web/common/config";
-import "@goauthentik/web/elements/forms/DeleteBulkForm";
-import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { uiConfig } from "@goauthentik/common/ui/config";
+import "@goauthentik/elements/forms/DeleteBulkForm";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 
 import { t } from "@lingui/macro";
 
@@ -16,7 +16,7 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
     @property()
     targetUser!: string;
 
-    async apiEndpoint(page: number): Promise<AKResponse<AuthenticatedSession>> {
+    async apiEndpoint(page: number): Promise<PaginatedResponse<AuthenticatedSession>> {
         return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsList({
             userUsername: this.targetUser,
             ordering: this.order,

web/src/elements/user/UserConsentList.ts

@@ -1,8 +1,8 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import { uiConfig } from "@goauthentik/web/common/config";
-import "@goauthentik/web/elements/forms/DeleteBulkForm";
-import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { uiConfig } from "@goauthentik/common/ui/config";
+import "@goauthentik/elements/forms/DeleteBulkForm";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 
 import { t } from "@lingui/macro";
 
@@ -16,7 +16,7 @@ export class UserConsentList extends Table<UserConsent> {
     @property({ type: Number })
     userId?: number;
 
-    async apiEndpoint(page: number): Promise<AKResponse<UserConsent>> {
+    async apiEndpoint(page: number): Promise<PaginatedResponse<UserConsent>> {
         return new CoreApi(DEFAULT_CONFIG).coreUserConsentList({
             user: this.userId,
             ordering: this.order,

web/src/elements/user/UserDevicesList.ts

@@ -1,11 +1,8 @@
-import { AKResponse } from "@goauthentik/web/api/Client";
-import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
-import "@goauthentik/web/elements/forms/DeleteBulkForm";
-import { TableColumn } from "@goauthentik/web/elements/table/Table";
-import {
-    MFADevicesPage,
-    deviceTypeName,
-} from "@goauthentik/web/user/user-settings/mfa/MFADevicesPage";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/elements/forms/DeleteBulkForm";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { TableColumn } from "@goauthentik/elements/table/Table";
+import { MFADevicesPage, deviceTypeName } from "@goauthentik/user/user-settings/mfa/MFADevicesPage";
 
 import { t } from "@lingui/macro";
 
@@ -20,7 +17,7 @@ export class UserDeviceList extends MFADevicesPage {
     userId?: number;
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async apiEndpoint(page: number): Promise<AKResponse<Device>> {
+    async apiEndpoint(page: number): Promise<PaginatedResponse<Device>> {
         return new AuthenticatorsApi(DEFAULT_CONFIG)
             .authenticatorsAdminAllList({
                 user: this.userId,

web/src/elements/utils/TimeDeltaHelp.ts

@@ -1,17 +1,18 @@
-import "@goauthentik/web/elements/Tooltip";
+import { AKElement } from "@goauthentik/elements/Base";
+import "@goauthentik/elements/Tooltip";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-utils-time-delta-help")
-export class TimeDeltaHelp extends LitElement {
+export class TimeDeltaHelp extends AKElement {
     @property({ type: Boolean })
     negative = false;
 

web/src/elements/wizard/ActionWizardPage.ts

@@ -1,13 +1,13 @@
-import { EVENT_REFRESH } from "@goauthentik/web/constants";
-import { WizardAction } from "@goauthentik/web/elements/wizard/Wizard";
-import { WizardPage } from "@goauthentik/web/elements/wizard/WizardPage";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { WizardAction } from "@goauthentik/elements/wizard/Wizard";
+import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
 
 import { t } from "@lingui/macro";
 
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";

web/src/elements/wizard/FormWizardPage.ts

@@ -1,5 +1,5 @@
-import { Form } from "@goauthentik/web/elements/forms/Form";
-import { WizardPage } from "@goauthentik/web/elements/wizard/WizardPage";
+import { Form } from "@goauthentik/elements/forms/Form";
+import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
 
 import { t } from "@lingui/macro";
 

web/src/elements/wizard/Wizard.ts

@@ -1,6 +1,6 @@
-import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
-import "@goauthentik/web/elements/wizard/ActionWizardPage";
-import { WizardPage } from "@goauthentik/web/elements/wizard/WizardPage";
+import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
+import "@goauthentik/elements/wizard/ActionWizardPage";
+import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
 
 import { t } from "@lingui/macro";
 

web/src/elements/wizard/WizardFormPage.ts

@@ -1,10 +1,10 @@
-import { Form, KeyUnknown } from "@goauthentik/web/elements/forms/Form";
-import { WizardPage } from "@goauthentik/web/elements/wizard/WizardPage";
+import { Form, KeyUnknown } from "@goauthentik/elements/forms/Form";
+import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
 
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";

web/src/elements/wizard/WizardPage.ts

@@ -1,13 +1,14 @@
-import { Wizard } from "@goauthentik/web/elements/wizard/Wizard";
+import { AKElement } from "@goauthentik/elements/Base";
+import { Wizard } from "@goauthentik/elements/wizard/Wizard";
 
-import { CSSResult, LitElement, PropertyDeclaration, TemplateResult, html } from "lit";
+import { CSSResult, PropertyDeclaration, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/web/authentik.css";
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-wizard-page")
-export class WizardPage extends LitElement {
+export class WizardPage extends AKElement {
     static get styles(): CSSResult[] {
         return [PFBase, AKGlobal];
     }
@@ -37,7 +38,7 @@ export class WizardPage extends LitElement {
     ): void {
         this.querySelectorAll("*").forEach((el) => {
             if ("requestUpdate" in el) {
-                (el as LitElement).requestUpdate();
+                (el as AKElement).requestUpdate();
             }
         });
         return super.requestUpdate(name, oldValue, options);