update Keycloak logout & fullLogout

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

@@ -2,14 +2,36 @@
 import { signOut } from "next-auth/react";
 import { profileDD } from "@/_mockApis/headerData";
 
-const { data, status, getCsrfToken, getProviders } = useAuth()
-const runtimeConfig = useRuntimeConfig()
+import { useUserInfo } from "~/composables/useUserInfo";
+import type { ExtendedUser } from "~/types/auth";
+
+const { data, status, getCsrfToken, getProviders } = useAuth();
+const runtimeConfig = useRuntimeConfig();
+// const logout = async () => {
+//   await signOut()
+//   const LogOutKeycloakURL = `${runtimeConfig.public.keycloakUrl}/realms/${runtimeConfig.public.keycloakRealm}/protocol/openid-connect`
+//   const logOutURL = `${LogOutKeycloakURL}/logout?client_id=${runtimeConfig.public.keycloakClient}&post_logout_redirect_uri=${encodeURIComponent(window.location.origin)}/auth/login`;
+//   window.location.href = logOutURL
+// }
+const userInfo = useUserInfo();
 const logout = async () => {
-  await signOut()
-  const LogOutKeycloakURL = `${runtimeConfig.public.keycloakUrl}/realms/${runtimeConfig.public.keycloakRealm}/protocol/openid-connect`
-  const logOutURL = `${LogOutKeycloakURL}/logout?client_id=${runtimeConfig.public.keycloakClient}&post_logout_redirect_uri=${encodeURIComponent(window.location.origin)}/auth/login`;
-  window.location.href = logOutURL
-}
+  userInfo.logout();
+  //userInfo.logout();
+};
+const fullLogout = async () => {
+  //userInfo.logout();
+  userInfo.fullLogout();
+};
+
+const userName = computed(() => {
+  const user = userInfo.user.value as ExtendedUser | null;
+  return user && user.name ? user.name : "N/A";
+});
+
+const userEmail = computed(() => {
+  const user = userInfo.user.value as ExtendedUser | null;
+  return user && user.email ? user.email : "N/A";
+});
 </script>
 
 <template>
@@ -34,7 +56,7 @@ const logout = async () => {
         </v-avatar>
       </v-btn>
     </template>
-    <v-sheet rounded="md" width="280" elevation="10">
+    <v-sheet rounded="md" width="350" elevation="10">
       <div class="pa-6">
         <div class="d-flex align-center pb-6">
           <v-avatar size="55">
@@ -42,16 +64,14 @@ const logout = async () => {
           </v-avatar>
           <div class="ml-3">
             <h6 class="text-subtitle-1">
-              David McMichael <span class="text-success text-caption">Pro</span>
+              {{ userName }}
             </h6>
-            <span class="text-subtitle-1 textSecondary"
-              >david@wrappixel.com</span
-            >
+            <span class="text-subtitle-1 textSecondary">{{ userEmail }}</span>
           </div>
         </div>
         <v-divider></v-divider>
         <perfect-scrollbar
-          style="height: calc(100vh - 300px); max-height: 300px"
+          style="height: calc(100vh - 400px); max-height: 400px; width: 100%; "
         >
           <v-list class="py-0 theme-list mt-3" lines="one">
             <v-list-item
@@ -68,7 +88,16 @@ const logout = async () => {
                 <v-chip size="small" color="error" v-if="item.badge">4</v-chip>
               </div>
             </v-list-item>
-            <v-btn @click="logout" color="primary" variant="outlined" block>Logout</v-btn>
+            <v-btn @click="logout" color="primary" variant="elevated" block
+              >Logout</v-btn
+            >
+            <v-divider>-</v-divider>
+            <v-btn @click="fullLogout" color="primary" variant="outlined" block
+              >Full Logout</v-btn
+            >
+            <span class="text-caption textSecondary"
+              >Full logout akan menghapus semua sesi dan data lokal</span
+            >
           </v-list>
         </perfect-scrollbar>
       </div>