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:
parent
5e60db8593
commit
118765ab30
|
@ -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 %}
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Reference in New Issue