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 usuarioupdateUser() → actualiza datos del perfil o password
Librerías usadas
- React hooks:
useState, useEffect
react-router-dom (para posibles navegaciones)- Componente:
Button