padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Enhance Logout Confirmation in Navbar and Dialog Component

Browse source 
- Add a new 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 better control of its visibility.
- Refactor the logout button in Navbar.vue to trigger the confirmation dialog, improving user experience by preventing accidental logouts.
This commit is contained in:
padreug 2025-08-10 23:04:45 +02:00
parent 442861e5a5
commit a27e4f41a6
2 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/layout/Navbar.vue
View file

@ -155,8 +155,8 @@ const handleLogout = async () => {
Relay Hub Status
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem as-child class="text-destructive">
<LogoutConfirmDialog variant="ghost" size="sm" class="w-full justify-start gap-2 h-auto p-2" @confirm="handleLogout">
<DropdownMenuItem @click="() => {}" class="text-destructive p-0">
<LogoutConfirmDialog variant="destructive" size="sm" class="w-full justify-start" @confirm="handleLogout">
<LogOut class="h-4 w-4" />
Logout
</LogoutConfirmDialog>
@ -242,7 +242,7 @@ const handleLogout = async () => {
<Activity class="h-4 w-4" />
Relay Hub Status
</Button>
<LogoutConfirmDialog variant="ghost" size="sm" class="w-full justify-start gap-2 text-destructive" @confirm="handleLogout">
<LogoutConfirmDialog variant="destructive" size="sm" class="w-full justify-start gap-2" @confirm="handleLogout">
<LogOut class="h-4 w-4" />
Logout
</LogoutConfirmDialog>

16
src/components/ui/LogoutConfirmDialog/LogoutConfirmDialog.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue'
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'
@ -21,10 +21,18 @@ interface Emits {
}
const props = withDefaults(defineProps<Props>(), {
variant: 'outline',
variant: 'destructive',
size: 'default'
})
// Default classes for the logout button styling
const defaultClasses = computed(() => {
if (props.class) return props.class
// Default styling that matches the original red logout button
return 'gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10'
})
const emit = defineEmits<Emits>()
const isOpen = ref(false)
@ -42,8 +50,8 @@ const handleCancel = () => {
<Dialog v-model:open="isOpen">
<DialogTrigger as-child>
<slot>
<Button :variant="variant" :size="size" :class="class">
<LogOut class="h-4 w-4 mr-2" />
<Button :variant="variant" :size="size" :class="defaultClasses">
<LogOut class="h-4 w-4" />
Logout
</Button>
</slot>