Yusron alamsyah
108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
Vue
<!-- components/layout/ProfileDD.vue -->
|
|
<script setup lang="ts">
|
|
import { MailIcon } from "vue-tabler-icons";
|
|
import { PerfectScrollbar } from "vue3-perfect-scrollbar";
|
|
import { useAuth } from "~/composables/useAuth";
|
|
import { computed, onMounted, watch } from "vue";
|
|
|
|
const auth = useAuth();
|
|
|
|
|
|
// Auth state is automatically populated by plugins/auth.client.ts
|
|
// No need to call checkAuth() here
|
|
|
|
// Logout with confirmation
|
|
const logoutWithConfirmation = async () => {
|
|
try {
|
|
const confirmed = confirm("Apakah Anda yakin ingin keluar?");
|
|
if (!confirmed) return;
|
|
|
|
console.log('🚪 Logging out from ProfileDD...');
|
|
await auth.logout();
|
|
} catch (error) {
|
|
console.error("Logout failed:", error);
|
|
}
|
|
};
|
|
|
|
// Get user display info from auth
|
|
const displayInfo = computed(() => {
|
|
if (!auth.user.value) {
|
|
return {
|
|
name: "Guest User",
|
|
email: "guest@example.com",
|
|
role: ["Guest"]
|
|
};
|
|
}
|
|
|
|
const user = auth.user.value;
|
|
|
|
return {
|
|
name: user.name || user.preferred_username || "User",
|
|
email: user.email || "No email",
|
|
role: user.client_roles || []
|
|
};
|
|
});
|
|
|
|
// Session info
|
|
const sessionInfo = computed(() => ({
|
|
isAuthenticated: auth.isAuthenticated.value,
|
|
hasValidSession: !!auth.user.value
|
|
}));
|
|
</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="400" 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-4">
|
|
<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-1">{{ displayInfo.name }}</h6>
|
|
<div class="d-flex align-center mt-1 mb-1">
|
|
<MailIcon size="18" stroke-width="1.5" />
|
|
<span
|
|
class="text-subtitle-1 font-weight-regular textSecondary ml-2"
|
|
>
|
|
{{ displayInfo.email }}
|
|
</span>
|
|
</div>
|
|
<v-chip v-for="role in displayInfo.role" :key="role" size="small" color="primary" class="mr-2">
|
|
{{ role }}
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logout button -->
|
|
<div class="pt-4 pb-6 px-8">
|
|
<v-btn
|
|
color="primary"
|
|
variant="outlined"
|
|
block
|
|
@click="logoutWithConfirmation"
|
|
prepend-icon="mdi-logout"
|
|
:loading="auth.isLoading.value"
|
|
:disabled="auth.isLoading.value"
|
|
>
|
|
Keluar
|
|
</v-btn>
|
|
</div>
|
|
</v-sheet>
|
|
</v-menu>
|
|
</template>
|