creating login function

assets/css/custom.css

@@ -40,7 +40,7 @@ body {
     padding: 20px;
 }
 /* Cards/Scores styles */
-.container > div {
+.container > div:not(.modal) {
     background-color:#ffffff;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0,0,0,0.1);
@@ -50,11 +50,24 @@ body {
     text-align: center;
     transition: transform 0.3s, box-shadow 0.3s;
 }  
-.container > div:hover {
+.container > div:not(.modal):hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0,0,0,0.2);
 }
 
+/* Keep Bootstrap modal sizing/layout intact */
+#password-modal {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    font-size: 1rem;
+}
+
+#password-modal .modal-dialog {
+    max-width: 560px;
+}
+
 /* Überschriften und Abstände  */
 h1, h2, h3, h4, h5, h6 {
     margin-top: 1rem;
@@ -67,7 +80,7 @@ p {
     color: #333;
 }
 /* Button Styles */
-button, .btn {
+.btn {
     background-color: #4a6fa5;
     color: #fff;
     border: none;
@@ -77,9 +90,22 @@ button, .btn {
     font-size: 16px;
     transition: background-color 0.3s;
 }
-button:hover, .btn:hover {
+.btn:hover {
     background-color: #2b4a7c;
 }
+.btn-danger {
+    background-color: #a84848;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+.btn-danger:hover {
+    background-color: #8a3b3b;
+}
 #page-wrapper {
     display: flex;
     min-height: 100vh;
@@ -153,7 +179,7 @@ button:hover, .btn:hover {
     body {
         font-size: 0.9rem;
     }
-    .container > div {
+    .container > div:not(.modal) {
         flex: 1 1 calc(50% - 40px);
     }
     #page-wrapper {
@@ -173,7 +199,7 @@ button:hover, .btn:hover {
     body {
         font-size: 1.1rem;
     }
-    .container div {
+    .container > div:not(.modal) {
         flex: 1 1 calc(25% - 40px);
     }
     p.columns{

index.html

@@ -44,9 +44,6 @@
             <!--Topbar-->
             <header id="topbar">
                 <h1 class="text-center mb-4">Dashboard</h1>
-                <div class="user-info">
-                    <span id="username-display">👤 Guest</span>
-                </div>
             </header>
 
             <!-- Content -->
@@ -56,6 +53,11 @@
 
     <!-- Bootstrap JS Bundle -->
     <script src="assets/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/src/service/config-service.js"></script>
+    <script src="assets/src/service/user-service.js"></script>
+    <script src="assets/src/service/score-service.js"></script>
+    <script src="assets/src/service/leaderboard-service.js"></script>
+    <script src="js/login.js"></script>
     <!--Navigation Script -->
     <script src="js/navigation.js"></script>
 

js/login.js

@@ -0,0 +1,288 @@
+(function () {
+  const AUTH_STORAGE_KEY = "loremIpsumAuth";
+
+  function readAuth() {
+    const raw = localStorage.getItem(AUTH_STORAGE_KEY);
+    if (!raw) {
+      return null;
+    }
+
+    try {
+      const parsed = JSON.parse(raw);
+      if (!parsed.username || !parsed.password) {
+        return null;
+      }
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+
+  function saveAuth(username, password) {
+    localStorage.setItem(
+      AUTH_STORAGE_KEY,
+      JSON.stringify({ username: username, password: password }),
+    );
+  }
+
+  function clearAuth() {
+    localStorage.removeItem(AUTH_STORAGE_KEY);
+  }
+
+  function updateHeaderUsername() {
+    const usernameDisplay = document.getElementById("username-display");
+    const navbarLogin = document.getElementById("navbar-login");
+    const auth = readAuth();
+
+    if (usernameDisplay) {
+      usernameDisplay.textContent = auth ? "User: " + auth.username : "User: Guest";
+    }
+
+    if (navbarLogin) {
+      navbarLogin.textContent = auth ? auth.username : "Login / Registrieren";
+    }
+  }
+
+  function setFeedback(message, type) {
+    const feedback = document.getElementById("auth-feedback");
+    if (!feedback) {
+      return;
+    }
+
+    feedback.className = "alert alert-" + type;
+    feedback.textContent = message;
+    feedback.classList.remove("d-none");
+  }
+
+  function updateSessionBox() {
+    const sessionText = document.getElementById("current-session-text");
+    const logoutButton = document.getElementById("logout-button");
+    const deleteAccountButton = document.getElementById("delete-account-button");
+    const currentSessionBox = document.getElementById("current-session-box");
+    const authFormsRow = document.getElementById("auth-forms-row");
+
+    if (!sessionText || !logoutButton || !deleteAccountButton || !currentSessionBox || !authFormsRow) {
+      return;
+    }
+
+    const auth = readAuth();
+    if (auth) {
+      sessionText.textContent = "Eingeloggt als " + auth.username + ".";
+      logoutButton.disabled = false;
+      deleteAccountButton.disabled = false;
+      currentSessionBox.classList.remove("d-none");
+      authFormsRow.classList.add("d-none");
+    } else {
+      sessionText.textContent = "Nicht eingeloggt.";
+      logoutButton.disabled = true;
+      deleteAccountButton.disabled = true;
+      currentSessionBox.classList.add("d-none");
+      authFormsRow.classList.remove("d-none");
+    }
+  }
+
+  function getUserService() {
+    if (!window.config || !window.UserService) {
+      return null;
+    }
+
+    return new window.UserService(window.config);
+  }
+
+  async function handleLoginSubmit(event) {
+    event.preventDefault();
+
+    const userService = getUserService();
+    if (!userService) {
+      setFeedback("User-Service konnte nicht geladen werden.", "danger");
+      return;
+    }
+
+    const usernameInput = document.getElementById("login-username");
+    const passwordInput = document.getElementById("login-password");
+    const username = usernameInput.value.trim();
+    const password = passwordInput.value.trim();
+
+    if (!username || !password) {
+      setFeedback("Bitte Username und Passwort eingeben.", "warning");
+      return;
+    }
+
+    const result = await userService.getUser(username, password);
+    if (result.ok) {
+      saveAuth(username, password);
+      setFeedback("Login erfolgreich.", "success");
+      updateSessionBox();
+      updateHeaderUsername();
+      setTimeout(function() {
+        if (typeof window.loadPage === "function") {
+          window.loadPage("home", "nav-home");
+        }
+      }, 500);
+      return;
+    }
+
+    if (result.status === 401) {
+      setFeedback("Login fehlgeschlagen: Username oder Passwort ist falsch.", "danger");
+      return;
+    }
+
+    setFeedback("Login fehlgeschlagen (Status " + result.status + ").", "danger");
+  }
+
+  async function handleRegisterSubmit(event) {
+    event.preventDefault();
+
+    const userService = getUserService();
+    if (!userService) {
+      setFeedback("User-Service konnte nicht geladen werden.", "danger");
+      return;
+    }
+
+    const usernameInput = document.getElementById("register-username");
+    const username = usernameInput.value.trim();
+
+    if (!username) {
+      setFeedback("Bitte einen Username eingeben.", "warning");
+      return;
+    }
+
+    const result = await userService.postUser(username);
+    if (result.ok && result.body) {
+      const createdName = result.body.name || username;
+      const createdPassword = result.body.password || "";
+
+      saveAuth(createdName, createdPassword);
+      updateSessionBox();
+      updateHeaderUsername();
+
+      // Modal mit Daten füllen und anzeigen
+      const modalUsername = document.getElementById("modal-username");
+      const modalPassword = document.getElementById("modal-password");
+      if (modalUsername) modalUsername.textContent = createdName;
+      if (modalPassword) modalPassword.textContent = createdPassword;
+
+      const passwordModalElement = document.getElementById("password-modal");
+      if (passwordModalElement) {
+        const passwordModal = new window.bootstrap.Modal(passwordModalElement);
+        
+        // Listener für Modals-Schließen: zur Startseite navigieren
+        passwordModalElement.addEventListener("hidden.bs.modal", function handleClose() {
+          if (typeof window.loadPage === "function") {
+            window.loadPage("home", "nav-home");
+          }
+          passwordModalElement.removeEventListener("hidden.bs.modal", handleClose);
+        });
+
+        passwordModal.show();
+      } else {
+        // Fallback wenn Modal nicht gefunden
+        setFeedback(
+          "Account erstellt. Username: " + createdName + ", Passwort: " + createdPassword,
+          "success",
+        );
+        setTimeout(function() {
+          if (typeof window.loadPage === "function") {
+            window.loadPage("home", "nav-home");
+          }
+        }, 1500);
+      }
+
+      const loginUsernameInput = document.getElementById("login-username");
+      const loginPasswordInput = document.getElementById("login-password");
+      if (loginUsernameInput && loginPasswordInput) {
+        loginUsernameInput.value = createdName;
+        loginPasswordInput.value = createdPassword;
+      }
+
+      return;
+    }
+
+    if (result.status === 400) {
+      const errorMessage = result.body && result.body.message
+        ? result.body.message
+        : "Dieser Username existiert bereits.";
+      setFeedback(errorMessage, "danger");
+      return;
+    }
+
+    setFeedback(
+      "Account konnte nicht erstellt werden (Status " + result.status + ").",
+      "danger",
+    );
+  }
+
+  function handleLogout() {
+    clearAuth();
+    setFeedback("Du wurdest ausgeloggt.", "info");
+    updateSessionBox();
+    updateHeaderUsername();
+  }
+
+  async function handleDeleteAccount() {
+    const auth = readAuth();
+    if (!auth) {
+      setFeedback("Du bist nicht eingeloggt.", "warning");
+      return;
+    }
+
+    const wantsDelete = window.confirm(
+      "Möchtest du den Account \"" + auth.username + "\" wirklich löschen?",
+    );
+    if (!wantsDelete) {
+      return;
+    }
+
+    const userService = getUserService();
+    if (!userService) {
+      setFeedback("User-Service konnte nicht geladen werden.", "danger");
+      return;
+    }
+
+    const result = await userService.deleteUser(auth.username, auth.password);
+    if (result.ok) {
+      clearAuth();
+      updateSessionBox();
+      updateHeaderUsername();
+      setFeedback("Account wurde gelöscht.", "success");
+      return;
+    }
+
+    if (result.status === 401) {
+      setFeedback("Account konnte nicht gelöscht werden: nicht autorisiert.", "danger");
+      return;
+    }
+
+    setFeedback(
+      "Account konnte nicht gelöscht werden (Status " + result.status + ").",
+      "danger",
+    );
+  }
+
+  function initLoginPage() {
+    const loginForm = document.getElementById("login-form");
+    const registerForm = document.getElementById("register-form");
+    const logoutButton = document.getElementById("logout-button");
+    const deleteAccountButton = document.getElementById("delete-account-button");
+
+    if (!loginForm || !registerForm || !logoutButton || !deleteAccountButton) {
+      return;
+    }
+
+    loginForm.addEventListener("submit", handleLoginSubmit);
+    registerForm.addEventListener("submit", handleRegisterSubmit);
+    logoutButton.addEventListener("click", handleLogout);
+    deleteAccountButton.addEventListener("click", handleDeleteAccount);
+
+    updateSessionBox();
+    updateHeaderUsername();
+  }
+
+  window.initLoginPage = initLoginPage;
+  window.AppAuth = {
+    getAuth: readAuth,
+    clearAuth: clearAuth,
+  };
+
+  document.addEventListener("DOMContentLoaded", updateHeaderUsername);
+})();

js/navigation.js

@@ -9,24 +9,40 @@ document.addEventListener("DOMContentLoaded", () => {
         const activeLink = document.getElementById(id);
         if (activeLink) activeLink.classList.add("active");
     }
-    function loadPage(page, menuId) {
+    window.loadPage = function loadPage(page, menuId) {
         fetch("pages/" + page + ".html")
-            .then(response => response.text())
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error("HTTP " + response.status);
+                }
+                return response.text();
+            })
             .then(data => {
                 document.getElementById("main-content").innerHTML = data;
                 setActiveMenu(menuId);
+                if (page === "login" && typeof window.initLoginPage === "function") {
+                    window.initLoginPage();
+                }
             })
             .catch(error => {
-                document.getElementById("main-content").innerHTML = "<div class='alert alert-danger'>Fehler beim Laden der Seite.</div>";
+                console.error("Fehler beim Laden von " + page + ":", error);
+                document.getElementById("main-content").innerHTML = "<div class='alert alert-danger'>Fehler beim Laden der Seite: " + error.message + "</div>";
             });
-    }
+    };
 
-    document.getElementById("nav-home").onclick = () => loadPage("home", "nav-home");
+    const navHome = document.getElementById("nav-home");
-    document.getElementById("nav-play").onclick = () => loadPage("play", "nav-play");
+    const navPlay = document.getElementById("nav-play");
-    document.getElementById("nav-my-scores").onclick = () => loadPage("scores", "nav-my-scores");
+    const navMyScores = document.getElementById("nav-my-scores");
-    document.getElementById("nav-leaderboard").onclick = () => loadPage("leaderboard", "nav-leaderboard");
+    const navLeaderboard = document.getElementById("nav-leaderboard");
-    document.getElementById("navbar-login").onclick = () => loadPage("login", "navbar-login");
+    const navbarLogin = document.getElementById("navbar-login");
-    document.getElementById("navbar-messages").onclick = () => loadPage("messages", "navbar-messages");
+    const navbarMessages = document.getElementById("navbar-messages");
+
+    if (navHome) navHome.onclick = (e) => { e.preventDefault(); loadPage("home", "nav-home"); };
+    if (navPlay) navPlay.onclick = (e) => { e.preventDefault(); loadPage("play", "nav-play"); };
+    if (navMyScores) navMyScores.onclick = (e) => { e.preventDefault(); loadPage("scores", "nav-my-scores"); };
+    if (navLeaderboard) navLeaderboard.onclick = (e) => { e.preventDefault(); loadPage("leaderboard", "nav-leaderboard"); };
+    if (navbarLogin) navbarLogin.onclick = (e) => { e.preventDefault(); loadPage("login", "navbar-login"); };
+    if (navbarMessages) navbarMessages.onclick = (e) => { e.preventDefault(); loadPage("messages", "navbar-messages"); };
 
     //Startseite laden
     loadPage("home", "nav-home");

pages/login.html

@@ -1,5 +1,73 @@
+<!-- Login Seite -->
 <div class="card">
-                    <h2 class="mb-3">Login / Registrieren</h2>
+    <h2 class="mb-3">Account</h2>
-                <p class="mt-2">Hier kannst du dich einloggen oder registrieren, um deine Scores zu speichern.</p>
+
-                <!-- Hier könnte ein Login-Formular eingebunden werden -->
+    <div id="auth-feedback" class="alert d-none" role="status" aria-live="polite"></div>
+
+    <!-- Logout und Account löschen -->
+    <div class="card bg-light mb-3" id="current-session-box">
+        <h3 class="h5 mb-2">Aktuelle Sitzung</h3>
+        <p class="mb-2" id="current-session-text">Nicht eingeloggt.</p>
+        <div class="d-flex gap-2">
+            <button id="logout-button" type="button" class="btn btn-outline-secondary btn-sm" disabled>Logout</button>
+            <button id="delete-account-button" type="button" class="btn btn-danger btn-sm" disabled>Account löschen</button>
+        </div>
+    </div>
+
+    <!-- Login und Account erstellen -->
+    <div class="row g-3" id="auth-forms-row">
+        <div class="col-12 col-lg-6">
+            <div class="card h-100">
+                <h3 class="h5 mb-3">Login</h3>
+                <form id="login-form">
+                    <div class="mb-3">
+                        <label for="login-username" class="form-label">Username</label>
+                        <input id="login-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
+                    </div>
+                    <div class="mb-3">
+                        <label for="login-password" class="form-label">Passwort</label>
+                        <input id="login-password" class="form-control" type="password" required maxlength="100" autocomplete="current-password" />
+                    </div>
+                    <button type="submit" class="btn btn-primary">Einloggen</button>
+                </form>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <div class="card h-100">
+                <h3 class="h5 mb-3">Neuen Account erstellen</h3>
+                <form id="register-form">
+                    <div class="mb-3">
+                        <label for="register-username" class="form-label">Gewünschter Username</label>
+                        <input id="register-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
+                    </div>
+                    <button type="submit" class="btn btn-success">Account anlegen</button>
+                </form>
+                <p class="small mt-3 mb-0 text-muted">Hinweis: Das Passwort wird vom Backend erstellt und bei Erfolg angezeigt.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- Modal für Account-Erstellung -->
+<div class="modal fade" id="password-modal" tabindex="-1" aria-labelledby="password-modal-label" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="password-modal-label">Account erfolgreich erstellt!</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-info mb-3">
+                    <strong>Username:</strong> <span id="modal-username"></span><br/>
+                    <strong>Passwort:</strong> <span id="modal-password" style="font-family: monospace; background-color: #f0f0f0; padding: 4px 8px; border-radius: 4px;"></span>
+                </div>
+                <p class="text-muted small mb-0">Bitte speichere das Passwort. Du benötigst es zum Einloggen.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Weiter zur Startseite</button>
+            </div>
+        </div>
+    </div>
 </div>