Untitled Page

/* =====================================================
   TrainGo — Login & Register (US_UI_001)
   Requires store.js to be loaded first.
   ===================================================== */

// ===== ALREADY SIGNED IN? SKIP THE FORM =====
(() => {
  const s = DB.session.get();
  if (s) {
    window.location.href = s.role === "admin" ? "admin.html" : "home.html";
  }
})();

// ===== DOM =====
const loginCard = document.getElementById("login-card");
const registerCard = document.getElementById("register-card");
const loginForm = document.getElementById("login-form");
const registerForm = document.getElementById("register-form");
const toast = document.getElementById("toast");

// ===== VIEW SWITCHING =====
document.getElementById("go-register").addEventListener("click", () => {
  loginCard.classList.remove("active");
  registerCard.classList.add("active");
  clearForm(loginForm);
});

document.getElementById("go-login").addEventListener("click", () => {
  registerCard.classList.remove("active");
  loginCard.classList.add("active");
  clearForm(registerForm);
});

// ===== PASSWORD TOGGLE =====
document.querySelectorAll(".toggle-pw").forEach((btn) => {
  btn.addEventListener("click", () => {
    const input = document.getElementById(btn.dataset.target);
    const isPassword = input.type === "password";
    input.type = isPassword ? "text" : "password";
    btn.textContent = isPassword ? "🙈" : "👁";
  });
});

// ===== UI HELPERS =====
function showToast(message, isError = false) {
  toast.textContent = message;
  toast.classList.toggle("toast--error", isError);
  toast.classList.add("show");
  setTimeout(() => toast.classList.remove("show"), 3000);
}

function setError(errId, msg) {
  const el = document.getElementById(errId);
  if (!el) return;
  el.textContent = msg;
  const field =
    el.previousElementSibling?.querySelector?.("input") ||
    el.previousElementSibling;
  if (field && field.tagName === "INPUT") {
    field.classList.remove("valid");
    field.classList.add("invalid");
  }
}

function setValid(errId) {
  const el = document.getElementById(errId);
  if (!el) return;
  el.textContent = "";
  const field =
    el.previousElementSibling?.querySelector?.("input") ||
    el.previousElementSibling;
  if (field && field.tagName === "INPUT") {
    field.classList.remove("invalid");
    field.classList.add("valid");
  }
}

function clearForm(form) {
  form.reset();
  form.querySelectorAll(".error-msg").forEach((e) => (e.textContent = ""));
  form.querySelectorAll("input").forEach((i) =>
    i.classList.remove("invalid", "valid")
  );
}

// ===== VALIDATOR REGISTRY =====
const validators = {};

function attachLiveValidation(inputId, errId, validator) {
  validators[inputId] = validator;
  const input = document.getElementById(inputId);
  if (!input) return;
  input.addEventListener("input", () => {
    const msg = validator(input.value.trim());
    msg ? setError(errId, msg) : setValid(errId);
  });
}

function runValidation(fields) {
  let ok = true;
  fields.forEach(([inputId, errId]) => {
    const input = document.getElementById(inputId);
    const validator = validators[inputId];
    if (!input) { console.warn(`Missing input: #${inputId}`); return; }
    if (!validator) { console.warn(`No validator: #${inputId}`); return; }

    const msg = validator(input.value.trim());
    if (msg) { setError(errId, msg); ok = false; }
    else { setValid(errId); }
  });
  return ok;
}

// ===== LOGIN VALIDATORS =====
attachLiveValidation("login-username", "login-username-err", (v) =>
  v === "" ? "Username is required." : null
);

attachLiveValidation("login-password", "login-password-err", (v) =>
  v === "" ? "Password is required." : null
);

// ===== REGISTER VALIDATORS (per US_UI_001 spec) =====

// 1. username — min 6 chars, no special chars or numbers, not null
attachLiveValidation("reg-username", "reg-username-err", (v) => {
  if (v === "") return "Username is required.";
  if (v.length < 6) return "Must be at least 6 characters.";
  if (!/^[A-Za-z]+$/.test(v)) return "Letters only — no numbers or symbols.";
  return null;
});

