web: use ShadowDom for all elements, embed smaller CSS in skeleton

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

authentik/core/templates/base/skeleton.html

@@ -11,9 +11,7 @@
         <title>{% block title %}{% trans title|default:config.authentik.branding.title %}{% endblock %}</title>
         <link rel="icon" type="image/png" href="{% static 'dist/assets/icons/icon.png' %}?v={{ ak_version }}">
         <link rel="shortcut icon" type="image/png" href="{% static 'dist/assets/icons/icon.png' %}?v={{ ak_version }}">
-        <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.css' %}?v={{ ak_version }}">
+        <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly-base.css' %}?v={{ ak_version }}">
-        <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly-addons.css' %}?v={{ ak_version }}">
-        <link rel="stylesheet" type="text/css" href="{% static 'dist/fontawesome.min.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
         <script src="{% url 'javascript-catalog' %}?v={{ ak_version }}"></script>
         {% block head %}

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-base.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/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" },
 ];

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 {
+    static get styles(): CSSResult[] {
-        return this;
+        return COMMON_STYLES;
     }
 
     firstUpdated(): void {

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 {
+    static get styles(): CSSResult[] {
-        return this;
+        return COMMON_STYLES;
     }
 
     constructor() {

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 {
+    static get styles(): CSSResult[] {
-        return this;
+        return COMMON_STYLES;
     }
 
     async register(): Promise<void> {

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 {
+    static get styles(): CSSResult[] {
-        return this;
+        return COMMON_STYLES;
     }
 
     constructor() {