Refactor error and confirmation handling in membership application management; replace alerts with modal dialogs for improved user experience. Update application status to 'approved' for a new member and add corresponding data to JSON files.

app.vue

@@ -5,10 +5,12 @@
       <NuxtPage />
     </main>
     <Footer />
+    <ModalDialog />
   </div>
 </template>
 
 <script setup>
 import Navigation from '~/components/Navigation.vue'
 import Footer from '~/components/Footer.vue'
+import ModalDialog from '~/components/ModalDialog.vue'
 </script>

components/ModalDialog.vue

@@ -0,0 +1,165 @@
+<template>
+  <!-- Success Modal -->
+  <div
+    v-if="showSuccess"
+    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+    @click.self="closeSuccess"
+  >
+    <div class="bg-white rounded-lg max-w-md w-full p-6">
+      <div class="flex items-center mb-4">
+        <div class="flex-shrink-0 w-10 h-10 mx-auto bg-green-100 rounded-full flex items-center justify-center">
+          <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+          </svg>
+        </div>
+      </div>
+      <div class="text-center">
+        <h3 class="text-lg font-medium text-gray-900 mb-2">{{ successTitle }}</h3>
+        <p class="text-sm text-gray-600 mb-6">{{ successMessage }}</p>
+        <div class="flex justify-center">
+          <button
+            @click="closeSuccess"
+            class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors"
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Error Modal -->
+  <div
+    v-if="showError"
+    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+    @click.self="closeError"
+  >
+    <div class="bg-white rounded-lg max-w-md w-full p-6">
+      <div class="flex items-center mb-4">
+        <div class="flex-shrink-0 w-10 h-10 mx-auto bg-red-100 rounded-full flex items-center justify-center">
+          <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </div>
+      </div>
+      <div class="text-center">
+        <h3 class="text-lg font-medium text-gray-900 mb-2">{{ errorTitle }}</h3>
+        <p class="text-sm text-gray-600 mb-6">{{ errorMessage }}</p>
+        <div class="flex justify-center">
+          <button
+            @click="closeError"
+            class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Confirm Modal -->
+  <div
+    v-if="showConfirm"
+    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+    @click.self="closeConfirm"
+  >
+    <div class="bg-white rounded-lg max-w-md w-full p-6">
+      <div class="flex items-center mb-4">
+        <div class="flex-shrink-0 w-10 h-10 mx-auto bg-yellow-100 rounded-full flex items-center justify-center">
+          <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
+          </svg>
+        </div>
+      </div>
+      <div class="text-center">
+        <h3 class="text-lg font-medium text-gray-900 mb-2">{{ confirmTitle }}</h3>
+        <p class="text-sm text-gray-600 mb-6">{{ confirmMessage }}</p>
+        <div class="flex space-x-3 justify-center">
+          <button
+            @click="closeConfirm"
+            class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            @click="executeConfirm"
+            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
+          >
+            Bestätigen
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// Modal States
+const showSuccess = ref(false)
+const showError = ref(false)
+const showConfirm = ref(false)
+
+// Modal Content
+const successTitle = ref('')
+const successMessage = ref('')
+const errorTitle = ref('')
+const errorMessage = ref('')
+const confirmTitle = ref('')
+const confirmMessage = ref('')
+const confirmAction = ref(null)
+
+// Modal Functions
+const showSuccessModal = (title, message) => {
+  successTitle.value = title
+  successMessage.value = message
+  showSuccess.value = true
+}
+
+const showErrorModal = (title, message) => {
+  errorTitle.value = title
+  errorMessage.value = message
+  showError.value = true
+}
+
+const showConfirmModal = (title, message, action) => {
+  confirmTitle.value = title
+  confirmMessage.value = message
+  confirmAction.value = action
+  showConfirm.value = true
+}
+
+const closeSuccess = () => {
+  showSuccess.value = false
+}
+
+const closeError = () => {
+  showError.value = false
+}
+
+const closeConfirm = () => {
+  showConfirm.value = false
+  confirmAction.value = null
+}
+
+const executeConfirm = async () => {
+  showConfirm.value = false
+  if (confirmAction.value) {
+    await confirmAction.value()
+  }
+  confirmAction.value = null
+}
+
+// Expose functions globally
+provide('showSuccessModal', showSuccessModal)
+provide('showErrorModal', showErrorModal)
+provide('showConfirmModal', showConfirmModal)
+
+// Also expose on window for vanilla JS usage
+if (typeof window !== 'undefined') {
+  window.showSuccessModal = showSuccessModal
+  window.showErrorModal = showErrorModal
+  window.showConfirmModal = showConfirmModal
+}
+</script>

