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

refactor: Simplify Logout Confirmation Handling in Navbar

Browse source 
- Remove the showLogoutConfirm state variable from Navbar.vue to streamline the logout confirmation process.
- Update the LogoutConfirmDialog component to manage its own visibility state internally, enhancing encapsulation.
- Refactor the logout button to directly trigger the confirmation dialog, improving code clarity and user experience.

feat: Enhance Logout Confirmation Handling Across Components

- Introduce a showLogoutConfirm state variable in ProfileDialog.vue, UserProfile.vue, and Navbar.vue to manage the visibility of the Logout Confirmation dialog.
- Refactor logout buttons in these components to trigger the confirmation dialog, improving user experience and preventing accidental logouts.
- Update the LogoutConfirmDialog component to accept an isOpen prop for better control of its visibility, ensuring consistent functionality across the application.
This commit is contained in:
padreug 2025-08-10 23:45:12 +02:00
parent 1631c23717
commit 9e9137e6b0
4 changed files with 53 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue'
import { computed, ref } from 'vue'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
@ -21,6 +21,7 @@ defineProps<Props>()
const emit = defineEmits<Emits>()
const userDisplay = computed(() => auth.userDisplay.value)
const showLogoutConfirm = ref(false)
// Get the API base URL from environment variables
const apiBaseUrl = import.meta.env.VITE_LNBITS_BASE_URL || ''
@ -126,10 +127,10 @@ function handleClose() {
Change Password
</Button>
<LogoutConfirmDialog variant="destructive" class="w-full justify-start gap-2" @confirm="handleLogout">
<LogOut class="w-4 h-4" />
Logout
</LogoutConfirmDialog>
<Button variant="ghost" @click="showLogoutConfirm = true" class="w-full justify-start gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
<LogOut class="w-4 h-4" />
Logout
</Button>
</div>
</CardContent>
</Card>
@ -141,4 +142,10 @@ function handleClose() {
</div>
</DialogContent>
</Dialog>
<!-- Logout Confirm Dialog -->
<LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" class="w-full justify-start gap-2" @confirm="handleLogout">
<LogOut class="w-4 h-4" />
Logout
</LogoutConfirmDialog>
</template>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
@ -11,6 +11,7 @@ import { toast } from 'vue-sonner'
const router = useRouter()
const userDisplay = computed(() => auth.userDisplay.value)
const showLogoutConfirm = ref(false)
function handleLogout() {
auth.logout()
@ -59,12 +60,18 @@ function handleLogout() {
<Settings class="w-4 h-4 mr-2" />
Settings
</Button>
<LogoutConfirmDialog variant="destructive" size="sm" class="flex-1" @confirm="handleLogout">
<LogOut class="w-4 h-4 mr-2" />
Logout
</LogoutConfirmDialog>
<Button variant="ghost" size="sm" @click="showLogoutConfirm = true" class="flex-1 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
<LogOut class="w-4 h-4 mr-2" />
Logout
</Button>
</div>
</CardContent>
</Card>
</div>
<!-- Logout Confirm Dialog -->
<LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" size="sm" class="flex-1 text-destructive hover:text-destructive/90 hover:bg-destructive/10" @confirm="handleLogout">
<LogOut class="w-4 h-4 mr-2" />
Logout
</LogoutConfirmDialog>
</template>