// 2. password — min 8, 1 special, 1 number, 1 uppercase, not null
attachLiveValidation("reg-password", "reg-password-err", (v) => {
  if (v === "") return "Password is required.";
  if (v.length < 8) return "Must be at least 8 characters.";
  if (!/[A-Z]/.test(v)) return "Needs at least 1 uppercase letter.";
  if (!/[0-9]/.test(v)) return "Needs at least 1 number.";
  if (!/[^A-Za-z0-9]/.test(v)) return "Needs at least 1 special character.";
  return null;
});

// 3. confirm password — must match, not null
attachLiveValidation("reg-confirm", "reg-confirm-err", (v) => {
  if (v === "") return "Please confirm your password.";
  if (v !== document.getElementById("reg-password").value)
    return "Passwords do not match.";
  return null;
});

// 4. mail — contains @, has a domain part, not null
attachLiveValidation("reg-email", "reg-email-err", (v) => {
  if (v === "") return "Email is required.";
  if (!v.includes("@")) return "Must contain an @ sign.";
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v))
    return "Must include a domain like gmail.com.";
  return null;
});

// 5. mobile — no alphabets, exactly 10 digits, not null
attachLiveValidation("reg-mobile", "reg-mobile-err", (v) => {
  if (v === "") return "Mobile number is required.";
  if (/[A-Za-z]/.test(v)) return "Alphabets are not allowed.";
  if (!/^[0-9]{10}$/.test(v)) return "Must be exactly 10 digits.";
  return null;
});

// 6. aadhaar — not null
attachLiveValidation("reg-aadhaar", "reg-aadhaar-err", (v) => {
  if (v === "") return "Aadhaar number is required.";
  if (!/^[0-9]{12}$/.test(v)) return "Must be 12 digits.";
  return null;
});

// ===== LOGIN SUBMIT =====
loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  const fields = [
    ["login-username", "login-username-err"],
    ["login-password", "login-password-err"],
  ];

  if (!runValidation(fields)) return;

  const username = document.getElementById("login-username").value.trim();
  const password = document.getElementById("login-password").value;

  // does the account exist?
  if (!DB.users.find(username)) {
    setError("login-username-err", "No account found with this username.");
    return;
  }

  // does the password match?
  const user = DB.users.authenticate(username, password);
  if (!user) {
    setError("login-password-err", "Incorrect password.");
    return;
  }

  // role comes from the stored record, never from the form
  DB.session.set(user.username, user.role);

  const isAdmin = user.role === "admin";
  const destination = isAdmin ? "admin.html" : "home.html";

  const btn = loginForm.querySelector(".btn");
  const btnText = btn.querySelector(".btn__text") || btn;
  btnText.textContent = "Boarding…";
  btn.disabled = true;

  setTimeout(() => {
    showToast(isAdmin ? "🛡️  Admin login successful." : "✓  Welcome aboard!");
    setTimeout(() => (window.location.href = destination), 700);
  }, 1000);
});

// ===== REGISTER SUBMIT =====
registerForm.addEventListener("submit", (e) => {
  e.preventDefault();

  const fields = [
    ["reg-username", "reg-username-err"],
    ["reg-email", "reg-email-err"],
    ["reg-password", "reg-password-err"],
    ["reg-confirm", "reg-confirm-err"],
    ["reg-mobile", "reg-mobile-err"],
    ["reg-aadhaar", "reg-aadhaar-err"],
  ];

  if (!runValidation(fields)) return;

  const username = document.getElementById("reg-username").value.trim();

  if (DB.users.exists(username)) {
    setError("reg-username-err", "Username already taken.");
    return;
  }

  const created = DB.users.add({
    username,
    role: "customer",
    email: document.getElementById("reg-email").value.trim(),
    password: document.getElementById("reg-password").value,
    mobile: document.getElementById("reg-mobile").value.trim(),
    aadhaar: document.getElementById("reg-aadhaar").value.trim(),
  });

  if (!created) {
    showToast("Registration failed — storage error.", true);
    return;
  }

  const btn = registerForm.querySelector(".btn");
  const btnText = btn.querySelector(".btn__text") || btn;
  btnText.textContent = "Issuing ticket…";
  btn.disabled = true;

  setTimeout(() => {
    showToast(`🎫  Account ${created.userId} created! Please log in.`);
    btnText.textContent = "Register";
    btn.disabled = false;
    clearForm(registerForm);

    setTimeout(() => {
      registerCard.classList.remove("active");
      loginCard.classList.add("active");
    }, 1200);
  }, 1000);
});