From bce833471f94d691bd9e59400c2ef97cf5183174 Mon Sep 17 00:00:00 2001 From: Trompi001 Date: Wed, 1 Apr 2026 16:30:23 +0200 Subject: [PATCH] creating login function --- assets/css/custom.css | 38 +++++- index.html | 8 +- js/login.js | 288 ++++++++++++++++++++++++++++++++++++++++++ js/navigation.js | 36 ++++-- pages/login.html | 74 ++++++++++- 5 files changed, 422 insertions(+), 22 deletions(-) create mode 100644 js/login.js diff --git a/assets/css/custom.css b/assets/css/custom.css index feb608c..a9b6183 100644 --- a/assets/css/custom.css +++ b/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{ diff --git a/index.html b/index.html index 9da057b..d9b72dd 100644 --- a/index.html +++ b/index.html @@ -44,9 +44,6 @@

Dashboard

-
@@ -56,6 +53,11 @@ + + + + + diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..73aaf38 --- /dev/null +++ b/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); +})(); diff --git a/js/navigation.js b/js/navigation.js index 6b05550..6111ac0 100644 --- a/js/navigation.js +++ b/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 = "
Fehler beim Laden der Seite.
"; + console.error("Fehler beim Laden von " + page + ":", error); + document.getElementById("main-content").innerHTML = "
Fehler beim Laden der Seite: " + error.message + "
"; }); - } + }; - document.getElementById("nav-home").onclick = () => loadPage("home", "nav-home"); - document.getElementById("nav-play").onclick = () => loadPage("play", "nav-play"); - document.getElementById("nav-my-scores").onclick = () => loadPage("scores", "nav-my-scores"); - document.getElementById("nav-leaderboard").onclick = () => loadPage("leaderboard", "nav-leaderboard"); - document.getElementById("navbar-login").onclick = () => loadPage("login", "navbar-login"); - document.getElementById("navbar-messages").onclick = () => loadPage("messages", "navbar-messages"); + const navHome = document.getElementById("nav-home"); + const navPlay = document.getElementById("nav-play"); + const navMyScores = document.getElementById("nav-my-scores"); + const navLeaderboard = document.getElementById("nav-leaderboard"); + const navbarLogin = document.getElementById("navbar-login"); + 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"); diff --git a/pages/login.html b/pages/login.html index 23f1dd7..3f0b3ae 100644 --- a/pages/login.html +++ b/pages/login.html @@ -1,5 +1,73 @@ +
-

Login / Registrieren

-

Hier kannst du dich einloggen oder registrieren, um deine Scores zu speichern.

- +

Account

+ +
+ + +
+

Aktuelle Sitzung

+

Nicht eingeloggt.

+
+ + +
+
+ + +
+
+
+

Login

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+

Neuen Account erstellen

+
+
+ + +
+ +
+

Hinweis: Das Passwort wird vom Backend erstellt und bei Erfolg angezeigt.

+
+
+
+
+ + + + \ No newline at end of file