104 lines
3.0 KiB
Vue
104 lines
3.0 KiB
Vue
<template>
|
|
<div class="min-h-full py-16 bg-gray-50">
|
|
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="bg-white rounded-xl shadow-lg p-8 text-center">
|
|
<div
|
|
v-if="loading"
|
|
class="py-12"
|
|
>
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<svg
|
|
class="w-8 h-8 text-blue-600 animate-spin"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p class="text-lg text-gray-600">
|
|
Newsletter-Anmeldung wird bestätigt...
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="error"
|
|
class="py-12"
|
|
>
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<svg
|
|
class="w-8 h-8 text-red-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-3xl font-display font-bold text-gray-900 mb-4">
|
|
Fehler
|
|
</h1>
|
|
<p class="text-lg text-gray-600 mb-8">
|
|
{{ error }}
|
|
</p>
|
|
<NuxtLink
|
|
to="/newsletter/subscribe"
|
|
class="inline-block px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors"
|
|
>
|
|
Zurück zur Anmeldung
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
useHead({
|
|
title: 'Newsletter bestätigen - Harheimer TC',
|
|
})
|
|
|
|
const route = useRoute()
|
|
const loading = ref(true)
|
|
const error = ref('')
|
|
|
|
onMounted(async () => {
|
|
const token = route.query.token
|
|
|
|
if (!token) {
|
|
error.value = 'Bestätigungstoken fehlt'
|
|
loading.value = false
|
|
return
|
|
}
|
|
|
|
try {
|
|
// Rufe den API-Endpoint auf, der die Bestätigung durchführt
|
|
const response = await $fetch(`/api/newsletter/confirm?token=${token}`)
|
|
|
|
// Wenn erfolgreich, weiterleiten zur Bestätigungsseite
|
|
if (response.alreadyConfirmed) {
|
|
await navigateTo('/newsletter/confirmed?already=true')
|
|
} else {
|
|
await navigateTo('/newsletter/confirmed')
|
|
}
|
|
} catch (err) {
|
|
console.error('Fehler bei Newsletter-Bestätigung:', err)
|
|
error.value = err.data?.statusMessage || err.message || 'Fehler bei der Newsletter-Bestätigung'
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|