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

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-16 17:09:52 +01:00
parent 0d9db1b6f2
commit e45bc3834a
6 changed files with 18 additions and 19 deletions

View file

@ -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-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/patternfly-base.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 %}

View file

@ -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" },
];

View file

@ -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 {

View file

@ -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() {

View file

@ -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<void> {

View file

@ -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() {