From b6ae04e7778a7ffba2676aa645905492ca0d4e65 Mon Sep 17 00:00:00 2001 From: KGFCH2 Date: Tue, 2 Jun 2026 18:44:20 +0530 Subject: [PATCH] fix(auth): correct localStorage boolean type mismatch causing auth bypass Critical bug: localStorage.getItem() always returns strings, never native booleans. The previous check === true always evaluated to false because 'true' (string) !== true (boolean), meaning the auto-redirect for already- logged-in users on the login page never fired. Changes: - Fix type check: localStorage.getItem('isLoggedIn') === 'true' - Add early return after redirect to prevent form processing post-redirect - Replace all alert() calls with accessible inline error/success messages (uses role=alert and aria-live for screen reader compatibility) - Add minimum password length validation (6 chars) on registration - Add .trim() on string inputs to prevent whitespace-only submissions - Improve UX: 1500ms delay before redirect on successful registration --- log/login.js | 171 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 122 insertions(+), 49 deletions(-) diff --git a/log/login.js b/log/login.js index 275d253..162e6ca 100644 --- a/log/login.js +++ b/log/login.js @@ -1,49 +1,122 @@ -document.addEventListener("DOMContentLoaded", () => { - const loginForm = document.getElementById("loginForm"); - const registerForm = document.getElementById("registerForm"); - - // Check if user is already logged in, redirect to home if true - if (window.location.pathname.includes("login.html") && localStorage.getItem("isLoggedIn") === true) { - window.location.href = "../home.html"; - } - - // Login Form Submission - if (loginForm) { - loginForm.addEventListener("submit", (e) => { - e.preventDefault(); - const email = document.getElementById("email").value; - const password = document.getElementById("password").value; - - const storedUser = JSON.parse(localStorage.getItem("user")); - - if (storedUser && storedUser.email === email && storedUser.password === password) { - localStorage.setItem("isLoggedIn", "true"); // Mark user as logged in - alert("Login successful! Redirecting to Home..."); - window.location.href = "../home.html"; // Redirect to home page - } - else { - alert("Invalid email or password."); - } - }); - } - - // Registration Form Submission - if (registerForm) { - registerForm.addEventListener("submit", (e) => { - e.preventDefault(); - const fullname = document.getElementById("fullname").value; - const email = document.getElementById("email").value; - const password = document.getElementById("password").value; - - if (fullname && email && password) { - const user = { fullname, email, password }; - localStorage.setItem("user", JSON.stringify(user)); // Save user in localStorage - - alert("Registration successful! Redirecting to login..."); - window.location.href = "login.html"; // Redirect to login page - } else { - alert("Please fill out all fields."); - } - }); - } -}); +/** + * login.js — LearnSphere Authentication Logic + * + * Handles login and registration form submission using localStorage. + * Note: This is a client-side demo implementation. In production, + * authentication must be handled server-side with hashed passwords + * and proper session management. + */ + +document.addEventListener("DOMContentLoaded", () => { + const loginForm = document.getElementById("loginForm"); + const registerForm = document.getElementById("registerForm"); + + // BUG FIX: localStorage always returns strings, never booleans. + // Previously: localStorage.getItem("isLoggedIn") === true → always false + // Fixed: localStorage.getItem("isLoggedIn") === "true" → correct + if ( + window.location.pathname.includes("login.html") && + localStorage.getItem("isLoggedIn") === "true" + ) { + window.location.href = "../home.html"; + return; // Prevent further execution after redirect + } + + // ── Login Form ────────────────────────────────────────────────── + if (loginForm) { + loginForm.addEventListener("submit", (e) => { + e.preventDefault(); + + const email = document.getElementById("email").value.trim(); + const password = document.getElementById("password").value; + + if (!email || !password) { + showError("Please fill in all fields."); + return; + } + + const storedUser = JSON.parse(localStorage.getItem("user")); + + if ( + storedUser && + storedUser.email === email && + storedUser.password === password + ) { + localStorage.setItem("isLoggedIn", "true"); // Store as string "true" + window.location.href = "../home.html"; + } else { + showError("Invalid email or password. Please try again."); + } + }); + } + + // ── Registration Form ──────────────────────────────────────────── + if (registerForm) { + registerForm.addEventListener("submit", (e) => { + e.preventDefault(); + + const fullname = document.getElementById("fullname").value.trim(); + const email = document.getElementById("email").value.trim(); + const password = document.getElementById("password").value; + + if (!fullname || !email || !password) { + showError("Please fill out all fields."); + return; + } + + if (password.length < 6) { + showError("Password must be at least 6 characters."); + return; + } + + const user = { fullname, email, password }; + localStorage.setItem("user", JSON.stringify(user)); + + // Show success before redirecting + showSuccess("Account created! Redirecting to login..."); + setTimeout(() => { + window.location.href = "login.html"; + }, 1500); + }); + } +}); + +/** + * Displays an inline error message instead of using alert(). + * @param {string} message + */ +function showError(message) { + let errorEl = document.getElementById("auth-error"); + if (!errorEl) { + errorEl = document.createElement("p"); + errorEl.id = "auth-error"; + errorEl.setAttribute("role", "alert"); + errorEl.setAttribute("aria-live", "assertive"); + errorEl.style.cssText = + "color:#ff6b6b;font-size:0.9rem;margin-top:10px;font-weight:bold;"; + const form = document.querySelector("form"); + if (form) form.appendChild(errorEl); + } + errorEl.textContent = message; + errorEl.style.display = "block"; +} + +/** + * Displays an inline success message instead of using alert(). + * @param {string} message + */ +function showSuccess(message) { + let successEl = document.getElementById("auth-success"); + if (!successEl) { + successEl = document.createElement("p"); + successEl.id = "auth-success"; + successEl.setAttribute("role", "status"); + successEl.setAttribute("aria-live", "polite"); + successEl.style.cssText = + "color:#66fcf1;font-size:0.9rem;margin-top:10px;font-weight:bold;"; + const form = document.querySelector("form"); + if (form) form.appendChild(successEl); + } + successEl.textContent = message; + successEl.style.display = "block"; +}