129 lines
3.9 KiB
Vue
129 lines
3.9 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">
|
|
<h1 class="text-3xl font-display font-bold text-gray-900 mb-6">
|
|
Newsletter abmelden
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-8" />
|
|
|
|
<div v-if="loadingGroups" class="text-center py-8">
|
|
<p class="text-gray-600">Lade verfügbare Newsletter...</p>
|
|
</div>
|
|
|
|
<form v-else @submit.prevent="unsubscribe" class="space-y-6">
|
|
<div>
|
|
<label for="groupId" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Newsletter auswählen *
|
|
</label>
|
|
<select
|
|
id="groupId"
|
|
v-model="form.groupId"
|
|
required
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<option value="">Bitte wählen Sie einen Newsletter</option>
|
|
<option v-for="group in groups" :key="group.id" :value="group.id">
|
|
{{ group.name }}
|
|
</option>
|
|
</select>
|
|
<p v-if="selectedGroup?.description" class="mt-2 text-sm text-gray-600">
|
|
{{ selectedGroup.description }}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
|
|
E-Mail-Adresse *
|
|
</label>
|
|
<input
|
|
id="email"
|
|
v-model="form.email"
|
|
type="email"
|
|
required
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
placeholder="ihre.email@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="error" class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div v-if="success" class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
|
|
{{ success }}
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="loading || !form.groupId"
|
|
class="w-full px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
{{ loading ? 'Wird verarbeitet...' : 'Newsletter abmelden' }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
|
|
useHead({
|
|
title: 'Newsletter abmelden - Harheimer TC',
|
|
})
|
|
|
|
const groups = ref([])
|
|
const loadingGroups = ref(true)
|
|
const form = ref({
|
|
groupId: '',
|
|
email: ''
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
const success = ref('')
|
|
|
|
const selectedGroup = computed(() => {
|
|
return groups.value.find(g => g.id === form.value.groupId)
|
|
})
|
|
|
|
async function loadGroups() {
|
|
try {
|
|
const response = await $fetch('/api/newsletter/groups/public-list')
|
|
groups.value = response.groups || []
|
|
} catch (err) {
|
|
console.error('Fehler beim Laden der Newsletter-Gruppen:', err)
|
|
error.value = 'Fehler beim Laden der verfügbaren Newsletter. Bitte versuchen Sie es später erneut.'
|
|
} finally {
|
|
loadingGroups.value = false
|
|
}
|
|
}
|
|
|
|
async function unsubscribe() {
|
|
loading.value = true
|
|
error.value = ''
|
|
success.value = ''
|
|
|
|
try {
|
|
const response = await $fetch('/api/newsletter/unsubscribe-by-email', {
|
|
method: 'POST',
|
|
body: form.value
|
|
})
|
|
|
|
success.value = response.message || 'Sie wurden erfolgreich vom Newsletter abgemeldet.'
|
|
form.value = { groupId: '', email: '' }
|
|
} catch (err) {
|
|
error.value = err.data?.statusMessage || err.message || 'Fehler bei der Abmeldung. Bitte versuchen Sie es später erneut.'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadGroups()
|
|
})
|
|
</script>
|
|
|