Update dependencies to include TinyMCE and Quill, enhance Navigation component with a new Newsletter submenu, and implement role-based access control for CMS features. Refactor user role handling to support multiple roles and improve user management functionality across various API endpoints.

pages/newsletter/unsubscribe.vue

@@ -0,0 +1,128 @@
+<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>
+