developed

src/components/top-bar/Main.vue

@@ -103,19 +103,10 @@ const { ticketList, hasMessagesFromAdmin } = storeToRefs(ticketsStore);
 const authStore = useAuthStore();
 const { user } = storeToRefs(authStore);
 
-const onLogout = () => {
+const onLogout = async () => {
   console.log("Logout");
-  localStorage.clear();
   const authStore = useAuthStore();
-
-  console.log("this.user before reset: ", authStore.user);
-
-  router.push({ path: "/login" });
-
-  // reset after navigation !!!
-  authStore.$reset();
-
-  console.log("this.user after reset: ", authStore.user);
+  await authStore.logout();
 };
 
 const onProfileUpdate = () => router.push({ path: "/update-profile" });

src/stores/auth.js

@@ -35,14 +35,30 @@ export const useAuthStore = defineStore({
       }
     },
 
+    async logout() {
+      try {
+        const response = await fetchWrapper.post(`${baseUrl}/logout`);
+        console.log("logout response: ", response);
+
+        localStorage.clear();
+        this.user = null;
+
+        router.push({ path: "/login" });
+      } catch (error) {
+        console.log("logout err :", error);
+      }
+    },
+
     async register(newUser) {
       try {
-        const response = await fetchWrapper.post(`${baseUrl}/register`, newUser);
+        const response = await fetchWrapper.post(
+          `${baseUrl}/register`,
+          newUser
+        );
 
-        if(response.data && response.data.is_verified){
+        if (response.data && response.data.is_verified) {
           router.push({ path: "/login" });
-        }
-        else {
+        } else {
           router.push({ path: "/email-verify" });
         }
         // console.warn(response.data);

src/views/profile/Main.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="intro-y flex items-center mt-8">
-    <h2 class="text-lg font-medium mr-auto">Profile</h2>
+    <h2 class="text-lg font-medium mr-auto">Account</h2>
   </div>
   <div class="intro-y grid grid-cols-1 lg:grid-cols-2 gap-6 mt-5">
     <!-- BEGIN: Company -->
     <PreviewComponent v-if="accountType == 'company'" class="intro-y box flex flex-col">
       <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-        <h2 class="font-medium text-base mr-auto">Company info</h2>
+        <h2 class="font-medium text-base mr-auto">Profile</h2>
         <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
           <a href="javascript:;" @click.prevent="onEdit(accountType, profile)" class="btn btn-primary">
             <EditIcon class="w-4 h-4" />
@@ -61,7 +61,7 @@
     <!-- BEGIN: Entrepreneur -->
     <PreviewComponent v-else="accountType == 'business'" class="intro-y box flex flex-col">
       <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-        <h2 class="font-medium text-base mr-auto">Personal</h2>
+        <h2 class="font-medium text-base mr-auto">Profile</h2>
         <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
           <a href="javascript:;" @click.prevent="onEdit(accountType, profile)" class="btn btn-primary">
             <EditIcon class="w-4 h-4" />
@@ -228,6 +228,7 @@ import { useRoute } from "vue-router";
 import router from "@/router";
 import { fetchWrapper } from "@/api";
 import { helper as $h } from "@/utils/helper";
+import { useAuthStore } from "@/stores";
 
 const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
 
@@ -251,6 +252,8 @@ const legalCanExtend = ref(false);
 const legalBtnTitle = ref("");
 const isLegalBtnLoading = ref(false);
 
+const authStore = useAuthStore();
+
 const onEdit = (name, params) => {
   router.push({ name: name, params: params });
 };
@@ -258,7 +261,7 @@ const onEdit = (name, params) => {
 const onLegalBtnTapped = async () => {
   console.log("onLegalBtnTapped");
   if (
-    ! legalAppStatus.value ||
+    !legalAppStatus.value ||
     legalCanExtend.value
   ) {
     const response = await createApplication();
@@ -345,6 +348,8 @@ const fetchAccount = async () => {
     isLoading.value = false;
   } catch (error) {
     isLoading.value = false;
+    const authStore = useAuthStore();
+    await authStore.logout();
   }
 };