feat(UserDetail): implementada funcionalidad para cambiar la contraseña del usuario

src/views/UserDetail.vue

@@ -72,25 +72,32 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="changePasswordModalLabel">Cambiar Contraseña</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="resetPasswordVariables"></button>
                 </div>
                 <div class="modal-body">
-                    <div class="mb-3">
-                        <label for="current-password" class="form-label">Contraseña Actual</label>
-                        <input type="password" class="form-control" id="current-password">
+                    <div v-if="passwordError" class="alert alert-danger" role="alert">
+                        {{ passwordError }}
                     </div>
-                    <div class="mb-3">
+
+                    <div class="mb-3 position-relative">
+                        <label for="old-password" class="form-label">Contraseña Actual</label>
+                        <input :type="oldPasswordVisible ? 'text' : 'password'" class="form-control" id="old-password" v-model="oldPassword">
+                        <i class="bi" :class="oldPasswordVisible ? 'bi-eye-slash' : 'bi-eye'" @click="changePasswordVisibility('old')" style="position: absolute; right: 10px; top: 38px; cursor: pointer;"></i>
+                    </div>
+                    <div class="mb-3 position-relative">
                         <label for="new-password" class="form-label">Nueva Contraseña</label>
-                        <input type="password" class="form-control" id="new-password">
+                        <input :type="newPasswordVisible ? 'text' : 'password'" class="form-control" id="new-password" v-model="newPassword">
+                        <i class="bi" :class="newPasswordVisible ? 'bi-eye-slash' : 'bi-eye'" @click="changePasswordVisibility('new')" style="position: absolute; right: 10px; top: 38px; cursor: pointer;"></i>
                     </div>
-                    <div class="mb-3">
+                    <div class="mb-3 position-relative">
                         <label for="confirm-password" class="form-label">Confirmar Nueva Contraseña</label>
-                        <input type="password" class="form-control" id="confirm-password">
+                        <input :type="confirmPasswordVisible ? 'text' : 'password'" class="form-control" id="confirm-password" v-model="confirmPassword">
+                        <i class="bi" :class="confirmPasswordVisible ? 'bi-eye-slash' : 'bi-eye'" @click="changePasswordVisibility('confirm')" style="position: absolute; right: 10px; top: 38px; cursor: pointer;"></i>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
-                    <button type="button" class="btn btn-primary-custom">Guardar Cambios</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetPasswordVariables">Cerrar</button>
+                    <button type="button" class="btn btn-primary-custom" @click="handlePasswordChange">Guardar Cambios</button>
                 </div>
             </div>
         </div>
@@ -120,11 +127,22 @@ onMounted(async () => {
     }
 });
 
-// Variables para el modal
+// Variables para el modal de edición
 const modalMessage = ref('');
 let modalInstance = null;
 const errorMsg = ref(null);
 
+// Variables para el modal de cambio de contraseña
+const oldPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const passwordError = ref('');
+
+// Variables para la visibilidad de las contraseñas
+const oldPasswordVisible = ref(false);
+const newPasswordVisible = ref(false);
+const confirmPasswordVisible = ref(false);
+
 // Funciones para los botones de la tabla
 const showDeactivateLocalModal = () => {
     modalMessage.value = '¿Estás seguro de que quieres desactivar esta cuenta?';
@@ -147,7 +165,7 @@ const handleConfirmation = async () => {
         // Recarga los datos 
         await userStore.readUser();
         // Redirecciona al Login
-        router.push('/auth/login')
+        router.push('/auth/login');
     } catch (error) {
         errorMsg.value = 'Error al desactivar el usuario.';
     }
@@ -178,9 +196,61 @@ const cancelEdit = () => {
     mode.value = 'view';
 };
 
-const changePassword = () => {
-  alert("Abrir modal para cambiar contraseña");
+// Función para el cambio de contraseña
+const handlePasswordChange = async () => {
+    passwordError.value = '';
+
+    // Si las contraseñas no coinciden
+    if (newPassword.value !== confirmPassword.value) {
+        passwordError.value = 'Las contraseñas no coinciden.';
+        return;
+    }
+
+    try {
+        await userStore.changePassword(oldPassword.value, newPassword.value);
+
+        // Cierra el modal
+        const modal = bootstrap.Modal.getInstance(document.getElementById('changePasswordModal'));
+        if (modal) {
+            modal.hide();
+        }
+
+        router.push('/auth/login');
+    } catch (error) {
+        // Manejo de errores específicos del backend
+        if (error.response && error.response.status == 409) {
+            passwordError.value = 'La contraseña actual es incorrecta.';
+        } else {
+            passwordError.value = 'Ocurrió un error al cambiar la contraseña. Por favor, inténtelo de nuevo.';
+        }
+    }
+
+};
+
+// Función para la visibilidad de las contraseñas
+const changePasswordVisibility = (field) => {
+    switch (field) {
+        case 'old':
+            oldPasswordVisible.value = !oldPasswordVisible.value;
+            break;
+        case 'new':
+            newPasswordVisible.value = !newPasswordVisible.value;
+            break;
+        case 'confirm':
+            confirmPasswordVisible.value = !confirmPasswordVisible.value;
+            break;
+    }
+};
 
+// Función para reiniciar las variables de cambio de contraseña
+const resetPasswordVariables = () => {
+    oldPassword.value = '';
+    newPassword.value = '';
+    confirmPassword.value = '';
+    passwordError.value = '';
+    oldPasswordVisible.value = false;
+    newPasswordVisible.value = false;
+    confirmPasswordVisible.value = false;
 };
 </script>