Fix #104

frontend/components/SessionRefreshModal.vue

@@ -0,0 +1,43 @@
+<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>