padreug
1631c23717
- Add a state variable to manage the visibility of the Logout Confirmation dialog in Navbar.vue. - Update the LogoutConfirmDialog component to accept an isOpen prop and emit an update event for improved visibility control. - Refactor the logout button in Navbar.vue to trigger the confirmation dialog, enhancing user experience by preventing accidental logouts.
98 lines
3 KiB
Vue
98 lines
3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { LogOut, AlertTriangle } from 'lucide-vue-next'
|
|
|
|
// Define component name for better debugging
|
|
defineOptions({
|
|
name: 'LogoutConfirmDialog'
|
|
})
|
|
|
|
interface Props {
|
|
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
|
|
size?: 'default' | 'sm' | 'lg' | 'icon'
|
|
class?: string
|
|
children?: any
|
|
isOpen?: boolean
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'confirm'): void
|
|
(e: 'update:isOpen', value: boolean): void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'destructive',
|
|
size: 'default'
|
|
})
|
|
|
|
// Default classes for the logout button styling
|
|
const defaultClasses = computed(() => {
|
|
const baseClasses = 'gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10'
|
|
|
|
if (props.class) {
|
|
// Merge custom classes with base classes, ensuring red styling is preserved
|
|
return `${props.class} ${baseClasses}`
|
|
}
|
|
|
|
// Default styling that matches the original red logout button
|
|
return baseClasses
|
|
})
|
|
|
|
const emit = defineEmits<Emits>()
|
|
const isOpen = computed({
|
|
get: () => props.isOpen ?? false,
|
|
set: (value: boolean) => emit('update:isOpen', value)
|
|
})
|
|
|
|
const handleConfirm = () => {
|
|
isOpen.value = false
|
|
emit('confirm')
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
isOpen.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="isOpen">
|
|
<DialogTrigger v-if="props.isOpen === undefined" as-child>
|
|
<slot>
|
|
<Button :variant="variant" :size="size" :class="defaultClasses">
|
|
<LogOut class="h-4 w-4" />
|
|
Logout
|
|
</Button>
|
|
</slot>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent class="sm:max-w-md">
|
|
<DialogHeader class="space-y-4">
|
|
<div class="mx-auto w-12 h-12 rounded-full bg-gradient-to-br from-destructive to-destructive/80 p-0.5">
|
|
<div class="w-full h-full rounded-full bg-background flex items-center justify-center">
|
|
<AlertTriangle class="h-6 w-6 text-destructive" />
|
|
</div>
|
|
</div>
|
|
<div class="text-center space-y-2">
|
|
<DialogTitle class="text-xl font-semibold text-foreground">
|
|
Confirm Logout
|
|
</DialogTitle>
|
|
<DialogDescription class="text-muted-foreground">
|
|
Are you sure you want to logout? You will need to log in again to access your account.
|
|
</DialogDescription>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<DialogFooter class="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
|
<Button variant="ghost" @click="handleCancel" class="flex-1 sm:flex-none">
|
|
Cancel
|
|
</Button>
|
|
<Button variant="destructive" @click="handleConfirm" class="flex-1 sm:flex-none">
|
|
<LogOut class="h-4 w-4 mr-2" />
|
|
Logout
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|