44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const auth = useAuthStore()
|
|
|
|
const remainingMinutes = computed(() => Math.floor(auth.sessionWarningRemainingSeconds / 60))
|
|
const remainingSeconds = computed(() => auth.sessionWarningRemainingSeconds % 60)
|
|
const remainingTimeLabel = computed(() => `${remainingMinutes.value}:${String(remainingSeconds.value).padStart(2, "0")}`)
|
|
|
|
const onRefresh = async () => {
|
|
await auth.refreshSession()
|
|
}
|
|
|
|
const onLogout = async () => {
|
|
auth.sessionWarningVisible = false
|
|
await auth.logout()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UModal v-model="auth.sessionWarningVisible" prevent-close>
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
|
|
</template>
|
|
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
Deine Sitzung endet in
|
|
<span class="font-semibold">{{ remainingTimeLabel }}</span>.
|
|
Bitte bestätige, um eingeloggt zu bleiben.
|
|
</p>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<UButton variant="outline" color="gray" @click="onLogout">
|
|
Abmelden
|
|
</UButton>
|
|
<UButton color="primary" @click="onRefresh">
|
|
Eingeloggt bleiben
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</UModal>
|
|
</template>
|