feat(UserDetail): añadida funcionalidad para desactivar usuario por sí solo

src/views/UserDetail.vue

@@ -55,7 +55,7 @@
                                 <button class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                                 <button class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                                     <i class="bi bi-key me-1"></i> Cambiar contraseña
                                     <i class="bi bi-key me-1"></i> Cambiar contraseña
                                 </button>
                                 </button>
-                                <button class="btn btn-danger" @click="deactivateAccount">
+                                <button class="btn btn-danger" @click="showDeactivateLocalModal">
                                     <i class="bi bi-person-x-fill me-1"></i> Desactivar cuenta
                                     <i class="bi bi-person-x-fill me-1"></i> Desactivar cuenta
                                 </button>
                                 </button>
                             </div>
                             </div>
@@ -95,11 +95,20 @@
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
+
+    <ConfirmModal
+        :modalId="'userActionModal'"
+        :message="modalMessage"
+        @confirmed="handleConfirmation"
+    />
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import { useUserStore } from '@/stores/userStore';
 import { useUserStore } from '@/stores/userStore';
 import { onMounted, ref } from 'vue';
 import { onMounted, ref } from 'vue';
+import ConfirmModal from '@/components/ConfirmModal.vue';
+import * as bootstrap from 'bootstrap';
+import router from '@/router';
 
 
 const userStore = useUserStore();
 const userStore = useUserStore();
 const mode = ref('view');
 const mode = ref('view');
@@ -111,6 +120,38 @@ onMounted(async () => {
     }
     }
 });
 });
 
 
+// Variables para el modal
+const modalMessage = ref('');
+let modalInstance = null;
+const errorMsg = ref(null);
+
+// Funciones para los botones de la tabla
+const showDeactivateLocalModal = () => {
+    modalMessage.value = '¿Estás seguro de que quieres desactivar esta cuenta?';
+    
+    if (!modalInstance) {
+        modalInstance = new bootstrap.Modal(document.getElementById('userActionModal'));
+    }
+    modalInstance.show();
+};
+
+// Función que se ejecuta al recibir la confirmación del modal
+const handleConfirmation = async () => {
+    if (modalInstance) {
+        modalInstance.hide();
+    }
+    errorMsg.value = null;
+
+    try {        
+        await userStore.deactivateMe();
+        // Recarga los datos 
+        await userStore.readUser();
+        // Redirecciona al Login
+        router.push('/auth/login')
+    } catch (error) {
+        errorMsg.value = 'Error al desactivar el usuario.';
+    }
+};
 
 
 // Usamos una copia para editar los datos
 // Usamos una copia para editar los datos
 //const editableUser = ref({ ...user.value });
 //const editableUser = ref({ ...user.value });