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
ypassword
. - 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
yButton
react-router-dom
sweetalert2
leaflet
(configuración de íconos)