Saltar a contenido

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