Update assets/js/login.js

assets/js/login.js

@@ -1,697 +1,173 @@
-/* ============================================================
-   XENEX GLASS OS
-   Login Controller
-   ------------------------------------------------------------
-   Real authentication frontend.
-   No fake credentials.
-   No dummy users.
-   No hardcoded passwords.
-   ============================================================ */
-
-"use strict";
-
-/* ============================================================
-   CONFIGURATION
-   ============================================================ */
+/* ==========================================================================
+   XENEX GLASS OS — Login Screen Behavior
+   assets/JS/login.js
 
-/*
-   The backend URL should eventually be supplied by the real
-   Xenex deployment configuration.
-
-   Example:
-
-   window.XENEX_CONFIG = {
-       API_BASE_URL: "https://your-api.example.com"
-   };
-
-   Do NOT put AWS secrets here.
-*/
-
-const API_BASE_URL =
-    window.XENEX_CONFIG?.API_BASE_URL ||
-    "";
-
-
-/* ============================================================
-   DOM
-   ============================================================ */
-
-const form = document.querySelector(".xenex-login__form");
-
-const emailInput = document.querySelector(
-    'input[type="email"]'
-);
-
-const passwordInput = document.querySelector(
-    'input[type="password"]'
-);
-
-const passwordToggle = document.querySelector(
-    ".xenex-login__password-toggle"
-);
-
-const submitButton = document.querySelector(
-    ".xenex-login__submit"
-);
-
-const messageElement = document.querySelector(
-    ".xenex-login__message"
-);
-
-const connectionElement = document.querySelector(
-    ".xenex-login__connection"
-);
-
-const forgotButton = document.querySelector(
-    ".xenex-login__action:not(.xenex-login__action--create)"
-);
-
-const createAccountButton = document.querySelector(
-    ".xenex-login__action--create"
-);
-
-
-/* ============================================================
-   STATE
-   ============================================================ */
-
-let loginInProgress = false;
-
-
-/* ============================================================
-   HELPERS
-   ============================================================ */
-
-function setMessage(message, state = "") {
-    if (!messageElement) {
-        return;
-    }
-
-    messageElement.textContent = message;
-
-    if (state) {
-        messageElement.dataset.state = state;
-    } else {
-        delete messageElement.dataset.state;
-    }
-}
-
-
-function setConnectionState(state, text) {
-    if (!connectionElement) {
-        return;
-    }
-
-    connectionElement.dataset.state = state;
-
-    const textElement =
-        connectionElement.querySelector(
-            "[data-connection-text]"
-        );
-
-    if (textElement && text) {
-        textElement.textContent = text;
-    }
-}
-
-
-function setLoading(loading) {
-    loginInProgress = loading;
-
-    if (!submitButton) {
-        return;
-    }
-
-    submitButton.disabled = loading;
-
-    const label =
-        submitButton.querySelector("span");
-
-    if (!label) {
-        return;
-    }
-
-    if (loading) {
-        label.textContent = "Signing in…";
-    } else {
-        label.textContent = "Sign in";
-    }
-}
-
-
-function normalizeEmail(value) {
-    return value
-        .trim()
-        .toLowerCase();
-}
+   This file handles UI behavior only: password visibility and client-side
+   form validation. It does NOT authenticate anyone. There is no backend
+   yet, so submitting the form cannot and does not log a user in — it only
+   reports that sign-in isn't wired up yet. See the comment above
+   handleSubmit() for where the real API call goes once it exists.
+   ========================================================================== */
 
+document.addEventListener('DOMContentLoaded', () => {
+  initPasswordToggle();
+  initFormValidation();
+});
 
