159 lines
4.3 KiB
Vue
159 lines
4.3 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
|
|
class="space-y-6"
|
|
@submit.prevent="unsubscribe"
|
|
>
|
|
<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>
|
|
|