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/cms/benutzer.vue

@@ -46,6 +46,7 @@
                   <option value="mitglied">Mitglied</option>
                   <option value="vorstand">Vorstand</option>
                   <option value="admin">Administrator</option>
+                  <option value="newsletter">Newsletter</option>
                 </select>
                 
                 <!-- Approve Button -->
@@ -112,20 +113,27 @@
                   <div class="text-sm text-gray-600">{{ user.phone || '-' }}</div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <select
-                    v-model="user.role"
-                    @change="updateUserRole(user)"
-                    class="px-3 py-1 border border-gray-300 rounded text-sm"
-                    :class="{
-                      'bg-red-50 border-red-300': user.role === 'admin',
-                      'bg-blue-50 border-blue-300': user.role === 'vorstand',
-                      'bg-gray-50 border-gray-300': user.role === 'mitglied'
-                    }"
+                  <div class="flex flex-wrap gap-1">
+                    <span
+                      v-for="role in (user.roles || (user.role ? [user.role] : ['mitglied']))"
+                      :key="role"
+                      class="px-2 py-1 text-xs font-medium rounded"
+                      :class="{
+                        'bg-red-100 text-red-800': role === 'admin',
+                        'bg-blue-100 text-blue-800': role === 'vorstand',
+                        'bg-green-100 text-green-800': role === 'newsletter',
+                        'bg-gray-100 text-gray-800': role === 'mitglied'
+                      }"
+                    >
+                      {{ role === 'admin' ? 'Admin' : role === 'vorstand' ? 'Vorstand' : role === 'newsletter' ? 'Newsletter' : 'Mitglied' }}
+                    </span>
+                  </div>
+                  <button
+                    @click="openRoleModal(user)"
+                    class="mt-1 text-xs text-primary-600 hover:text-primary-800"
                   >
-                    <option value="mitglied">Mitglied</option>
-                    <option value="vorstand">Vorstand</option>
-                    <option value="admin">Administrator</option>
-                  </select>
+                    Bearbeiten
+                  </button>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="text-sm text-gray-600">
@@ -162,6 +170,79 @@
         </p>
       </div>
     </div>
+
+    <!-- Role Edit Modal -->
+    <div
+      v-if="showRoleModal && editingUser"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+      @click.self="closeRoleModal"
+    >
+      <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
+        <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
+          Rollen bearbeiten: {{ editingUser.name }}
+        </h2>
+
+        <div class="space-y-3 mb-6">
+          <label class="flex items-center">
+            <input
+              type="checkbox"
+              v-model="selectedRoles"
+              value="mitglied"
+              class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
+            />
+            <span class="ml-2 text-sm text-gray-700">Mitglied</span>
+          </label>
+          <label class="flex items-center">
+            <input
+              type="checkbox"
+              v-model="selectedRoles"
+              value="vorstand"
+              class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
+            />
+            <span class="ml-2 text-sm text-gray-700">Vorstand</span>
+          </label>
+          <label class="flex items-center">
+            <input
+              type="checkbox"
+              v-model="selectedRoles"
+              value="newsletter"
+              class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
+            />
+            <span class="ml-2 text-sm text-gray-700">Newsletter</span>
+          </label>
+          <label class="flex items-center">
+            <input
+              type="checkbox"
+              v-model="selectedRoles"
+              value="admin"
+              class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
+            />
+            <span class="ml-2 text-sm text-gray-700">Administrator</span>
+          </label>
+        </div>
+
+        <div v-if="selectedRoles.length === 0" class="mb-4 text-sm text-red-600">
+          Mindestens eine Rolle muss ausgewählt werden.
+        </div>
+
+        <div class="flex justify-end space-x-3">
+          <button
+            type="button"
+            @click="closeRoleModal"
+            class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            @click="saveUserRoles"
+            :disabled="selectedRoles.length === 0"
+            class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Speichern
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -173,11 +254,17 @@ const allUsers = ref([])
 const currentUserId = ref(null)
 const successMessage = ref('')
 const errorMessage = ref('')
+const showRoleModal = ref(false)
+const editingUser = ref(null)
+const selectedRoles = ref([])
 
 const pendingUsers = computed(() => {
   return allUsers.value
     .filter(u => u.active === false)
-    .map(u => ({ ...u, selectedRole: u.role || 'mitglied' }))
+    .map(u => ({ 
+      ...u, 
+      selectedRole: (u.roles && u.roles.length > 0) ? u.roles[0] : (u.role || 'mitglied')
+    }))
 })
 
 const activeUsers = computed(() => {
@@ -210,7 +297,7 @@ const approveUser = async (user) => {
       method: 'POST',
       body: {
         userId: user.id,
-        role: user.selectedRole
+        roles: [user.selectedRole || 'mitglied']
       }
     })
     
@@ -224,6 +311,41 @@ const approveUser = async (user) => {
   }
 }
 
+function openRoleModal(user) {
+  editingUser.value = user
+  selectedRoles.value = user.roles || (user.role ? [user.role] : ['mitglied'])
+  showRoleModal.value = true
+}
+
+function closeRoleModal() {
+  showRoleModal.value = false
+  editingUser.value = null
+  selectedRoles.value = []
+}
+
+async function saveUserRoles() {
+  if (!editingUser.value || selectedRoles.value.length === 0) return
+
+  try {
+    await $fetch('/api/cms/users/update-role', {
+      method: 'POST',
+      body: {
+        userId: editingUser.value.id,
+        roles: selectedRoles.value
+      }
+    })
+    
+    successMessage.value = `Rollen von ${editingUser.value.name} wurden aktualisiert`
+    setTimeout(() => successMessage.value = '', 3000)
+    
+    closeRoleModal()
+    await loadUsers()
+  } catch (error) {
+    errorMessage.value = 'Fehler beim Aktualisieren der Rollen'
+    setTimeout(() => errorMessage.value = '', 3000)
+  }
+}
+
 const rejectUser = async (user) => {
   window.showConfirmModal('Registrierung ablehnen', `Möchten Sie die Registrierung von ${user.name} wirklich ablehnen?`, async () => {
     try {
@@ -241,24 +363,6 @@ const rejectUser = async (user) => {
   })
 }
 
-const updateUserRole = async (user) => {
-  try {
-    await $fetch('/api/cms/users/update-role', {
-      method: 'POST',
-      body: {
-        userId: user.id,
-        role: user.role
-      }
-    })
-    
-    successMessage.value = `Rolle von ${user.name} wurde aktualisiert`
-    setTimeout(() => successMessage.value = '', 3000)
-  } catch (error) {
-    errorMessage.value = 'Fehler beim Aktualisieren der Rolle'
-    setTimeout(() => errorMessage.value = '', 3000)
-    await loadUsers() // Reload to revert changes
-  }
-}
 
 const deactivateUser = async (user) => {
   window.showConfirmModal('Benutzer deaktivieren', `Möchten Sie ${user.name} wirklich deaktivieren?`, async () => {