feat: allow external css loaded in auth app

Author: cillies-finatix

apps/auth/public/index.html

@@ -13,5 +13,22 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script type="application/javascript">
+        ((global, doc) => {
+            const query = new Map(global.location.search.substring(1).split('&').map(str => str.split('=')));
+            const cssQuery = query.has('css') ? global.decodeURIComponent(query.get('css')) : undefined;
+
+            if (!cssQuery) { return; }
+
+            const cssId = global.btoa(cssQuery);
+            if (!doc.getElementById(cssId)) {
+                // console.log("cssQuery", cssQuery, cssId);
+                const file = doc.createElement("link");
+                file.rel = "stylesheet";
+                file.href = cssQuery;
+                doc.body.appendChild(file);
+            }
+        })(window, document);
+    </script>
   </body>
 </html>

apps/auth/src/App.vue

@@ -31,16 +31,13 @@
 </template>
 
 <script setup lang="ts">
-import { AuthAppHeaderBar } from "hackathon-demo/libs/components";
-import {
-  useSolidProfile,
-  useSolidSession,
-} from "hackathon-demo/libs/composables";
+import appLogo from "@/assets/logo.svg";
+import {AuthAppHeaderBar} from "hackathon-demo/libs/components";
+import {useSolidProfile, useSolidSession,} from "hackathon-demo/libs/composables";
 import Card from "primevue/card";
 import Toast from "primevue/toast";
-import { computed } from "vue";
+import {computed} from "vue";
 import router from "./router";
-import appLogo from "@/assets/logo.svg";
 
 const { session, restoreSession } = useSolidSession();
 const { memberOf } = useSolidProfile();
@@ -51,10 +48,8 @@ const isLoggedIn = computed(() => {
   );
 });
 
-console.log(appLogo);
-
 // re-use Solid session
-router.isReady().then(restoreSession);
+router.isReady().then(() => restoreSession());
 </script>
 
 <style>

apps/tom/public/auth.css

@@ -0,0 +1,4 @@
+:root {
+    --shared-auth-app-header-bar-background-color-from: #ff0;
+    --shared-auth-app-header-bar-background-color-to: #ff0;
+}