30 👤 Actualizar Perfil y Contraseña desde el Dashboard | Sistema de Parqueo Laravel 12 FullStack
Duración: 38 minDescripción
30 👤 Índice de Lección: Actualizar Perfil y Contraseña desde el Dashboard (Laravel 12 FullStack)
La lección 30 inicia el último módulo del sistema, implementando la funcionalidad esencial para que cada usuario (operador, cajero, etc.) pueda ver y actualizar su información personal y contraseña directamente desde su panel.
1. Contexto y Habilitación de la Vista de Perfil
Se establece la necesidad de la autogestión de datos para cualquier rol y se configura el acceso a la vista.
- Necesidad del Módulo: Permitir que los usuarios que no son administradores puedan actualizar su propia contraseña, fotografía o datos personales [00:26].
- Habilitación del Enlace: Se activa el enlace de perfil en la configuración de la plantilla AdminLTE (config/adminlte.php) asignándole la ruta perfil [01:16].
- Configuración de la Ruta:
2. Creación de la Vista y Recuperación de Datos
Se diseña la interfaz del perfil y se utiliza la autenticación para extraer la información del usuario logueado.
- Función del Controlador: Se crea el método perfil en el UserController [04:53].
- Recuperación de Datos:
- Diseño de la Interfaz: Se crea la vista admin.perfil.perfil.blade.php, utilizando la estructura de formularios existentes para la edición [07:31].
3. Ajustes del Formulario y Campo de Fotografía
Se realizan modificaciones para que el formulario solo permita la actualización de datos personales y la foto.
- Restricción del Rol: El campo Rol se deshabilita (disabled) ya que el usuario no puede cambiar su propio rol [14:31].
- Gestión de Datos: Se verifica que todos los campos personales (celular, fecha de nacimiento, dirección, contactos de emergencia) puedan ser modificados [17:15].
- Implementación de la Fotografía:
- Se reestructura la vista con la clase row para añadir un espacio de col-md-2 a la derecha [22:42].
- Se reutiliza el código de carga de archivos (tipo file) del módulo Ajustes [24:00].
- Se añade la lógica condicional para previsualizar la foto actual o un espacio vacío [26:41].
- Se ajusta el tamaño de la previsualización de la imagen a 200x200 píxeles [28:03].
4. Formulario de Cambio de Contraseña y Envío
Se añade el card de seguridad y se configura la ruta para la acción de actualización.
- Módulo de Seguridad: Se crea un card independiente con el título "Seguridad Cambio de Contraseña" [20:10].
- Campos de Contraseña: Se añaden los campos [30:40]:
- Contraseña Actual
- Nueva Contraseña
- Confirmación de Contraseña
- Campos No Requeridos: Los campos de contraseña se configuran como no requeridos (required se elimina), ya que el usuario debe poder guardar cambios en sus datos personales sin necesidad de cambiar su contraseña [35:10].
- Ruta de Actualización:
- Se define la ruta perfil.update para manejar el envío del formulario [33:30].
- El formulario principal (<form>) debe incluir el atributo enctype="multipart/form-data" para permitir la carga de la foto [34:40].
- Se incluye un input oculto con el ID del usuario (id) para identificar qué registro actualizar [36:40].
- Próximo Paso: La lógica de actualización y validación en el UserController se implementará en el siguiente capítulo [37:45].
