Extended

script.js

@@ -1,3 +1,25 @@
+document.querySelectorAll("link[rel~='icon']").forEach(el => el.href = "https://gitlab.ms-ds.org/msds/icons/-/raw/main/icons/schmoekerei.png");
+document.title = "Schmökerei";
+
+const s1 = document.createElement('script');
+s1.src = "https://auth.xn--schmkerei-37a.de/js/keycloak.js";
+s1.type = "text/javascript";
+document.head.appendChild(s1);
+
+var s2 = document.createElement('script');
+s2.setAttribute("defer", "");
+s2.setAttribute("event-source", "Heimdall");
+s2.setAttribute("data-domain", "schmökerei.de");
+s2.src = "https://plsbl.ms-ds.org/js/script.pageview-props.outbound-links.js";
+document.head.appendChild(s2);
+
+const headEl = document.createElement('h1');
+headEl.id = "headGreeting";
+headEl.innerHTML = "Hallo!";
+headEl.style.color = "white";
+document.querySelector("#main").prepend(headEl);
+
+s1.onload = function() {
     console.log("Keycloak Script running!");
     const keycloak = new Keycloak({
         realm: "schmoekerei",
@@ -8,9 +30,14 @@ const keycloak = new Keycloak({
     keycloak.init({ onLoad: 'login-required' }).then(function(authenticated) {
         if (authenticated) {
             console.log("User is authenticated");
+
+            const userProfile = keycloak.tokenParsed;
+            const firstName = userProfile.given_name;
+        
+            headEl.innerHTML = `Hallo, ${firstName}!`;
         }
     }).catch(function() {
-    console.error("Authenticated Failed");
+        console.error("Authentication Failed");
     });
 
     const wrapper = document.querySelector("#config-buttons");
@@ -19,3 +46,4 @@ kcUserLink.href = "https://auth.xn--schmkerei-37a.de/realms/schmoekerei/account"
     kcUserLink.id = "kcUserSettings";
     wrapper.append(kcUserLink);
     kcUserLink.querySelector("div").innerHTML = "Account-Einstellungen";
+}