creating login function
This commit is contained in:
Trompi001
parent
ffd443b9dc
commit
bce833471f
@ -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{
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
288
js/login.js
Normal file
288
js/login.js
Normal file
@ -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);
|
||||
})();
|
||||
@ -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");
|
||||
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");
|
||||
|
||||
@ -1,5 +1,73 @@
|
||||
<!-- Login Seite -->
|
||||
<div class="card">
|
||||
<h2 class="mb-3">Login / Registrieren</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 -->
|
||||
<h2 class="mb-3">Account</h2>
|
||||
|
||||
<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>
|
||||
Loading…
x
Reference in New Issue
Block a user