harheimertc/pages/newsletter/subscribe.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 abonnieren
        </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="subscribe" 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
              @change="checkSubscription"
              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 v-if="alreadySubscribed" class="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <p class="text-sm text-blue-700">
                ✓ Sie sind bereits für diesen Newsletter angemeldet.
              </p>
            </div>
          </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
              @blur="checkSubscription"
              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>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
              Name (optional)
            </label>
            <input
              id="name"
              v-model="form.name"
              type="text"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              placeholder="Ihr Name"
            />
          </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 || alreadySubscribed || !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...' : alreadySubscribed ? 'Bereits abonniert' : 'Newsletter abonnieren' }}
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

useHead({
  title: 'Newsletter abonnieren - Harheimer TC',
})

const groups = ref([])
const loadingGroups = ref(true)
const form = ref({
  groupId: '',
  email: '',
  name: ''
})

const loading = ref(false)
const checking = ref(false)
const error = ref('')
const success = ref('')
const alreadySubscribed = ref(false)

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 checkSubscription() {
  if (!form.value.groupId || !form.value.email || !form.value.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
    alreadySubscribed.value = false
    return
  }

  checking.value = true
  try {
    const response = await $fetch('/api/newsletter/check-subscription', {
      query: {
        email: form.value.email,
        groupId: form.value.groupId
      }
    })
    alreadySubscribed.value = response.subscribed || false
  } catch (err) {
    // Fehler ignorieren - könnte bedeuten, dass nicht abonniert ist
    alreadySubscribed.value = false
  } finally {
    checking.value = false
  }
}

async function subscribe() {
  if (alreadySubscribed.value) {
    return
  }

  loading.value = true
  error.value = ''
  success.value = ''

  try {
    const response = await $fetch('/api/newsletter/subscribe', {
      method: 'POST',
      body: form.value
    })

    success.value = response.message || 'Eine Bestätigungsmail wurde an Ihre E-Mail-Adresse gesendet.'
    form.value = { groupId: form.value.groupId, email: '', name: '' }
    alreadySubscribed.value = false
  } catch (err) {
    error.value = err.data?.statusMessage || err.message || 'Fehler bei der Anmeldung. Bitte versuchen Sie es später erneut.'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadGroups()
})
</script>