Profile
UserProfile.jsx
Página de perfil de usuario
Función
Permite visualizar, editar y actualizar la información personal de un usuario autenticado.
Permite además cambiar la contraseña del usuario.
Comportamiento general
- Carga información del usuario desde el servicio
getUserInfo()
- Permite edición en el mismo componente (sin redirección)
- Permite cambiar contraseña
- Muestra información extra si el usuario NO es seller (créditos)
Secciones
Sección |
Descripción |
Información de contacto |
Nombre, teléfono, correo, dirección |
Información de cuenta |
Créditos (solo usuarios no seller) |
Formulario editar perfil |
Username, teléfono, email |
Formulario cambiar password |
Nueva password y confirmación |
Validaciones
- Teléfono: acepta formato
0000-0000
- Password: regex de seguridad (mínimo 8 caracteres, mayúsculas, minúsculas, número, símbolo)
- Confirmación de contraseña
Funciones internas
Función |
Propósito |
loadUser() |
Carga datos del usuario desde API |
handleSubmit() |
Envía actualización de datos del perfil |
handlePasswordSubmit() |
Envía cambio de contraseña |
handleCancelEdit() |
Cancela la edición y resetea formulario |
handleCancelPasswordChange() |
Cancela cambio de password |
Estado del componente
Estado |
Tipo / Valor predeterminado |
user |
Object / null |
editForm |
Object { username, phone, email } |
passwordForm |
Object { newPassword, confirmPassword } |
isEditing |
boolean |
isChangingPassword |
boolean |
isLoading |
boolean |
passwordError |
string |
Servicios utilizados
getUserInfo()
→ consulta datos del usuario
updateUser()
→ actualiza datos del perfil o password
Librerías usadas
- React hooks:
useState
, useEffect
react-router-dom
(para posibles navegaciones)
- Componente:
Button