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)