web: fetch custom.css via fetch and add stylesheet (#4804)

* web: fetch custom.css via fetch and add stylesheet

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

* don't hardcode path

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

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L 2023-02-27 19:54:19 +01:00 committed by GitHub
parent 5e60db8593
commit 118765ab30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 1 deletions

View File

@ -16,7 +16,7 @@
{% block head_before %} {% block head_before %}
{% endblock %} {% endblock %}
<link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'dist/custom.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'dist/custom.css' %}" data-inject>
<script src="{% static 'dist/poly.js' %}" type="module"></script> <script src="{% static 'dist/poly.js' %}" type="module"></script>
{% block head %} {% block head %}
{% endblock %} {% endblock %}

View File

@ -2,10 +2,46 @@ import { EVENT_LOCALE_CHANGE } from "@goauthentik/common/constants";
import { LitElement } from "lit"; import { LitElement } from "lit";
let css: Promise<string[]> | undefined;
function fetchCustomCSS(): Promise<string[]> {
if (!css) {
css = Promise.all(
Array.of(...document.head.querySelectorAll<HTMLLinkElement>("link[data-inject]")).map(
(link) => {
return fetch(link.href)
.then((res) => {
return res.text();
})
.finally(() => {
return "";
});
},
),
);
}
return css;
}
export class AKElement extends LitElement { export class AKElement extends LitElement {
constructor() { constructor() {
super(); super();
this.addEventListener(EVENT_LOCALE_CHANGE, this._handleLocaleChange); this.addEventListener(EVENT_LOCALE_CHANGE, this._handleLocaleChange);
fetchCustomCSS().then((sheets) => {
sheets.map((css) => {
if (css === "") {
return;
}
new CSSStyleSheet().replace(css).then((sheet) => {
if (!this.shadowRoot) {
return;
}
this.shadowRoot.adoptedStyleSheets = [
...this.shadowRoot.adoptedStyleSheets,
sheet,
];
});
});
});
} }
disconnectedCallback() { disconnectedCallback() {