Saltar a contenido

Auth

LoginForm.jsx

Formulario de inicio de sesión de usuario

Función

Permite a un usuario autenticado iniciar sesión en la plataforma.

Comportamiento

  • Toma como inputs: username y password.
  • Llama al hook useAuth()login(username, password).
  • En función del rol:
  • Si seller: redirige a /seller/home
  • Otro usuario: redirige a /Home
  • Muestra alertas con SweetAlert2:
  • Éxito (rol seller / usuario)
  • Error en credenciales

Validaciones

  • Muestra mensaje de error si falla el login.

Dependencias

  • useAuth (custom hook)
  • useNavigate (react-router-dom)
  • Input (componente reutilizable)
  • Button (componente reutilizable)
  • sweetalert2


RegisterForm.jsx

Formulario de registro de nuevos usuarios

Función

Permite registrar un nuevo usuario con datos personales + ubicación geográfica.

Inputs

Campo Validación
Usuario (username) Requerido
Correo electrónico Formato email
Dirección (address) Puede obtenerse manualmente o por mapa
Teléfono (phoneNumber) Regex: solo números salvadoreños válidos (/^[267]\d{7}$/)
Contraseña (password) Regex: min 8 caracteres, mayúscula, minúscula, número, símbolo
Confirmar contraseña Debe coincidir con password

Validaciones personalizadas

  • Teléfono: válido SV
  • Contraseña segura (regex)
  • Contraseñas coinciden
  • Ubicación obligatoria (lat/lng)

Comportamiento

  • Al enviar:
  • Llama a registerService(...)
  • Si éxito → SweetAlert2 (Usuario creado)
  • Si error → muestra error
  • Permite abrir un modal con un mapa (LocationModal) para seleccionar dirección.

Geolocalización

  • Muestra mapa con Leaflet
  • Guarda:
  • Dirección
  • Latitud
  • Longitud

Dependencias

  • registerService (AuthService.js)
  • LocationModal
  • Input y Button
  • react-router-dom
  • sweetalert2
  • leaflet (configuración de íconos)