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

feat: Implement Logout Confirmation Dialog

Browse source 
- Introduce a new LogoutConfirmDialog component to confirm user logout actions.
- Update ProfileDialog.vue, UserProfile.vue, and Navbar.vue to utilize the new dialog for logout confirmation, enhancing user experience and preventing accidental logouts.
- Ensure consistent styling and functionality across all instances where logout confirmation is required.
This commit is contained in:
padreug 2025-08-10 22:53:22 +02:00
parent 3ceb7f219a
commit 442861e5a5
6 changed files with 175 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/auth/ProfileDialog.vue
View file

@ -4,6 +4,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
import { User, LogOut, Settings, Key, Wallet, ExternalLink } from 'lucide-vue-next'
import { auth } from '@/composables/useAuth'
import { toast } from 'vue-sonner'
@ -125,10 +126,10 @@ function handleClose() {
Change Password
</Button>
<Button variant="destructive" @click="handleLogout" class="w-full justify-start gap-2">
<LogoutConfirmDialog variant="destructive" class="w-full justify-start gap-2" @confirm="handleLogout">
<LogOut class="w-4 h-4" />
Logout
</Button>
</LogoutConfirmDialog>
</div>
</CardContent>
</Card>

5
src/components/auth/UserProfile.vue
View file

@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
import { User, LogOut, Settings } from 'lucide-vue-next'
import { auth } from '@/composables/useAuth'
import { toast } from 'vue-sonner'
@ -58,10 +59,10 @@ function handleLogout() {
<Settings class="w-4 h-4 mr-2" />
Settings
</Button>
<Button variant="destructive" size="sm" @click="handleLogout" class="flex-1">
<LogoutConfirmDialog variant="destructive" size="sm" class="flex-1" @confirm="handleLogout">
<LogOut class="w-4 h-4 mr-2" />
Logout
</Button>
</LogoutConfirmDialog>
</div>
</CardContent>
</Card>