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 %}
|
||||
{% endblock %}
|
||||
<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>
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
|
|
|
@ -2,10 +2,46 @@ import { EVENT_LOCALE_CHANGE } from "@goauthentik/common/constants";
|
|||
|
||||
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 {
|
||||
constructor() {
|
||||
super();
|
||||
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() {
|
||||
|
|
Reference in a new issue