Add logout button and display header on loading state

The commit improves image handling by removing the separate imagenVista
ref, using data.image directly, and properly refreshing session data
after image upload. Also adds v-if guard for data availability.

app/components/AppFooter.vue

@@ -4,7 +4,7 @@
         app
         color="secondary"
         height="30"
-        v-if="status === 'authenticated'"
+        v-if="status !== 'unauthenticated'"
     >
         <v-container class="text-caption text-center">
             © {{ new Date().getFullYear() }} SharedLists - All Rights Reserved

app/components/NavBar.vue

@@ -3,7 +3,7 @@
     <v-app-bar
         color="rgba(27, 94, 32, 0.8)"
         height="48"
-        v-if="status === 'authenticated'"
+        v-if="status !== 'unauthenticated'"
     >
         <!-- Title of the application with adjusted margin and font size -->
         <v-app-bar-title class="text-h6 ms-3 text-white">
@@ -18,6 +18,11 @@
         <v-spacer />
 
         <!-- Menu icons on the right side of the toolbar -->
+        <template v-slot:append>
+            <small class="text-white"> Logout </small>
+            <v-btn icon="mdi-account" class="text-white" @click="logout">
+            </v-btn>
+        </template>
     </v-app-bar>
 
     <v-navigation-drawer v-model="drawer" temporary>
@@ -47,8 +52,15 @@
 
 <script setup>
 import { ref, capitalize } from "vue";
+
 const drawer = ref(false);
-const { data, status } = useAuth();
+const { data, status, signOut } = useAuth();
+const systemStore = useSystemStore();
+
+const logout = async () => {
+    await systemStore.deleteCookies();
+    await signOut({ callbackUrl: "/login" });
+};
 </script>
 
 <style></style>

app/pages/profile.vue

@@ -1,5 +1,6 @@
 <template>
     <v-container
+        v-if="data"
         class="fill-height d-flex align-center justify-center text-center"
     >
         <div class="full-height flex-column mr-5">
@@ -8,7 +9,7 @@
                     :width="200"
                     aspect-ratio="16/9"
                     cover
-                    :src="imagenVista"
+                    :src="data.image"
                     :alt="data.name"
                 ></v-img>
             </v-avatar>
@@ -29,7 +30,7 @@
         </div>
         <div class="full-height flex-column">
             <h3>Último login:</h3>
-            <p>{{ data?.last_login ? data.last_login : "Nunca" }}</p>
+            <p>{{ data.last_login ? data.last_login : "Nunca" }}</p>
             <h3>Username:</h3>
             <p>{{ data.username }}</p>
             <h3>Nombre:</h3>
@@ -51,7 +52,7 @@
 definePageMeta({
     auth: true,
 });
-const { data, token } = useAuth();
+const { data, token, getSession } = useAuth();
 import { ref, onMounted } from "vue";
 import { useSystemStore } from "~/stores/system";
 import { useListasStore } from "~/stores/listas";
@@ -59,7 +60,6 @@ const listasStore = useListasStore();
 const systemStore = useSystemStore();
 const { handleFileInput, files } = useFileStorage();
 let imagen = ref([]);
-let imagenVista = ref("");
 
 const uploadImage = async () => {
     const url = "http://" + systemStore.url_backend + "/auth/users/me/";
@@ -71,21 +71,21 @@ const uploadImage = async () => {
     formData.append("last_name", data.value.last_name);
     formData.append("image", imagen.value ? imagen.value : null);
 
-    await $fetch(url, {
+    const response = await $fetch(url, {
         headers: {
             Authorization: `${token.value}`,
         },
         method: "PUT",
         body: formData,
-    })
-        .then((response) => {
-            imagenVista.value = response.image;
-            files.value.pop();
-            imagen.value = null;
-        })
-        .catch((e) => {
-            console.error(e);
-        });
+    });
+    if (response) {
+        //imagenVista.value = response.image;
+        files.value.pop();
+        imagen.value = null;
+        await getSession();
+    } else {
+        console.error(response);
+    }
 };
 
 const validateFileType = () => {
@@ -117,10 +117,5 @@ const openImageDialog = () => {
 
 onMounted(async () => {
     await listasStore.getData();
-    if (data) {
-        console.log(data.value.image);
-
-        imagenVista.value = data.value.image;
-    }
 });
 </script>