-function isValidEmail(email) {
-    /*
-       Deliberately simple validation.
+/* ---- Password visibility toggle ---- */
+function initPasswordToggle() {
+  const toggleButton = document.querySelector('[data-password-toggle]');
+  const passwordInput = document.getElementById('password');
 
-       The backend remains responsible for final
-       validation and authentication.
-    */
-
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-}
+  if (!toggleButton || !passwordInput) return;
 
+  toggleButton.addEventListener('click', () => {
+    const isHidden = passwordInput.type === 'password';
 
-/* ============================================================
-   PASSWORD VISIBILITY
-   ============================================================ */
+    passwordInput.type = isHidden ? 'text' : 'password';
+    toggleButton.setAttribute('aria-pressed', String(isHidden));
+    toggleButton.setAttribute('aria-label', isHidden ? 'Hide password' : 'Show password');
 
-function setupPasswordToggle() {
-    if (!passwordToggle || !passwordInput) {
-        return;
+    const toggleText = toggleButton.querySelector('.login-field__toggle-text');
+    if (toggleText) {
+      toggleText.textContent = isHidden ? 'Hide' : 'Show';
     }
-
-    passwordToggle.addEventListener(
-        "click",
-        () => {
-            const currentlyHidden =
-                passwordInput.type === "password";
-
-            passwordInput.type =
-                currentlyHidden
-                    ? "text"
-                    : "password";
-
-            passwordToggle.setAttribute(
-                "aria-label",
-                currentlyHidden
-                    ? "Hide password"
-                    : "Show password"
-            );
-
-            passwordToggle.setAttribute(
-                "aria-pressed",
-                String(currentlyHidden)
-            );
-        }
-    );
+  });
 }
 
+/* ---- Form validation + submit ---- */
+function initFormValidation() {
+  const form = document.querySelector('.login-form');
+  const emailInput = document.getElementById('email');
+  const passwordInput = document.getElementById('password');
 
-/* ============================================================
-   BACKEND REQUEST
-   ============================================================ */
-
-async function authenticate(email, password) {
-    if (!API_BASE_URL) {
-        throw new Error(
-            "Xenex backend is not configured."
-        );
-    }
-
-    const endpoint =
-        `${API_BASE_URL.replace(/\/$/, "")}/auth/login`;
-
-    const response = await fetch(endpoint, {
-        method: "POST",
-
-        headers: {
-            "Content-Type": "application/json",
-            "Accept": "application/json"
-        },
-
-        /*
-           Important for an authentication system using
-           secure HttpOnly cookies.
-
-           The backend should set the session cookie.
-           JavaScript should NOT need to read it.
-        */
-
-        credentials: "include",
-
-        body: JSON.stringify({
-            email,
-            password
-        })
-    });
-
-
-    let data = null;
-
-    try {
-        data = await response.json();
-    } catch {
-        /*
-           Some server errors may return an empty body.
-        */
-    }
-
-
-    if (!response.ok) {
-        const errorMessage =
-            data?.message ||
-            data?.detail ||
-            "Unable to sign in.";
-
-        const error = new Error(errorMessage);
-
-        error.status = response.status;
-
-        throw error;
-    }
-
-
-    return data;
-}
+  if (!form || !emailInput || !passwordInput) return;
 
+  const statusRegion = createStatusRegion(form);
 
-/* ============================================================
-   LOGIN
-   ============================================================ */
-
-async function handleLogin(event) {
+  form.addEventListener('submit', (event) => {
     event.preventDefault();
+    clearFieldErrors(form);
+    setStatus(statusRegion, '', null);
 
-    if (loginInProgress) {
-        return;
-    }
-
-    if (!emailInput || !passwordInput) {
-        return;
-    }
-
-
-    const email =
-        normalizeEmail(emailInput.value);
-
-    const password =
-        passwordInput.value;
-
-
-    /* --------------------------------------------
-       Client-side validation
-       -------------------------------------------- */
-
-    if (!email) {
-        setMessage(
-            "Enter your email address.",
-            "error"
-        );
-
-        emailInput.focus();
-
-        return;
-    }
-
-
-    if (!isValidEmail(email)) {
-        setMessage(
-            "Enter a valid email address.",
-            "error"
-        );
-
-        emailInput.focus();
-
-        return;
-    }
+    const errors = validateFields(emailInput, passwordInput);
 
-
-    if (!password) {
-        setMessage(
-            "Enter your password.",
-            "error"
-        );
-
-        passwordInput.focus();
-
-        return;
+    if (errors.length > 0) {
+      errors.forEach(({ input, message }) => showFieldError(input, message));
+      errors[0].input.focus();
+      return;
     }
 
+    handleSubmit({ email: emailInput.value.trim() });
+  });
 
-    /* --------------------------------------------
-       Start authentication
-       -------------------------------------------- */
-
-    setLoading(true);
-
-    setMessage(
-        "Connecting to Xenex…"
-    );
-
-    setConnectionState(
-        "connecting",
-        "Connecting"
-    );
-
-
-    try {
-        const result =
-            await authenticate(
-                email,
-                password
-            );
-
-
-        /*
-           Authentication succeeded.
-
-           Ideally the backend establishes an
-           HttpOnly secure session cookie.
-
-           The frontend does not need to receive
-           or store the password or session secret.
-        */
-
-
-        setMessage(
-            "Sign in successful.",
-            "success"
-        );
-
-        setConnectionState(
-            "online",
-            "Connected"
-        );
-
-
-        /*
-           Give the glass interface a moment to
-           display the successful state.
-        */
-
-        await wait(350);
-
-
-        /*
-           Backend may optionally provide a destination.
-
-           Otherwise use the normal Xenex desktop.
-        */
-
-        const destination =
-            result?.redirect ||
-            result?.redirect_url ||
-            "./desktop.html";
-
-
-        window.location.replace(
-            destination
-        );
-
-    } catch (error) {
-
-        console.error(
-            "Xenex authentication error:",
-            error
-        );
-
-
-        /* ----------------------------------------
-           Handle common HTTP responses
-           ---------------------------------------- */
-
-        if (error.status === 401) {
-
-            setMessage(
-                "Incorrect email or password.",
-                "error"
-            );
-
-        } else if (error.status === 403) {
-
-            setMessage(
-                "Your account is not permitted to sign in.",
-                "error"
-            );
-
-        } else if (error.status === 429) {
-
-            setMessage(
-                "Too many attempts. Please try again later.",
-                "error"
-            );
-
-        } else {
-
-            setMessage(
-                error.message ||
-                "Unable to connect to Xenex.",
-                "error"
-            );
-        }
-
-
-        setConnectionState(
-            "offline",
-            "Connection unavailable"
-        );
-
-    } finally {
-
-        setLoading(false);
-    }
+  // Clear a field's error state as soon as the person edits it.
+  [emailInput, passwordInput].forEach((input) => {
+    input.addEventListener('input', () => clearFieldError(input));
+  });
 }
 
+function validateFields(emailInput, passwordInput) {
+  const errors = [];
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-/* ============================================================
-   CONNECTION CHECK
-   ============================================================ */
-
-async function checkBackendConnection() {
-
-    if (!API_BASE_URL) {
-
-        setConnectionState(
-            "offline",
-            "Backend not configured"
-        );
-
-        return;
-    }
-
-
-    try {
-
-        const endpoint =
-            `${API_BASE_URL.replace(/\/$/, "")}/health`;
-
-
-        const response =
-            await fetch(endpoint, {
-                method: "GET",
-
-                headers: {
-                    "Accept": "application/json"
-                },
-
-                credentials: "include",
-
-                cache: "no-store"
-            });
-
+  if (emailInput.value.trim() === '') {
+    errors.push({ input: emailInput, message: 'Enter your email address.' });
+  } else if (!emailPattern.test(emailInput.value.trim())) {
+    errors.push({ input: emailInput, message: 'Enter a valid email address.' });
+  }
 
-        if (!response.ok) {
-            throw new Error(
-                `Backend returned ${response.status}`
-            );
-        }
+  if (passwordInput.value === '') {
+    errors.push({ input: passwordInput, message: 'Enter your password.' });
+  }
 
-
-        setConnectionState(
-            "online",
-            "Xenex services online"
-        );
-
-    } catch (error) {
-
-        console.warn(
-            "Xenex backend unavailable:",
-            error
-        );
-
-        setConnectionState(
-            "offline",
-            "Xenex services unavailable"
-        );
-    }
+  return errors;
 }
 
-
-/* ============================================================
-   NAVIGATION
-   ============================================================ */
-
-function setupNavigation() {
-
-    if (forgotButton) {
-
-        forgotButton.addEventListener(
-            "click",
-            () => {
-                window.location.href =
-                    "./forgot-password.html";
-            }
-        );
-    }
-
-
-    if (createAccountButton) {
-
-        createAccountButton.addEventListener(
-            "click",
-            () => {
-                window.location.href =
-                    "./create-account.html";
-            }
-        );
-    }
+/*
+ * There is no backend yet. When one exists, this is where the real
+ * request goes, e.g.:
+ *
+ *   const response = await fetch('/auth/login', {
+ *     method: 'POST',
+ *     headers: { 'Content-Type': 'application/json' },
+ *     body: JSON.stringify({ email, password }),
+ *     credentials: 'include' // secure HttpOnly session cookie, not a token in JS
+ *   });
+ *
+ * Until that endpoint exists, do not simulate a response. Tell the person
+ * plainly that sign-in isn't connected yet.
+ */
+function handleSubmit({ email }) {
+  const form = document.querySelector('.login-form');
+  const statusRegion = form.querySelector('[data-login-status]');
+  const submitButton = document.querySelector('[data-login-submit]');
+
+  submitButton.disabled = true;
+
+  setStatus(
+    statusRegion,
+    "Sign-in isn't connected to a server yet. This form will work once the Xenex backend is live.",
+    'info'
+  );
+
+  console.info('[Xenex] Login form submitted with no backend configured.', { email });
+
+  submitButton.disabled = false;
 }
 
+/* ---- Field error helpers ---- */
+function showFieldError(input, message) {
+  const field = input.closest('.login-field');
+  if (!field) return;
+
+  field.classList.add('login-field--error');
+  input.setAttribute('aria-invalid', 'true');
+
+  let errorEl = field.querySelector('.login-field__error');
+  if (!errorEl) {
+    errorEl = document.createElement('p');
+    errorEl.className = 'login-field__error';
+    errorEl.id = `${input.id}-error`;
+    field.appendChild(errorEl);
+  }
+  errorEl.textContent = message;
+  input.setAttribute('aria-describedby', errorEl.id);
+}
 
-/* ============================================================
-   INPUT BEHAVIOR
-   ============================================================ */
-
-function setupInputs() {
-
-    if (emailInput) {
-
-        emailInput.addEventListener(
-            "input",
-            () => {
-
-                if (
-                    messageElement?.dataset.state ===
-                    "error"
-                ) {
-                    setMessage("");
-                }
-            }
-        );
-    }
-
-
-    if (passwordInput) {
+function clearFieldError(input) {
+  const field = input.closest('.login-field');
+  if (!field) return;
 
-        passwordInput.addEventListener(
-            "input",
-            () => {
+  field.classList.remove('login-field--error');
+  input.removeAttribute('aria-invalid');
+  input.removeAttribute('aria-describedby');
 
-                if (
-                    messageElement?.dataset.state ===
-                    "error"
-                ) {
-                    setMessage("");
-                }
-            }
-        );
-    }
+  const errorEl = field.querySelector('.login-field__error');
+  if (errorEl) errorEl.remove();
 }
 
-
-/* ============================================================
-   ENTER KEY
-   ============================================================ */
-
-function setupKeyboardBehavior() {
-
-    document.addEventListener(
-        "keydown",
-        (event) => {
-
-            if (
-                event.key === "Enter" &&
-                !loginInProgress
-            ) {
-
-                /*
-                   Don't interfere with normal form
-                   submission. The browser will handle
-                   Enter inside the form naturally.
-                */
-
-                if (
-                    document.activeElement ===
-                    emailInput ||
-                    document.activeElement ===
-                    passwordInput
-                ) {
-                    return;
-                }
-            }
-        }
-    );
+function clearFieldErrors(form) {
+  form.querySelectorAll('.login-field__input').forEach(clearFieldError);
 }
 
-
-/* ============================================================
-   UTILITY
-   ============================================================ */
-
-function wait(milliseconds) {
-    return new Promise(
-        resolve =>
-            setTimeout(
-                resolve,
-                milliseconds
-            )
-    );
+/* ---- Status region (created once, announced to screen readers) ---- */
+function createStatusRegion(form) {
+  let region = form.querySelector('[data-login-status]');
+  if (region) return region;
+
+  region = document.createElement('p');
+  region.setAttribute('data-login-status', '');
+  region.className = 'login-status';
+  region.setAttribute('role', 'status');
+  region.setAttribute('aria-live', 'polite');
+  form.appendChild(region);
+  return region;
 }
 
-
-/* ============================================================
-   INITIALIZATION
-   ============================================================ */
-
-function initializeLogin() {
-
-    if (!form) {
-        console.error(
-            "Xenex login form was not found."
-        );
-
-        return;
-    }
-
-
-    setupPasswordToggle();
-
-    setupNavigation();
-
-    setupInputs();
-
-    setupKeyboardBehavior();
-
-
-    form.addEventListener(
-        "submit",
-        handleLogin
-    );
-
-
-    /*
-       Check the backend after the page loads.
-
-       This is deliberately non-blocking:
-       the user can still interact with the
-       login screen while the health check runs.
-    */
-
-    checkBackendConnection();
+function setStatus(region, message, kind) {
+  if (!region) return;
+  region.textContent = message;
+  region.classList.toggle('login-status--info', kind === 'info');
+  region.classList.toggle('login-status--error', kind === 'error');
 }
-
-
-/* ============================================================
-   START
-   ============================================================ */
-
-if (
-    document.readyState === "loading"
-) {
-
-    document.addEventListener(
-        "DOMContentLoaded",
-        initializeLogin
-    );
-
-} else {
-
-    initializeLogin();
-}