nach AI vibe coding

public/app.js

@@ -1,35 +1,84 @@
+// ==== app.js ====
+
+// Service-Liste
 const services = [
-  {
-    id: "abc",
-    name: "Control GamePad",
-    url: "https://thinkcentre.local:10010/"
-  },
-  {
-    id: "xyz",
-    name: "Guacamole",
-    url: "http://thinkcentre.local:8080/"
-  }
+  { id: "abc", name: "Control GamePad", url: "https://abc.server.schooltech.ch" },
+  { id: "xyz", name: "Guacamole", url: "https://xyz.server.schooltech.ch" }
 ];
 
+// DOM-Elemente
+const iframe = document.getElementById("service-frame");
+const loginModal = document.getElementById("login-modal");
+const loginBtn = document.getElementById("login-btn");
+const loginSubmit = document.getElementById("login-submit");
+const loginMsg = document.getElementById("login-msg");
 const nav = document.getElementById("services");
-const grid = document.getElementById("service-grid");
 
-services.forEach(svc => {
-  // Header Button
-  const btn = document.createElement("button");
-  btn.textContent = svc.name;
-  btn.onclick = () => go(svc);
-  nav.appendChild(btn);
+let loggedIn = false;
 
-  // Card
-  const card = document.createElement("div");
-  card.className = "service-card";
-  card.textContent = svc.name;
-  card.onclick = () => go(svc);
-  grid.appendChild(card);
-});
+// === Login Modal anzeigen ===
+loginBtn.onclick = () => {
+    loginModal.style.display = "block";
+};
 
-function go(service) {
-  localStorage.setItem("lastService", service.id);
-  window.location.href = service.url;
+// === Login Submit ===
+loginSubmit.onclick = async () => {
+    const user = document.getElementById("username").value;
+    const pass = document.getElementById("password").value;
+
+    try {
+        const res = await fetch("/api/login", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ user, pass })
+        });
+
+        if (res.ok) {
+            loggedIn = true;
+            loginModal.style.display = "none";
+            loginMsg.textContent = "";
+            setupServiceButtons();
+        } else {
+            loginMsg.textContent = "Login fehlgeschlagen";
+        }
+    } catch (e) {
+        loginMsg.textContent = "Fehler: " + e.message;
+    }
+};
+
+// === Service Buttons dynamisch erstellen ===
+function setupServiceButtons() {
+    nav.innerHTML = ""; // clear
+    services.forEach(svc => {
+        const btn = document.createElement("button");
+        btn.textContent = svc.name;
+        btn.onclick = async () => {
+            console.log('Button clicked, opening', svc.id);
+            try{
+                await fetch('/api/event', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ event: 'open', service: svc.id, url: svc.url })
+                });
+            }catch(e){ console.error('Event log failed', e); }
+            openService(svc);
+        };
+        nav.appendChild(btn);
+    });
+}
+
+// === Service in iFrame öffnen ===
+function openService(svc) {
+    iframe.src = svc.url;
+    iframe.style.display = "block";
+    window.scrollTo(0,0);
+}
+
+// Optional: Logout-Funktion
+function logout() {
+    loggedIn = false;
+    iframe.src = "";
+    iframe.style.display = "none";
+    nav.innerHTML = "";
+    loginModal.style.display = "block";
 }

public/index.html

@@ -9,19 +9,28 @@
 
 <header id="header">
   <div class="logo">schooltech</div>
-  <nav id="services">
-    <!-- dynamisch -->
-  </nav>
-  <div class="user">User</div>
+  <nav id="services"></nav>
+  <div class="user">
+    <button id="login-btn">Login</button>
+  </div>
 </header>
 
 <main>
-  <h1>Willkommen</h1>
-  <p>Bitte wählen Sie einen Service.</p>
+  <h1>Willkommen im Service Portal</h1>
 
-  <div id="service-grid"></div>
+  <!-- iFrame für Services -->
+  <iframe id="service-frame" style="width:100%;height:80vh;display:none;"></iframe>
+
+  <!-- Login Modal -->
+  <div id="login-modal" style="display:none;">
+    <label>User: <input type="text" id="username"/></label>
+    <label>Pass: <input type="password" id="password"/></label>
+    <button id="login-submit">Login</button>
+    <div id="login-msg"></div>
+  </div>
 </main>
 
+
 <script src="app.js"></script>
 </body>
 </html>