feat(UserDetail): aplicada funcionalidad de visualizar los datos del usuario

src/views/UserDetail.vue

@@ -18,22 +18,22 @@
                             <div class="row g-3 mb-4">
                                 <div class="col-12 col-md-6">
                                     <p class="mb-1 text-muted"><strong>Nombre</strong></p>
-                                    <p v-if="mode === 'view'" class="fw-bold">{{ user.name }}</p>
+                                    <p v-if="mode === 'view'" class="fw-bold">{{ userStore.user?.name }}</p>
                                     <input v-else type="text" class="form-control" v-model="editableUser.name">
                                 </div>
                                 <div class="col-12 col-md-6">
                                     <p class="mb-1 text-muted"><strong>Apellidos</strong></p>
-                                    <p v-if="mode === 'view'" class="fw-bold">{{ user.surname }}</p>
+                                    <p v-if="mode === 'view'" class="fw-bold">{{ userStore.user?.surname }}</p>
                                     <input v-else type="text" class="form-control" v-model="editableUser.surname">
                                 </div>
                                 <div class="col-12">
                                     <p class="mb-1 text-muted"><strong>Email</strong></p>
-                                    <p v-if="mode === 'view'" class="fw-bold">{{ user.email }}</p>
+                                    <p v-if="mode === 'view'" class="fw-bold">{{ userStore.user?.email }}</p>
                                     <input v-else type="email" class="form-control" v-model="editableUser.email">
                                 </div>
                                 <div class="col-12">
                                     <p class="mb-1 text-muted"><strong>Rol</strong></p>
-                                    <p class="fw-bold">{{ user.role }}</p>
+                                    <p class="fw-bold">{{ authStore.user?.role }}</p>
                                 </div>
                             </div>
 
@@ -98,31 +98,35 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { useAuthStore } from '@/stores/authStore';
+import { useUserStore } from '@/stores/userStore';
+import { onMounted, ref } from 'vue';
 
+const userStore = useUserStore();
+const authStore = useAuthStore();
 const mode = ref('view');
 
 // Datos del usuario 
-const user = ref({
-  name: "Alba María",
-  surname: "Álvarez Fernández",
-  email: "amaf0001@red.ujaen.es",
-  role: "Usuario"
+onMounted(async () => {
+    if (!userStore.user) {
+        await userStore.readUser();
+    }
 });
 
+
 // Usamos una copia para editar los datos
-const editableUser = ref({ ...user.value });
+//const editableUser = ref({ ...user.value });
 
 // Acciones
-const editData = () => {
-    mode.value = 'edit';
-    editableUser.value = { ...user.value };
-};
-
-const saveChanges = () => {
-    user.value = { ...editableUser.value };
-    mode.value = 'view';
-};
+// const editData = () => {
+//     mode.value = 'edit';
+//     editableUser.value = { ...user.value };
+// };
+
+// const saveChanges = () => {
+//     user.value = { ...editableUser.value };
+//     mode.value = 'view';
+// };
 
 const cancelEdit = () => {
     mode.value = 'view';