From e45bc3834a3674f0e314abcadd964f50e039f17f Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Tue, 16 Mar 2021 17:09:52 +0100 Subject: [PATCH] web: use ShadowDom for all elements, embed smaller CSS in skeleton Signed-off-by: Jens Langhammer --- authentik/core/templates/base/skeleton.html | 4 +--- web/rollup.config.js | 5 +---- web/src/elements/messages/Message.ts | 7 ++++--- web/src/elements/messages/MessageContainer.ts | 7 ++++--- .../WebAuthnAuthenticatorRegisterStage.ts | 7 ++++--- web/src/interfaces/Interface.ts | 7 ++++--- 6 files changed, 18 insertions(+), 19 deletions(-) diff --git a/authentik/core/templates/base/skeleton.html b/authentik/core/templates/base/skeleton.html index 5944f4160..e22bd2565 100644 --- a/authentik/core/templates/base/skeleton.html +++ b/authentik/core/templates/base/skeleton.html @@ -11,9 +11,7 @@ {% block title %}{% trans title|default:config.authentik.branding.title %}{% endblock %} - - - + {% block head %} diff --git a/web/rollup.config.js b/web/rollup.config.js index 3c7cdc794..b39a777c1 100644 --- a/web/rollup.config.js +++ b/web/rollup.config.js @@ -8,12 +8,9 @@ import copy from "rollup-plugin-copy"; import externalGlobals from "rollup-plugin-external-globals"; const resources = [ - { src: "node_modules/@patternfly/patternfly/patternfly.css", dest: "dist/" }, - { src: "node_modules/@patternfly/patternfly/patternfly-addons.css", dest: "dist/" }, - { src: "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css", dest: "dist/" }, + { src: "node_modules/@patternfly/patternfly/patternfly-base.css", dest: "dist/" }, { src: "node_modules/@patternfly/patternfly/assets/*", dest: "dist/assets/" }, { src: "src/index.html", dest: "dist" }, - { src: "src/authentik.css", dest: "dist" }, { src: "src/assets/*", dest: "dist/assets" }, { src: "./icons/*", dest: "dist/assets/icons" }, ]; diff --git a/web/src/elements/messages/Message.ts b/web/src/elements/messages/Message.ts index 55adf7ea9..b36969239 100644 --- a/web/src/elements/messages/Message.ts +++ b/web/src/elements/messages/Message.ts @@ -1,4 +1,5 @@ -import { customElement, html, LitElement, property, TemplateResult } from "lit-element"; +import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; +import { COMMON_STYLES } from "../../common/styles"; export interface APIMessage { level_tag: string; @@ -25,8 +26,8 @@ export class Message extends LitElement { @property({attribute: false}) onRemove?: (m: APIMessage) => void; - createRenderRoot(): ShadowRoot | Element { - return this; + static get styles(): CSSResult[] { + return COMMON_STYLES; } firstUpdated(): void { diff --git a/web/src/elements/messages/MessageContainer.ts b/web/src/elements/messages/MessageContainer.ts index 3ed15286a..05a7409c3 100644 --- a/web/src/elements/messages/MessageContainer.ts +++ b/web/src/elements/messages/MessageContainer.ts @@ -1,5 +1,6 @@ import { gettext } from "django"; -import { LitElement, html, customElement, TemplateResult, property } from "lit-element"; +import { LitElement, html, customElement, TemplateResult, property, CSSResult } from "lit-element"; +import { COMMON_STYLES } from "../../common/styles"; import "./Message"; import { APIMessage } from "./Message"; @@ -21,8 +22,8 @@ export class MessageContainer extends LitElement { messageSocket?: WebSocket; retryDelay = 200; - createRenderRoot(): ShadowRoot | Element { - return this; + static get styles(): CSSResult[] { + return COMMON_STYLES; } constructor() { diff --git a/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts b/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts index 909797e49..cd08c38b2 100644 --- a/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts +++ b/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts @@ -1,6 +1,7 @@ import { gettext } from "django"; -import { customElement, html, property, TemplateResult } from "lit-element"; +import { CSSResult, customElement, html, property, TemplateResult } from "lit-element"; import { WithUserInfoChallenge } from "../../../api/Flows"; +import { COMMON_STYLES } from "../../../common/styles"; import { SpinnerSize } from "../../../elements/Spinner"; import { BaseStage } from "../base"; import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils"; @@ -25,8 +26,8 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage { @property() registerMessage = ""; - createRenderRoot(): Element | ShadowRoot { - return this; + static get styles(): CSSResult[] { + return COMMON_STYLES; } async register(): Promise { diff --git a/web/src/interfaces/Interface.ts b/web/src/interfaces/Interface.ts index 691e00cc0..c38054bd4 100644 --- a/web/src/interfaces/Interface.ts +++ b/web/src/interfaces/Interface.ts @@ -1,11 +1,12 @@ import { gettext } from "django"; -import { html, LitElement, property, TemplateResult } from "lit-element"; +import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element"; import { SidebarItem } from "../elements/sidebar/Sidebar"; import "../elements/router/RouterOutlet"; import "../elements/messages/MessageContainer"; import "../elements/sidebar/SidebarHamburger"; import "../elements/notifications/NotificationDrawer"; +import { COMMON_STYLES } from "../common/styles"; export abstract class Interface extends LitElement { @property({type: Boolean}) @@ -16,8 +17,8 @@ export abstract class Interface extends LitElement { abstract get sidebar(): SidebarItem[]; - createRenderRoot(): ShadowRoot | Element { - return this; + static get styles(): CSSResult[] { + return COMMON_STYLES; } constructor() {