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

web: full web components part 1 (#4964)

Browse Source 
* migrate loading

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* migrate api browser

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* migrate base css

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* move tenant fetching to base interface

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* import pre-loaded stages in flow interface and not executor to strip down executor size

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix redirect and such

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-03-17 23:10:19 +01:00
committed by GitHub
parent bebf18f257
commit e2d3a95c80
23 changed files with 251 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,15 @@
import { tenant } from "@goauthentik/common/api/config";
import { EVENT_LOCALE_CHANGE, EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
import { uiConfig } from "@goauthentik/common/ui/config";
import { LitElement } from "lit";
import { state } from "lit/decorators.js";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
import ThemeDark from "@goauthentik/common/styles/theme-dark.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { UiThemeEnum } from "@goauthentik/api";
import { CurrentTenant, UiThemeEnum } from "@goauthentik/api";
export function rootInterface(): Interface | undefined {
const el = Array.from(document.body.querySelectorAll("*")).filter(
@ -165,6 +168,15 @@ export class AKElement extends LitElement {
}
export class Interface extends AKElement {
@state()
tenant?: CurrentTenant;
constructor() {
super();
document.adoptedStyleSheets = [...document.adoptedStyleSheets, PFBase];
tenant().then((tenant) => (this.tenant = tenant));
}
_activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum): void {
super._activateTheme(root, theme);
super._activateTheme(document, theme);

1
web/src/elements/cards/AggregateCard.ts
View File

@ -34,7 +34,6 @@ export class AggregateCard extends AKElement {
.center-value {
font-size: var(--pf-global--icon--FontSize--lg);
text-align: center;
color: var(--pf-global--Color--100);
}
.subtext {
font-size: var(--pf-global--FontSize--sm);

19
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -1,11 +1,9 @@
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 { AKElement, rootInterface } from "@goauthentik/elements/Base";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { customElement } from "lit/decorators.js";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
@ -30,9 +28,6 @@ export const DefaultTenant: CurrentTenant = {
@customElement("ak-sidebar-brand")
export class SidebarBrand extends AKElement {
@property({ attribute: false })
tenant: CurrentTenant = DefaultTenant;
static get styles(): CSSResult[] {
return [
PFBase,
@ -69,11 +64,6 @@ export class SidebarBrand extends AKElement {
});
}
firstUpdated(): void {
configureSentry(true);
tenant().then((tenant) => (this.tenant = tenant));
}
render(): TemplateResult {
return html` ${window.innerWidth <= MIN_WIDTH
? html`
@ -95,7 +85,10 @@ export class SidebarBrand extends AKElement {
<a href="#/" class="pf-c-page__header-brand-link">
<div class="pf-c-brand ak-brand">
<img
src="${first(this.tenant.brandingLogo, DefaultTenant.brandingLogo)}"
src="${first(
rootInterface()?.tenant?.brandingLogo,
DefaultTenant.brandingLogo,
)}"
alt="authentik Logo"
loading="lazy"
/>