feat : middleware and refresh token

components/layout/full/vertical-header/ProfileDD.vue

@@ -2,7 +2,8 @@
 <script setup lang="ts">
 import { MailIcon } from "vue-tabler-icons";
 import { useAuth } from "~/composables/useAuth";
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
+import DialogConfrim from "~/components/shared/DialogConfrim.vue";
 
 const auth = useAuth();
 
@@ -12,29 +13,39 @@ onMounted(async () => {
   }
 });
 
-// Enhanced logout with proper error handling
-const logout = async () => {
-  await auth.logout();
+const isLogoutDialogOpen = ref(false);
+const isFullLogoutDialogOpen = ref(false);
+const isLoggingOut = ref(false);
+const isFullLoggingOut = ref(false);
+
+const openLogoutDialog = () => {
+  isLogoutDialogOpen.value = true;
 };
 
-// **TAMBAHAN: Full logout function dengan konfirmasi**
-const fullLogout = async () => {
-  const confirmed = confirm(
-    "Apakah Anda yakin ingin keluar dari semua sesi? Ini akan menghapus semua data lokal dan sesi Keycloak."
-  );
-
-  if (!confirmed) return;
-
-  await auth.fullLogout();
+const openFullLogoutDialog = () => {
+  isFullLogoutDialogOpen.value = true;
 };
 
-// **TAMBAHAN: Logout dengan konfirmasi untuk UX yang lebih baik**
-const logoutWithConfirmation = async () => {
-  const confirmed = confirm("Apakah Anda yakin ingin keluar?");
+const confirmLogout = async () => {
+  if (isLoggingOut.value) return;
+  isLoggingOut.value = true;
+  try {
+    await auth.logout();
+    isLogoutDialogOpen.value = false;
+  } finally {
+    isLoggingOut.value = false;
+  }
+};
 
-  if (!confirmed) return;
-
-  await logout();
+const confirmFullLogout = async () => {
+  if (isFullLoggingOut.value) return;
+  isFullLoggingOut.value = true;
+  try {
+    await auth.fullLogout();
+    isFullLogoutDialogOpen.value = false;
+  } finally {
+    isFullLoggingOut.value = false;
+  }
 };
 
 // Get user display info from session
@@ -121,7 +132,7 @@ const sessionInfo = computed(() => {
           color="primary"
           variant="outlined"
           block
-          @click="logoutWithConfirmation"
+          @click="openLogoutDialog"
           prepend-icon="mdi-logout"
           class="mb-2"
         >
@@ -134,13 +145,35 @@ const sessionInfo = computed(() => {
           color="error"
           variant="outlined"
           block
-          @click="fullLogout"
+          @click="openFullLogoutDialog"
           prepend-icon="mdi-logout-variant"
           class="mb-2"
         >
           Full Logout
         </v-btn>
       </div>
+
+      <DialogConfrim
+        v-model="isLogoutDialogOpen"
+        title="Logout"
+        message="Apakah Anda yakin ingin keluar?"
+        confirm-text="Ya"
+        cancel-text="Tidak"
+        :loading="isLoggingOut"
+        :close-on-confirm="false"
+        @confirm="confirmLogout"
+      />
+
+      <DialogConfrim
+        v-model="isFullLogoutDialogOpen"
+        title="Full Logout"
+        message="Apakah Anda yakin ingin keluar dari semua sesi? Ini akan menghapus semua data lokal dan sesi Keycloak."
+        confirm-text="Ya"
+        cancel-text="Tidak"
+        :loading="isFullLoggingOut"
+        :close-on-confirm="false"
+        @confirm="confirmFullLogout"
+      />
     </v-sheet>
   </v-menu>
 </template>

components/layout/full/vertical-header/VerticalHeader.vue

@@ -44,14 +44,14 @@ watch(priority, (newPriority) => {
         <!-- ---------------------------------------------- -->
         <!-- Search part -->
         <!-- ---------------------------------------------- -->
-        <Searchbar />
+        <!-- <Searchbar /> -->
 
         <!-- ---------------------------------------------- -->
         <!-- Mega menu -->
         <!-- ---------------------------------------------- -->
-        <div class="hidden-sm-and-down">
+        <!-- <div class="hidden-sm-and-down">
             <Navigations />
-        </div>
+        </div> -->
 
         <v-spacer class="hidden-sm-and-down" />
 
@@ -63,14 +63,14 @@ watch(priority, (newPriority) => {
         </div>
 
   
-        <ThemeToggler />
+        <!-- <ThemeToggler /> -->
 
         <!-- ---------------------------------------------- -->
         <!-- translate -->
         <!-- ---------------------------------------------- -->
-        <div class="hidden-sm-and-down">
+        <!-- <div class="hidden-sm-and-down">
             <LanguageDD />
-        </div>
+        </div> -->
 
         <!-- ---------------------------------------------- -->
         <!-- ShoppingCart -->
@@ -84,9 +84,9 @@ watch(priority, (newPriority) => {
         <!-- ---------------------------------------------- -->
         <!-- Notification -->
         <!-- ---------------------------------------------- -->
-        <div class="hidden-sm-and-down">
+        <!-- <div class="hidden-sm-and-down">
             <NotificationDD />
-        </div>
+        </div> -->
 
         <!-- ---------------------------------------------- -->
         <!-- User Profile -->