From 5577628c56942e17abca7c2ed08b4067593093f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 27 Aug 2025 10:55:25 +0200
Subject: [PATCH] fix logout action

---
 components/NavBar.vue           |  8 +++-----
 components/NavBarEditar.vue     | 13 ++++++++++---
 components/NavBarEditarUser.vue | 14 +++++++++++---
 components/NavMenu.vue          | 11 ++++++-----
 layouts/admin.vue               | 22 +++++++++++++++++-----
 stores/auth.ts                  | 23 ++++++++++++-----------
 6 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/components/NavBar.vue b/components/NavBar.vue
index 473dd3c..daca11c 100644
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -2,7 +2,7 @@
   <header class="header">
     <div class="container wrapper">
       <div class="navmenu-container">
-        <NavMenu @logout="logout" />
+        <NavMenu @handle-logout="handleLogout" />
       </div>
       <!-- isAdmin: {{ isAdmin }} <br>
       isAuthenticated: {{ isAuthenticated }} <br> -->
@@ -71,7 +71,6 @@
 import { mapActions } from 'pinia'
 import { useAuthStore } from '@/stores/auth'
 export default {
-
   setup() {
     const auth = useAuthStore();
     return {
@@ -89,10 +88,9 @@ export default {
       return this.auth.getName
     },
   },
-
   methods: {
-    ...mapActions('auth', ['logout']),
-    async logout() {
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
       try {
         await this.logout()
         this.$router.push('/login')
diff --git a/components/NavBarEditar.vue b/components/NavBarEditar.vue
index 8668c74..e03e48f 100644
--- a/components/NavBarEditar.vue
+++ b/components/NavBarEditar.vue
@@ -13,12 +13,13 @@
       to="/editar/productos/importar"
       >Importar</NuxtLink
     >
-    <NuxtLink to="/" @click="logout" >Cerrar sesión</NuxtLink>
+    <NuxtLink to="/" @click="handleLogout" >Cerrar sesión</NuxtLink>
   </div>
 </template>
 
 <script>
 import { useAuthStore } from '@/stores/auth'
+import { mapActions } from 'pinia'
 export default {
   setup() {
     const auth = useAuthStore();
@@ -35,8 +36,14 @@ export default {
     await this.checkIfCoopValidated()
   },
   methods: {
-    async logout() {
-      await this.auth.logout()
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
+      try {
+        await this.logout()
+        this.$router.push('/')
+      } catch (error) {
+        console.error('Error logging out:', error)
+      }
     },
     async checkIfCoopValidated() {
       const config = useRuntimeConfig()
diff --git a/components/NavBarEditarUser.vue b/components/NavBarEditarUser.vue
index 0f79d44..c66fa6f 100644
--- a/components/NavBarEditarUser.vue
+++ b/components/NavBarEditarUser.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="navsearch_container container-fluid">
     <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
-    <NuxtLink to="/" @click="logout" >Cerrar sesión</NuxtLink>
+    <NuxtLink to="/" @click="handleLogout" >Cerrar sesión</NuxtLink>
   </div>
 </template>
 
 <script>
 import { useAuthStore } from '@/stores/auth'
+import { mapActions } from 'pinia'
+
 export default {
   setup() {
     const auth = useAuthStore();
@@ -15,8 +17,14 @@ export default {
     }
   },
   methods: {
-    async logout() {
-      await this.auth.logout()
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
+      try {
+        await this.logout()
+        this.$router.push('/')
+      } catch (error) {
+        console.error('Error logging out:', error)
+      }
     },
   },
 }
diff --git a/components/NavMenu.vue b/components/NavMenu.vue
index 41ee580..1aa6cea 100644
--- a/components/NavMenu.vue
+++ b/components/NavMenu.vue
@@ -95,7 +95,7 @@
                 <span class="section-text login">Importar</span>
               </li>
             </NuxtLink>
-            <NuxtLink v-if="isAuthenticated" @click="logout" to="/">
+            <NuxtLink v-if="isAuthenticated" @click="handleLogout" to="/">
               <li class="section" @click="isMenuOpen = !isMenuOpen">
                 <img
                   class="section-img"
@@ -145,6 +145,7 @@ import { mapActions } from 'pinia'
 import { useAuthStore } from '@/stores/auth'
 
 export default {
+  emits: ['handleLogout'],
   setup() {
     const auth = useAuthStore();
     return {
@@ -165,11 +166,11 @@ export default {
     },
   },
   methods: {
-    ...mapActions('auth', ['logout']),
-    async logout() {
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
       this.isMenuOpen = false
-      this.$emit('logout')
-      await this.logout()
+      this.$emit('handleLogout')
+      //await this.logout()
     },
   },
 }
diff --git a/layouts/admin.vue b/layouts/admin.vue
index 67c09f2..d92c3dc 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -5,20 +5,32 @@
       <NuxtLink to="/admin/cooperativas"> Administrar cooperativas </NuxtLink>
       <NuxtLink to="/admin/importar"> Alta de cooperativas por .csv </NuxtLink>
       <NuxtLink to="/admin/estadisticas"> Estadísticas </NuxtLink>
-      <NuxtLink to="/" @click="logout">Cerrar sesión</NuxtLink>
+      <button @click="handleLogout" class="logout-link">Cerrar sesión</button>
+      <!-- <NuxtLink to="/" @click="handleLogout">Cerrar sesión</NuxtLink> -->
     </div>
     <NuxtPage />
   </div>
 </template>
 
 <script>
+import { useAuthStore } from '@/stores/auth'
 import { mapActions } from 'pinia'
 export default {
-
+  setup() {
+    const auth = useAuthStore();
+    return {
+      auth,
+    }
+  },
   methods: {
-    ...mapActions('auth', ['logout']),
-    async logout() {
-      await this.logout()
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
+      try {
+        await this.logout()
+        this.$router.push('/')
+      } catch (error) {
+        console.error('Error logging out:', error)
+      }
     },
   },
 }
diff --git a/stores/auth.ts b/stores/auth.ts
index 0932460..d395e9a 100644
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -4,14 +4,15 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 export const useAuthStore = defineStore('auth', {
   state: () => ({
     access: null as string | null,
-    refresh: null as string | null,
+    refreshTokens: null as string | null,
     id: null as number | null,
     name: null as string | null,
     email: null as string | null,
     role: 'ANON' as string,
     cookiesAreAccepted: false,
   }),
-  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth' 👉🏻 https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt
+  
+  persist: true, // TODO: Enable persistence. Cookies will be stored 'auth' 👉🏻 https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt
   // persist: {
   //   key: 'authentication-cookie',
   //   storage: piniaPluginPersistedstate.cookies({
@@ -25,7 +26,7 @@ export const useAuthStore = defineStore('auth', {
   //     'email',
   //     'role',
   //     'access',
-  //     'refresh',
+  //     'refreshTokens',
   //     'cookiesAreAccepted',
   //   ],
   // },
@@ -68,22 +69,22 @@ export const useAuthStore = defineStore('auth', {
       }
     },
 
-    async refresh() {
+    async refreshAccessToken() {
       const config = useRuntimeConfig()
-      if (!this.refresh) return
+      if (!this.refreshTokens) return
       const data = await $fetch('/token/refresh/', {
         baseURL: config.public.baseURL,
         method: 'POST',
-        body: { refresh: this.refresh }
+        body: { refresh: this.refreshTokens }
       })
       this.setPayload(data)
     },
 
-    // Mutations migration
-    logout() {
-      this.$reset() // Reset the store state
+    async logout() {
+      this.$reset()
     },
-
+    
+    // Mutations migration
     acceptCookies() {
       this.cookiesAreAccepted = true
     },
@@ -98,7 +99,7 @@ export const useAuthStore = defineStore('auth', {
     setPayload(payload: any) {
       this.access = payload.access
       if (payload.refresh) {
-        this.refresh = payload.refresh
+        this.refreshTokens = payload.refresh
       }
     }
   }