Archivos de la Carpeta src/features #

// src/features/login/login.tsx
import { useState, useEffect, useCallback } from "react"; // Hooks de React
import { useAuth } from "../../components/auth/auth.context"; // Hook para acceder al contexto de autenticación
import { useNavigate } from "react-router-dom"; // Hook para navegación de React Router
import { Grid } from "../../components/common/grid/grid"; // Componente de layout Grid
import { LoginForm } from "./login.form"; // Componente presentacional del formulario de login
import { authenticateUser } from "../../utils/auth.utils"; // Función utilitaria para autenticar con la API
import css from "../../assets/styles/layout/login.form.module.scss"; // Estilos SCSS
import "react-toastify/dist/ReactToastify.css"; // Estilos CSS para react-toastify
import { ToastMessage } from "../../components/common/toast-message/toast.message"; // Función para mostrar notificaciones toast

export default function Login() {
  // Estado para controlar el indicador de carga durante el proceso de login
  const [isLoading, setIsLoading] = useState(false);
  // Accede al contexto de autenticación para obtener el estado de autenticación y la función de login
  const auth = useAuth();
  // Hook para la navegación programática
  const goTo = useNavigate();

  // Efecto para redirigir al usuario al dashboard si ya está autenticado
  useEffect(() => {
    if (auth.isAuthenticated) {
      goTo("/dashboard"); // Redirige al dashboard
    }
  }, [auth.isAuthenticated, goTo]); // Dependencias: se re-ejecuta si el estado de autenticación o la función de navegación cambian

  /**
   * Manejador de la lógica de inicio de sesión.
   * Envía las credenciales al backend, gestiona el token y la redirección.
   * @param email El correo electrónico del usuario.
   * @param password La contraseña del usuario.
   */
  const handleLogin = useCallback(
    async (email: string, password: string) => {
      setIsLoading(true); // Activa el estado de carga
      try {
        // Llama a la función utilitaria para autenticar al usuario con el backend
        // Esta función podría lanzar un error si las credenciales son incorrectas.
        const token = await authenticateUser(email, password);

        // Llama a la función de login del contexto de autenticación para almacenar el token.
        // El hook useLogin (dentro de auth.context) es responsable de validar y almacenar el token
        // y podría tener su propia lógica de notificación para errores relacionados con el token corrupto/inválido.
        await auth.login(token);

        // Si todo es exitoso (autenticación y login del token), muestra un mensaje de éxito
        ToastMessage({ type: "success", message: "Inicio de sesión exitoso!" });
        goTo("/dashboard"); // Redirige al usuario al dashboard
      } catch (error: any) {
        // En caso de cualquier error (ej. credenciales incorrectas desde authenticateUser,
        // o un error de token corrupto que auth.login propaga), muestra un mensaje de error.
        // Aseguramos que el mensaje sea legible, extrayéndolo si es una instancia de Error.
        ToastMessage({
          type: "error",
          message: `Error al iniciar sesión: ${(error instanceof Error) ? error.message : "Ocurrió un error inesperado."}`,
        });
      } finally {
        setIsLoading(false); // Desactiva el estado de carga al finalizar la operación
      }
    },
    // Dependencias de useCallback: se re-crea si auth.login o goTo cambian
    [auth.login, goTo]
  );

  // Renderiza el componente LoginForm dentro de un Grid
  return (
    <Grid className={css.loginContainer}>
      <LoginForm onSubmit={handleLogin} isLoading={isLoading} />
    </Grid>
  );
}

// src/features/login/login.form.tsx
import { useState } from "react"; // Hook para gestionar el estado local
import FormInput from "../../components/common/input-field/Input.field"; // Importa el componente FormInput (antes InputField)

import css from "../../assets/styles/layout/login.form.module.scss"; // Estilos CSS específicos para el formulario de login
import LoginFormProps from "../../interface/login/login.form.props"; // Interfaz para las propiedades del formulario de login
import logo from "../../assets/images/LOGO-escuelas.png"; // Logo de la aplicación

/**
 * Componente presentacional del formulario de inicio de sesión.
 * Gestiona los estados locales de email y contraseña y envía los datos al padre.
 * @param {LoginFormProps} props Las propiedades del formulario: `onSubmit` y `isLoading`.
 * @param props.onSubmit Función callback que se ejecuta al enviar el formulario con email y contraseña.
 * @param props.isLoading Booleano que indica si la petición de login está en curso.
 */
export const LoginForm: React.FC<LoginFormProps> = ({
  onSubmit, // Función para manejar el envío de credenciales (pasada desde el padre)
  isLoading, // Estado de carga (pasado desde el padre para deshabilitar el botón)
}) => {
  // Estados locales para el email y la contraseña del formulario
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  /**
   * Manejador del envío del formulario.
   * Previene el comportamiento por defecto y llama a la función onSubmit del padre.
   * @param e Evento de formulario.
   */
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // Evita que la página se recargue
    onSubmit(email, password); // Llama a la función de envío del padre con las credenciales
  };

  return (
    <form className={css.loginForm} onSubmit={handleSubmit}>
      <div className={css.inputTitle}>
        <img src={logo} alt="logo" className={css.logo} /> {/* Logo visual */}
        <h2>Inicio de sesión</h2> {/* Título del formulario */}
      </div>

      {/* Campo de entrada para el email */}
      <FormInput
        id="email" // ID único para el input
        label="Email" // Etiqueta visible
        name="email" // Nombre del campo para el formulario (requerido por FormInputProps)
        type="email" // Tipo de input HTML
        value={email} // Valor controlado por el estado local
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} // Actualiza el estado al cambiar, con tipado explícito
      />

      {/* Campo de entrada para la contraseña */}
      <FormInput
        id="password" // ID único para el input
        label="Contraseña" // Etiqueta visible
        name="password" // Nombre del campo para el formulario (requerido por FormInputProps)
        type="password" // Tipo de input HTML (oculta caracteres)
        value={password} // Valor controlado por el estado local
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} // Actualiza el estado al cambiar, con tipado explícito
      />

      {/* Botón de envío del formulario */}
      <button className={css.loginButton} disabled={isLoading}>
        {isLoading ? "Cargando..." : "Entrar"}{" "}
        {/* Texto dinámico según el estado de carga */}
      </button>
    </form>
  );
};