Source: pages/LoginPage.js

import React, { useState } from 'react';
// use information from temporary userAuth info
import { authenticateUser } from '../temporaryBackEnd/loginAuth';

/**
 * @fileoverview Login page component for the AutoSuggestion Quiz application.
 * @module LoginPage
 */

/**
 * @typedef {Object} User
 * @property {string} email - The authenticated user's email address.
 * @property {string} [name] - The authenticated user's display name.
 * @property {string} [role] - The authenticated user's role (e.g. 'student', 'admin').
 */

/**
 * A login page component that handles user authentication.
 * Renders a sign-in form with email and password fields, error messaging,
 * and a shortcut "Register" button that pre-fills demo credentials.
 *
 * @component
 * @param {Object} props
 * @param {function(User): void} props.onLogin - Callback invoked with the authenticated
 *   user object upon successful login.
 * @returns {React.ReactElement} The rendered login page.
 *
 * @example
 * <LoginPage onLogin={(user) => console.log('Logged in as', user.email)} />
 */
function LoginPage({ onLogin }) {
  /** @type {[string, function(string): void]} The controlled email input value. */
  const [email, setEmail] = useState('');

  /** @type {[string, function(string): void]} The controlled password input value. */
  const [password, setPassword] = useState('');

  /** @type {[boolean, function(boolean): void]} Whether an authentication request is in flight. */
  const [isLoading, setIsLoading] = useState(false);

  /** @type {[string, function(string): void]} The current error message, or empty string if none. */
  const [error, setError] = useState('');

  /**
   * Handles form submission by validating inputs and calling the authentication service.
   * Sets an error message if validation fails or the authentication request rejects.
   *
   * @async
   * @function
   * @param {React.FormEvent<HTMLFormElement>} e - The form submission event.
   * @returns {Promise<void>}
   */
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    if (!email.trim() || !password.trim()) {
      setError('Please enter both email and password.');
      return;
    }

    setIsLoading(true);

    try {
      const user = await authenticateUser(email, password);
      onLogin(user);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="app">
      <header className="app-header">
        <div className="header-left">
          <h1 className="logo">AutoSuggestion Quiz</h1>
        </div>
      </header>

      <div className="login-page">
        <div className="login-card">
          <div className="login-header">
            <h2 className="login-title">Sign In</h2>
            <p className="login-subtitle">Enter your credentials to continue</p>
          </div>

          <form className="login-form" onSubmit={handleSubmit}>
            <div className="form-field">
              <label className="form-label" htmlFor="email">Email</label>
              <input
                id="email"
                type="text"
                className="form-input"
                placeholder="student@university.edu"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                autoFocus
              />
            </div>

            <div className="form-field">
              <label className="form-label" htmlFor="password">Password</label>
              <input
                id="password"
                type="password"
                className="form-input"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>

            {error && <p className="form-error">{error}</p>}

            <button
              type="submit"
              className="btn login-btn"
              disabled={isLoading}
            >
              {isLoading ? 'Signing in...' : 'Sign In'}
            </button>
          </form>

          <div className="login-footer">
            <p className="login-footer-text">
              Don't have an account?{' '}
              {/**
               * Shortcut button that pre-fills demo credentials for new users.
               * Only populates fields that are currently empty to avoid overwriting
               * anything the user has already typed.
               */}
              <button
                className="link-btn"
                onClick={() => {
                  if (!email.trim()) setEmail('newstudent@university.edu');
                  if (!password.trim()) setPassword('password');
                }}
              >
                Register
              </button>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default LoginPage;