VibeCode umgeschrieben

public/app.js

@@ -1,10 +1,10 @@
-// ==== app.js ====
+// ==== FRONTEND app.js ====
 
 // Service-Liste
 const services = [
   { id: "abc", name: "Control GamePad", url: "https://abc.server.schooltech.ch/" },
   { id: "xyz", name: "Guacamole", url: "https://xyz.server.schooltech.ch/" },
-  { id: "portainer", name: "Portainer", url: "https://portainer.server.schooltech.ch/"}
+  { id: "portainer", name: "Portainer", url: "https://portainer.server.schooltech.ch/" }
 ];
 
 // DOM-Elemente
@@ -20,12 +20,46 @@ const passwordInput = document.getElementById("password");
 
 let loggedIn = false;
 
-// === Login Modal anzeigen ===
+// ===========================
-loginBtn.onclick = () => {
+// Login anzeigen
+// ===========================
+function switchToLogin() {
+    loginBtn.textContent = "Login";
+    loginBtn.onclick = () => {
         loginModal.style.display = "block";
-};
+    };
+}
 
-// === Login-Logik als wiederverwendbare Funktion ===
+// ===========================
+// Logout anzeigen
+// ===========================
+function switchToLogout() {
+    loginBtn.textContent = "Logout";
+    loginBtn.onclick = async () => {
+        try {
+            await fetch("/api/logout", { method: "POST" });
+        } catch (e) {
+            console.warn("Logout request failed:", e);
+        }
+        performLocalLogout();
+    };
+}
+
+// ===========================
+// Lokales Logout
+// ===========================
+function performLocalLogout() {
+    loggedIn = false;
+    iframe.src = "";
+    iframe.style.display = "none";
+    nav.innerHTML = "";
+    loginModal.style.display = "block";
+    switchToLogin();
+}
+
+// ===========================
+// Login-Logik
+// ===========================
 async function doLogin() {
     const user = usernameInput.value;
     const pass = passwordInput.value;
@@ -42,7 +76,7 @@ async function doLogin() {
             loginModal.style.display = "none";
             loginMsg.textContent = "";
             setupServiceButtons();
-            switchToLogout(); // Button-Text/Handler anpassen (siehe weiter unten)
+            switchToLogout();
         } else {
             loginMsg.textContent = "Login fehlgeschlagen";
         }
@@ -53,7 +87,7 @@ async function doLogin() {
 
 loginSubmit.onclick = doLogin;
 
-// Enter / Return auf Passwort- und Benutzerfeld auslösen Login
+// Enter-Taste Login
 [usernameInput, passwordInput].forEach(input => {
     input.addEventListener('keydown', (e) => {
         if (e.key === 'Enter') {
@@ -63,80 +97,57 @@ loginSubmit.onclick = doLogin;
     });
 });
 
-// === Service Buttons dynamisch erstellen ===
+// ===========================
+// Buttons erzeugen
+// ===========================
 function setupServiceButtons() {
-    nav.innerHTML = ""; // clear
+    nav.innerHTML = "";
     services.forEach(svc => {
         const btn = document.createElement("button");
         btn.textContent = svc.name;
         btn.onclick = async () => {
-            console.log('Button clicked, opening', svc.id);
+            try {
-            try{
                 await fetch('/api/event', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ event: 'open', service: svc.id, url: svc.url })
+                    body: JSON.stringify({
+                        event: 'open',
+                        service: svc.id,
+                        url: svc.url
+                    })
                 });
-            }catch(e){ console.error('Event log failed', e); }
+            } catch(e) {
+                console.error('Event log failed', e);
+            }
             openService(svc);
         };
         nav.appendChild(btn);
     });
 }
 
-// === Service in iFrame öffnen ===
+// ===========================
+// Service öffnen
+// ===========================
 function openService(svc) {
     iframe.src = svc.url;
     iframe.style.display = "block";
     window.scrollTo(0,0);
 }
 
-// Optional: Logout-Funktion
+// ===========================
-function logout() {
+// Session Status beim Laden prüfen
-    loggedIn = false;
+// ===========================
-    iframe.src = "";
+(async function checkStatus() {
-    iframe.style.display = "none";
-    nav.innerHTML = "";
-    loginModal.style.display = "block";
-}
-
-// Setzt Login-Button so, dass er Logout macht
-function switchToLogout() {
-    loginBtn.textContent = "Logout";
-    loginBtn.onclick = async () => {
-        // Option: serverseitiges Logout anstoßen (löscht Cookie / Session)
     try {
-            await fetch("/api/logout", { method: "POST" });
+        const r = await fetch('/api/status');
-        } catch (e) {
+        if (r.ok) {
-            console.warn("Logout request failed:", e);
+            loggedIn = true;
-        }
+            setupServiceButtons();
-        performLocalLogout();
+            switchToLogout();
-    };
+        } else {
-}
-
-// Setzt Login-Button zurück auf Login (zeigt Modal)
-function switchToLogin() {
-    loginBtn.textContent = "Login";
-    loginBtn.onclick = () => { loginModal.style.display = "block"; };
-}
-
-// Lokale UI-Aufräumarbeiten bei Logout
-function performLocalLogout() {
-    loggedIn = false;
-    iframe.src = "";
-    iframe.style.display = "none";
-    nav.innerHTML = "";
-    loginModal.style.display = "block";
             switchToLogin();
-}
+        }
-
+    } catch (e) {
-// Setzen des Cookies für die Sitzung
+        switchToLogin();
-function setSessionCookie(res, user) {
+    }
-    res.cookie("SESSIONID", "session-"+user, {
+})();
-        httpOnly: true,
-        secure: true,                // zwingend bei SameSite=None
-        domain: ".server.schooltech.ch",
-        sameSite: "None",
-        path: "/"
-    });
-}