pages/cms/benutzer.vue

@@ -225,24 +225,20 @@ const approveUser = async (user) => {
 }
 
 const rejectUser = async (user) => {
-  if (!confirm(`Möchten Sie die Registrierung von ${user.name} wirklich ablehnen?`)) {
+  window.showConfirmModal('Registrierung ablehnen', `Möchten Sie die Registrierung von ${user.name} wirklich ablehnen?`, async () => {
-    return
+    try {
-  }
+      await $fetch('/api/cms/users/reject', {
+        method: 'POST',
+        body: { userId: user.id }
+      })
       
-  try {
+      await loadUsers()
-    await $fetch('/api/cms/users/reject', {
+      window.showSuccessModal('Erfolg', `Registrierung von ${user.name} wurde abgelehnt`)
-      method: 'POST',
+    } catch (error) {
-      body: { userId: user.id }
+      console.error('Fehler beim Ablehnen:', error)
-    })
+      window.showErrorModal('Fehler', 'Fehler beim Ablehnen der Registrierung')
-    
+    }
-    successMessage.value = `Registrierung von ${user.name} wurde abgelehnt`
+  })
-    setTimeout(() => successMessage.value = '', 3000)
-    
-    await loadUsers()
-  } catch (error) {
-    errorMessage.value = 'Fehler beim Ablehnen der Registrierung'
-    setTimeout(() => errorMessage.value = '', 3000)
-  }
 }
 
 const updateUserRole = async (user) => {
@@ -265,24 +261,20 @@ const updateUserRole = async (user) => {
 }
 
 const deactivateUser = async (user) => {
-  if (!confirm(`Möchten Sie ${user.name} wirklich deaktivieren?`)) {
+  window.showConfirmModal('Benutzer deaktivieren', `Möchten Sie ${user.name} wirklich deaktivieren?`, async () => {
-    return
+    try {
-  }
+      await $fetch('/api/cms/users/deactivate', {
+        method: 'POST',
+        body: { userId: user.id }
+      })
       
-  try {
+      await loadUsers()
-    await $fetch('/api/cms/users/deactivate', {
+      window.showSuccessModal('Erfolg', `Benutzer ${user.name} wurde deaktiviert`)
-      method: 'POST',
+    } catch (error) {
-      body: { userId: user.id }
+      console.error('Fehler beim Deaktivieren:', error)
-    })
+      window.showErrorModal('Fehler', 'Fehler beim Deaktivieren des Benutzers')
-    
+    }
-    successMessage.value = `Benutzer ${user.name} wurde deaktiviert`
+  })
-    setTimeout(() => successMessage.value = '', 3000)
-    
-    await loadUsers()
-  } catch (error) {
-    errorMessage.value = 'Fehler beim Deaktivieren des Benutzers'
-    setTimeout(() => errorMessage.value = '', 3000)
-  }
 }
 
 onMounted(async () => {

pages/cms/mitgliedschaftsantraege.vue

@@ -238,7 +238,7 @@ const loadApplications = async () => {
     applications.value = response
   } catch (error) {
     console.error('Fehler beim Laden der Anträge:', error)
-    alert('Fehler beim Laden der Anträge')
+    window.showErrorModal('Fehler', 'Fehler beim Laden der Anträge')
   } finally {
     loading.value = false
   }
@@ -257,35 +257,35 @@ const closeModal = () => {
 }
 
 const approveApplication = async (id) => {
-  if (confirm('Antrag genehmigen?')) {
+  window.showConfirmModal('Bestätigung erforderlich', 'Möchten Sie diesen Antrag wirklich genehmigen?', async () => {
     try {
       await $fetch('/api/membership/update-status', {
         method: 'PUT',
         body: { id, status: 'approved' }
       })
       await loadApplications()
-      alert('Antrag wurde genehmigt')
+      window.showSuccessModal('Erfolg', 'Antrag wurde erfolgreich genehmigt')
     } catch (error) {
       console.error('Fehler beim Genehmigen:', error)
-      alert('Fehler beim Genehmigen des Antrags')
+      window.showErrorModal('Fehler', 'Fehler beim Genehmigen des Antrags')
     }
-  }
+  })
 }
 
 const rejectApplication = async (id) => {
-  if (confirm('Antrag ablehnen?')) {
+  window.showConfirmModal('Bestätigung erforderlich', 'Möchten Sie diesen Antrag wirklich ablehnen?', async () => {
     try {
       await $fetch('/api/membership/update-status', {
         method: 'PUT',
         body: { id, status: 'rejected' }
       })
       await loadApplications()
-      alert('Antrag wurde abgelehnt')
+      window.showSuccessModal('Erfolg', 'Antrag wurde erfolgreich abgelehnt')
     } catch (error) {
       console.error('Fehler beim Ablehnen:', error)
-      alert('Fehler beim Ablehnen des Antrags')
+      window.showErrorModal('Fehler', 'Fehler beim Ablehnen des Antrags')
     }
-  }
+  })
 }
 
 const downloadPDF = async (id) => {
@@ -308,9 +308,11 @@ const downloadPDF = async (id) => {
     a.click()
     window.URL.revokeObjectURL(url)
     document.body.removeChild(a)
+    
+    window.showSuccessModal('Erfolg', 'PDF wurde erfolgreich heruntergeladen')
   } catch (error) {
     console.error('Fehler beim Herunterladen:', error)
-    alert('Fehler beim Herunterladen des PDFs')
+    window.showErrorModal('Fehler', 'Fehler beim Herunterladen des PDFs')
   }
 }
 

pages/cms/termine.vue

@@ -238,26 +238,26 @@ const saveTermin = async () => {
 }
 
 const confirmDelete = async (termin) => {
-  if (!confirm(`Möchten Sie den Termin "${termin.titel}" wirklich löschen?`)) {
+  window.showConfirmModal('Termin löschen', `Möchten Sie den Termin "${termin.titel}" wirklich löschen?`, async () => {
-    return
+    try {
-  }
+      const params = new URLSearchParams({
+        datum: termin.datum,
+        titel: termin.titel,
+        beschreibung: termin.beschreibung || '',
+        kategorie: termin.kategorie || 'Sonstiges'
+      })
       
-  try {
+      await $fetch(`/api/termine-manage?${params.toString()}`, {
-    const params = new URLSearchParams({
+        method: 'DELETE'
-      datum: termin.datum,
+      })
-      titel: termin.titel,
-      beschreibung: termin.beschreibung || '',
-      kategorie: termin.kategorie || 'Sonstiges'
-    })
 
-    await $fetch(`/api/termine-manage?${params.toString()}`, {
+      await loadTermine()
-      method: 'DELETE'
+      window.showSuccessModal('Erfolg', 'Termin wurde erfolgreich gelöscht')
-    })
+    } catch (error) {
-
+      console.error('Fehler beim Löschen:', error)
-    await loadTermine()
+      window.showErrorModal('Fehler', 'Fehler beim Löschen des Termins')
-  } catch (error) {
+    }
-    alert('Fehler beim Löschen des Termins.')
+  })
-  }
 }
 
 const formatDate = (dateString) => {

pages/mitgliederbereich/mitglieder.vue

@@ -407,20 +407,20 @@ const saveMember = async () => {
 }
 
 const confirmDelete = async (member) => {
-  if (!confirm(`Möchten Sie "${member.name}" wirklich löschen?`)) {
+  window.showConfirmModal('Mitglied löschen', `Möchten Sie "${member.name}" wirklich löschen?`, async () => {
-    return
+    try {
-  }
+      await $fetch('/api/members', {
+        method: 'DELETE',
+        body: { id: member.id }
+      })
 
-  try {
+      await loadMembers()
-    await $fetch('/api/members', {
+      window.showSuccessModal('Erfolg', 'Mitglied wurde erfolgreich gelöscht')
-      method: 'DELETE',
+    } catch (error) {
-      body: { id: member.id }
+      console.error('Fehler beim Löschen:', error)
-    })
+      window.showErrorModal('Fehler', 'Fehler beim Löschen des Mitglieds')
-
+    }
-    await loadMembers()
+  })
-  } catch (error) {
-    alert('Fehler beim Löschen des Mitglieds.')
-  }
 }
 
 const formatDate = (dateString) => {

pages/mitgliederbereich/news.vue

@@ -264,26 +264,25 @@ const confirmDelete = async (item) => {
   console.log('Delete item:', item)
   console.log('Delete item.id:', item.id)
   
-  if (!confirm(`Möchten Sie die News "${item.title}" wirklich löschen?`)) {
+  window.showConfirmModal('News löschen', `Möchten Sie die News "${item.title}" wirklich löschen?`, async () => {
-    return
+    if (!item.id) {
-  }
+      window.showErrorModal('Fehler', 'News-ID fehlt!')
+      return
+    }
 
-  if (!item.id) {
+    try {
-    alert('Fehler: News-ID fehlt!')
+      console.log('Deleting with ID:', item.id)
-    return
+      await $fetch(`/api/news?id=${encodeURIComponent(item.id)}`, {
-  }
+        method: 'DELETE'
+      })
 
-  try {
+      await loadNews()
-    console.log('Deleting with ID:', item.id)
+      window.showSuccessModal('Erfolg', 'News wurde erfolgreich gelöscht')
-    await $fetch(`/api/news?id=${encodeURIComponent(item.id)}`, {
+    } catch (error) {
-      method: 'DELETE'
+      console.error('Delete error:', error)
-    })
+      window.showErrorModal('Fehler', 'Fehler beim Löschen der News: ' + (error.data?.message || error.message))
-
+    }
-    await loadNews()
+  })
-  } catch (error) {
-    console.error('Delete error:', error)
-    alert('Fehler beim Löschen der News: ' + (error.data?.message || error.message))
-  }
 }
 
 const formatDate = (dateString) => {

pages/mitgliedschaft.vue

@@ -482,13 +482,14 @@ onMounted(() => {
         window.URL.revokeObjectURL(url)
         document.body.removeChild(a)
         
-        alert('Beitrittsformular erfolgreich erstellt und heruntergeladen!')
+        // Globale Modal-Funktionen verwenden
+        window.showSuccessModal('Beitrittsformular erfolgreich erstellt!', 'Das Formular wurde heruntergeladen und Ihre Daten wurden an den Vereinsvorstand weitergeleitet.')
       } else {
-        alert('Fehler beim Erstellen des Formulars: ' + (result.error || 'Unbekannter Fehler'))
+        window.showErrorModal('Fehler beim Erstellen des Formulars', result.error || 'Unbekannter Fehler')
       }
     } catch (error) {
       console.error('Fehler:', error)
-      alert('Fehler beim Senden des Formulars: ' + error.message)
+      window.showErrorModal('Fehler beim Senden des Formulars', error.message)
     } finally {
       submitBtn.disabled = false
       submitBtn.textContent = 'Beitrittsformular erstellen'

server/data/members.json

@@ -27,5 +27,16 @@
     "source": "membership_application",
     "applicationId": "1761225361334",
     "id": "c209cb36-3aca-4ab2-b463-061e41f97d6d"
+  },
+  {
+    "firstName": "Final",
+    "lastName": "Test",
+    "email": "final@test.de",
+    "phone": "",
+    "address": "Finalstr 1, 60437 Frankfurt",
+    "notes": "Mitgliedschaftsart: aktiv | Genehmigt: 23.10.2025",
+    "source": "membership_application",
+    "applicationId": "1761225630365",
+    "id": "952c3d3f-c73a-43ed-ae21-76387948c030"
   }
 ]

server/data/membership-applications/1761225630365.json

@@ -1,11 +1,12 @@
 {
   "id": "1761225630365",
   "timestamp": "2025-10-23T13:20:30.435Z",
-  "status": "pending",
+  "status": "approved",
   "metadata": {
     "mitgliedschaftsart": "aktiv",
     "isVolljaehrig": true,
     "pdfGenerated": true
   },
-  "encryptedData": "7/HlHstjzGZ1wJtrtCxa7B3gfqBxm19LkzNAItSM9rMGDvRoiQNrHIpxdlUSTOTkeYwfW3cvKhrBsXHZxU4P64HdFzVdK255kgN1Yqy2ZqS6oZ6mp8xwHVIUypfbwEZI22gWbxue9Y+29rn9VYSBuKjtZd2pi/8Qjohps4wchzXdP5fiRJxx3vwDHPQ08i+qAcxatIwYLt4Iu46pFSAEQkUhDbdki7OWgzeU4YW8L9UufPMMv01m2rG48GnnM/GglIkz2VchqQsNqsDmm35OUmg6LoETGs6TSgBiLr0LV+ZFO29D9W7WIP+hZDVmhfii8PNcAGvvKpJvpJSbNeswaSF4zV7k3+gxkcGZBy+hG+ta3pXhzzuaGqQUvyg+jx5YkMTVRh0kcQlmNME8/7UW5vrC+Qe/pU5K2t0URwxxHTYnLyTk0FLMrs6nCtaSSoDC+t26j8GarAGGF9AvKDaVxkFq4B9B0uw6mQPhETX8IeAynihKkk/ZMzIXB0LaO+hxW2YEKrKfFMSAVcFrVOjVJtz4k+5ZTRlKnjkunl2P45h+Fjt69OQNffg2F0Fa1Or9nrPOrbake7g+NEtAgohdQd7qddvpSBfJC3vDQv5TG2CONFIoSBHnpR3io7uuiI6Ct/mu/LBLfDa9d0/TjkOWdDVYnb+V+beh/At+oMUGKI8="
+  "encryptedData": "7/HlHstjzGZ1wJtrtCxa7B3gfqBxm19LkzNAItSM9rMGDvRoiQNrHIpxdlUSTOTkeYwfW3cvKhrBsXHZxU4P64HdFzVdK255kgN1Yqy2ZqS6oZ6mp8xwHVIUypfbwEZI22gWbxue9Y+29rn9VYSBuKjtZd2pi/8Qjohps4wchzXdP5fiRJxx3vwDHPQ08i+qAcxatIwYLt4Iu46pFSAEQkUhDbdki7OWgzeU4YW8L9UufPMMv01m2rG48GnnM/GglIkz2VchqQsNqsDmm35OUmg6LoETGs6TSgBiLr0LV+ZFO29D9W7WIP+hZDVmhfii8PNcAGvvKpJvpJSbNeswaSF4zV7k3+gxkcGZBy+hG+ta3pXhzzuaGqQUvyg+jx5YkMTVRh0kcQlmNME8/7UW5vrC+Qe/pU5K2t0URwxxHTYnLyTk0FLMrs6nCtaSSoDC+t26j8GarAGGF9AvKDaVxkFq4B9B0uw6mQPhETX8IeAynihKkk/ZMzIXB0LaO+hxW2YEKrKfFMSAVcFrVOjVJtz4k+5ZTRlKnjkunl2P45h+Fjt69OQNffg2F0Fa1Or9nrPOrbake7g+NEtAgohdQd7qddvpSBfJC3vDQv5TG2CONFIoSBHnpR3io7uuiI6Ct/mu/LBLfDa9d0/TjkOWdDVYnb+V+beh/At+oMUGKI8=",
+  "updatedAt": "2025-10-23T13:23:26.963Z"
 }

server/data/membership-applications/1761225852269.json

@@ -0,0 +1,17 @@
+{
+  "id": "1761225852269",
+  "timestamp": "2025-10-23T13:24:12.319Z",
+  "status": "pending",
+  "metadata": {
+    "mitgliedschaftsart": "aktiv",
+    "isVolljaehrig": true,
+    "pdfGenerated": true
+  },
+  "personalData": {
+    "nachname": "A",
+    "vorname": "B",
+    "email": "tsschulz@gmx.net",
+    "telefon_privat": "01795094148",
+    "telefon_mobil": "0179 5094148"
+  }
+}

server/data/membership-applications/1761225990109.json

@@ -0,0 +1,15 @@
+{
+  "id": "1761225990109",
+  "timestamp": "2025-10-23T13:26:30.166Z",
+  "status": "pending",
+  "metadata": {
+    "mitgliedschaftsart": "aktiv",
+    "isVolljaehrig": true,
+    "pdfGenerated": true
+  },
+  "personalData": {
+    "nachname": "Test",
+    "vorname": "Modal",
+    "email": "modal@test.de"
+  }
+}

server/data/membership-applications/1761226071296.json

@@ -0,0 +1,15 @@
+{
+  "id": "1761226071296",
+  "timestamp": "2025-10-23T13:27:51.339Z",
+  "status": "pending",
+  "metadata": {
+    "mitgliedschaftsart": "aktiv",
+    "isVolljaehrig": true,
+    "pdfGenerated": true
+  },
+  "personalData": {
+    "nachname": "Modal",
+    "vorname": "Global",
+    "email": "global@modal.de"
+  }
+}