You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.7 KiB
71 lines
1.7 KiB
<script setup lang="ts">
|
|
import { CheckCircle } from 'lucide-vue-next'
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
// Countdown state (3 seconds)
|
|
const countdown = ref(3)
|
|
let countdownTimer: NodeJS.Timeout | null = null
|
|
|
|
/**
|
|
* Start countdown and auto-redirect to homepage after 3 seconds
|
|
*/
|
|
onMounted(() => {
|
|
countdownTimer = setInterval(() => {
|
|
countdown.value--
|
|
|
|
if (countdown.value <= 0) {
|
|
// Redirect to homepage
|
|
navigateTo('/')
|
|
}
|
|
}, 1000) // Update every 1 second
|
|
})
|
|
|
|
/**
|
|
* Cleanup timer on component unmount
|
|
*/
|
|
onUnmounted(() => {
|
|
if (countdownTimer) {
|
|
clearInterval(countdownTimer)
|
|
}
|
|
})
|
|
|
|
/**
|
|
* Handle "Skip" button click - redirect immediately
|
|
*/
|
|
function goToHomepage() {
|
|
navigateTo('/')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLayout name="default">
|
|
<div class="flex items-center justify-center min-h-[60vh] px-4">
|
|
<div class="max-w-md w-full text-center">
|
|
<!-- Success Icon -->
|
|
<div class="mb-6 flex justify-center">
|
|
<CheckCircle class="w-20 h-20 text-green-500" stroke-width="1.5" />
|
|
</div>
|
|
|
|
<!-- Heading -->
|
|
<h1 class="text-3xl font-bold mb-3 text-white">
|
|
Erfolgreich abgemeldet
|
|
</h1>
|
|
|
|
<!-- Message with countdown -->
|
|
<p class="text-lg text-white/80 mb-8">
|
|
Du wirst in <span class="font-semibold text-experimenta-accent">{{ countdown }}</span> Sekunde{{ countdown !== 1 ? 'n' : '' }} zur Startseite weitergeleitet...
|
|
</p>
|
|
|
|
<!-- Skip Button -->
|
|
<Button
|
|
variant="experimenta"
|
|
size="experimenta"
|
|
@click="goToHomepage"
|
|
class="min-w-[200px]"
|
|
>
|
|
Jetzt zur Startseite
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</NuxtLayout>
|
|
</template>
|
|
|