Yusron alamsyah
147 lines
4.0 KiB
Vue
147 lines
4.0 KiB
Vue
<!-- components/layout/ProfileDD.vue -->
|
|
<script setup lang="ts">
|
|
import { MailIcon } from "vue-tabler-icons";
|
|
import { useAuth } from "~/composables/useAuth";
|
|
import { computed, onMounted } from "vue";
|
|
|
|
const auth = useAuth();
|
|
|
|
onMounted(async () => {
|
|
if (!auth.isLoggedIn.value) {
|
|
await auth.fetchUserSession();
|
|
}
|
|
});
|
|
|
|
// Enhanced logout with proper error handling
|
|
const logout = async () => {
|
|
await auth.logout();
|
|
};
|
|
|
|
// **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();
|
|
};
|
|
|
|
// **TAMBAHAN: Logout dengan konfirmasi untuk UX yang lebih baik**
|
|
const logoutWithConfirmation = async () => {
|
|
const confirmed = confirm("Apakah Anda yakin ingin keluar?");
|
|
|
|
if (!confirmed) return;
|
|
|
|
await logout();
|
|
};
|
|
|
|
// Get user display info from session
|
|
const getUserDisplayInfo = () => {
|
|
if (!auth.user.value)
|
|
return {
|
|
name: "Guest User",
|
|
email: "guest@example.com",
|
|
role: "Guest"
|
|
};
|
|
|
|
const user = auth.user.value || {};
|
|
return {
|
|
name: user.name || "User",
|
|
email: user.email || "No email",
|
|
role: auth.userRoles.value[0] || user.role || "User",
|
|
provider :user.auth_provider
|
|
};
|
|
};
|
|
|
|
const displayInfo = computed(() => getUserDisplayInfo());
|
|
const sessionInfo = computed(() => {
|
|
return {
|
|
isAuthenticated: auth.isLoggedIn.value,
|
|
sessionExpires: auth.sessionData.value?.expiresAt || null,
|
|
hasValidToken: !!auth.sessionData.value?.accessToken
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<v-menu :close-on-content-click="false">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn class="custom-hover-primary" variant="text" v-bind="props" icon>
|
|
<v-avatar size="35">
|
|
<img
|
|
src="~/assets/images/profile/user-1.jpg"
|
|
width="35"
|
|
alt="User Avatar"
|
|
/>
|
|
</v-avatar>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-sheet rounded="md" width="360" elevation="10">
|
|
<div class="px-8 pt-6">
|
|
<h6 class="text-h5 font-weight-medium">User Profile</h6>
|
|
<div class="d-flex align-center mt-4 pb-6">
|
|
<v-avatar size="80">
|
|
<img src="~/assets/images/profile/user-1.jpg" width="80" />
|
|
</v-avatar>
|
|
<div class="ml-3">
|
|
<h6 class="text-h6 mb-n1">{{ displayInfo.name }}</h6>
|
|
<!-- <span class="text-subtitle-1 font-weight-regular textSecondary">
|
|
{{ displayInfo.role }}
|
|
</span> -->
|
|
<div class="d-flex align-center mt-2">
|
|
<MailIcon size="18" stroke-width="1.5" />
|
|
<span
|
|
class="text-subtitle-1 font-weight-regular textSecondary ml-2"
|
|
>
|
|
{{ displayInfo.email }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- **TAMBAHAN: Tampilkan status session** -->
|
|
<div class="mt-2">
|
|
<v-chip
|
|
:color="sessionInfo.isAuthenticated ? 'success' : 'error'"
|
|
size="small"
|
|
variant="outlined"
|
|
>
|
|
{{ sessionInfo.isAuthenticated ? "Active" : "Inactive" }}
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- **DIPERBAIKI: Logout buttons section dengan multiple options** -->
|
|
<div class="pt-0 pb-6 px-8">
|
|
<!-- Regular Logout Button -->
|
|
<v-btn
|
|
color="primary"
|
|
variant="outlined"
|
|
block
|
|
@click="logoutWithConfirmation"
|
|
prepend-icon="mdi-logout"
|
|
class="mb-2"
|
|
>
|
|
Logout
|
|
</v-btn>
|
|
|
|
<!-- **TAMBAHAN: Full Logout Button** -->
|
|
<v-btn
|
|
v-if="displayInfo.provider === 'keycloak'"
|
|
color="error"
|
|
variant="outlined"
|
|
block
|
|
@click="fullLogout"
|
|
prepend-icon="mdi-logout-variant"
|
|
class="mb-2"
|
|
>
|
|
Full Logout
|
|
</v-btn>
|
|
</div>
|
|
</v-sheet>
|
|
</v-menu>
|
|
</template>
|