Enhance newsletter subscription functionality with user profile integration

This commit updates the newsletter subscription component to display the user's email when logged in, improving user experience. It also adds logic to load the user's profile data upon authentication, ensuring that the email field is pre-filled for logged-in users. Additionally, the server-side subscription handler is modified to check user authentication status, allowing only logged-in users to subscribe to certain groups. This change enhances the overall subscription process and aligns it with user authentication state.

pages/newsletter/subscribe.vue

@@ -74,10 +74,20 @@
               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"
+              :readonly="isLoggedIn"
+              :class="[
+                'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500',
+                isLoggedIn ? 'bg-gray-100 border-gray-300 cursor-not-allowed' : 'border-gray-300'
+              ]"
               placeholder="ihre.email@example.com"
               @blur="checkSubscription"
             >
+            <p
+              v-if="isLoggedIn"
+              class="mt-1 text-xs text-gray-500"
+            >
+              Ihre E-Mail-Adresse wird aus Ihrem Profil verwendet.
+            </p>
           </div>
 
           <div>
@@ -125,13 +135,16 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { useAuthStore } from '~/stores/auth'
 
 useHead({
   title: 'Newsletter abonnieren - Harheimer TC',
 })
 
+const authStore = useAuthStore()
 const groups = ref([])
 const loadingGroups = ref(true)
+const loadingProfile = ref(false)
 const form = ref({
   groupId: '',
   email: '',
@@ -148,6 +161,10 @@ const selectedGroup = computed(() => {
   return groups.value.find(g => g.id === form.value.groupId)
 })
 
+const isLoggedIn = computed(() => authStore.isLoggedIn)
+const userEmail = computed(() => authStore.user?.email || '')
+const userName = computed(() => authStore.user?.name || '')
+
 async function loadGroups() {
   try {
     const response = await $fetch('/api/newsletter/groups/public-list')
@@ -160,6 +177,25 @@ async function loadGroups() {
   }
 }
 
+async function loadProfile() {
+  if (!isLoggedIn.value) {
+    return
+  }
+
+  loadingProfile.value = true
+  try {
+    const response = await $fetch('/api/profile')
+    if (response.success && response.user) {
+      form.value.email = response.user.email || ''
+      form.value.name = response.user.name || ''
+    }
+  } catch (err) {
+    console.error('Fehler beim Laden des Profils:', err)
+  } finally {
+    loadingProfile.value = false
+  }
+}
+
 async function checkSubscription() {
   if (!form.value.groupId || !form.value.email || !form.value.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
     alreadySubscribed.value = false
@@ -208,8 +244,12 @@ async function subscribe() {
   }
 }
 
-onMounted(() => {
-  loadGroups()
+onMounted(async () => {
+  await authStore.checkAuth()
+  await loadGroups()
+  if (isLoggedIn.value) {
+    await loadProfile()
+  }
 })
 </script>