From 118765ab30e5e277c0c99ab497fc82c6281e8ee0 Mon Sep 17 00:00:00 2001
From: Jens L <jens.langhammer@beryju.org>
Date: Mon, 27 Feb 2023 19:54:19 +0100
Subject: [PATCH] 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 |  2 +-
 web/src/elements/Base.ts                    | 36 +++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/authentik/core/templates/base/skeleton.html b/authentik/core/templates/base/skeleton.html
index 97235f986..f02746ab2 100644
--- a/authentik/core/templates/base/skeleton.html
+++ b/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 %}
diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts
index 477bfe36b..b0ef1483a 100644
--- a/web/src/elements/Base.ts
+++ b/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() {