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>

authentik/core/templates/base/skeleton.html

@@ -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 %}

web/src/elements/Base.ts

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