Update package-lock.json and package.json to include 'globals' dependency and improve code formatting in various components for better readability.

pages/cms/benutzer.vue

@@ -17,9 +17,15 @@
       </div>
 
       <!-- Pending Users -->
-      <div v-if="pendingUsers.length > 0" class="mb-8">
+      <div
+        v-if="pendingUsers.length > 0"
+        class="mb-8"
+      >
         <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
-          <AlertCircle :size="24" class="inline text-yellow-600 mr-2" />
+          <AlertCircle
+            :size="24"
+            class="inline text-yellow-600 mr-2"
+          />
           Wartende Registrierungen ({{ pendingUsers.length }})
         </h2>
         <div class="space-y-4">
@@ -30,9 +36,18 @@
           >
             <div class="flex items-start justify-between">
               <div class="flex-1">
-                <h3 class="text-lg font-semibold text-gray-900">{{ user.name }}</h3>
-                <p class="text-sm text-gray-600 mt-1">{{ user.email }}</p>
-                <p v-if="user.phone" class="text-sm text-gray-600">{{ user.phone }}</p>
+                <h3 class="text-lg font-semibold text-gray-900">
+                  {{ user.name }}
+                </h3>
+                <p class="text-sm text-gray-600 mt-1">
+                  {{ user.email }}
+                </p>
+                <p
+                  v-if="user.phone"
+                  class="text-sm text-gray-600"
+                >
+                  {{ user.phone }}
+                </p>
                 <p class="text-xs text-gray-500 mt-2">
                   Registriert am: {{ formatDate(user.created) }}
                 </p>
@@ -43,27 +58,41 @@
                   v-model="user.selectedRole"
                   class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-600"
                 >
-                  <option value="mitglied">Mitglied</option>
-                  <option value="vorstand">Vorstand</option>
-                  <option value="admin">Administrator</option>
-                  <option value="newsletter">Newsletter</option>
+                  <option value="mitglied">
+                    Mitglied
+                  </option>
+                  <option value="vorstand">
+                    Vorstand
+                  </option>
+                  <option value="admin">
+                    Administrator
+                  </option>
+                  <option value="newsletter">
+                    Newsletter
+                  </option>
                 </select>
                 
                 <!-- Approve Button -->
                 <button
-                  @click="approveUser(user)"
                   class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition-colors flex items-center justify-center"
+                  @click="approveUser(user)"
                 >
-                  <Check :size="16" class="mr-1" />
+                  <Check
+                    :size="16"
+                    class="mr-1"
+                  />
                   Freischalten
                 </button>
                 
                 <!-- Reject Button -->
                 <button
-                  @click="rejectUser(user)"
                   class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg transition-colors flex items-center justify-center"
+                  @click="rejectUser(user)"
                 >
-                  <X :size="16" class="mr-1" />
+                  <X
+                    :size="16"
+                    class="mr-1"
+                  />
                   Ablehnen
                 </button>
               </div>
@@ -102,15 +131,25 @@
               </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
-              <tr v-for="user in activeUsers" :key="user.id" class="hover:bg-gray-50">
+              <tr
+                v-for="user in activeUsers"
+                :key="user.id"
+                class="hover:bg-gray-50"
+              >
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm font-medium text-gray-900">{{ user.name }}</div>
+                  <div class="text-sm font-medium text-gray-900">
+                    {{ user.name }}
+                  </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-600">{{ user.email }}</div>
+                  <div class="text-sm text-gray-600">
+                    {{ user.email }}
+                  </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-600">{{ user.phone || '-' }}</div>
+                  <div class="text-sm text-gray-600">
+                    {{ user.phone || '-' }}
+                  </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex flex-wrap gap-1">
@@ -129,8 +168,8 @@
                     </span>
                   </div>
                   <button
-                    @click="openRoleModal(user)"
                     class="mt-1 text-xs text-primary-600 hover:text-primary-800"
+                    @click="openRoleModal(user)"
                   >
                     Bearbeiten
                   </button>
@@ -143,12 +182,15 @@
                 <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                   <button
                     v-if="user.id !== currentUserId"
-                    @click="deactivateUser(user)"
                     class="text-red-600 hover:text-red-800 font-medium"
+                    @click="deactivateUser(user)"
                   >
                     Deaktivieren
                   </button>
-                  <span v-else class="text-gray-400">Eigenes Konto</span>
+                  <span
+                    v-else
+                    class="text-gray-400"
+                  >Eigenes Konto</span>
                 </td>
               </tr>
             </tbody>
@@ -157,15 +199,27 @@
       </div>
 
       <!-- Success/Error Messages -->
-      <div v-if="successMessage" class="fixed bottom-20 right-4 bg-green-50 border border-green-200 rounded-lg p-4 shadow-lg">
+      <div
+        v-if="successMessage"
+        class="fixed bottom-20 right-4 bg-green-50 border border-green-200 rounded-lg p-4 shadow-lg"
+      >
         <p class="text-sm text-green-800 flex items-center">
-          <Check :size="18" class="mr-2" />
+          <Check
+            :size="18"
+            class="mr-2"
+          />
           {{ successMessage }}
         </p>
       </div>
-      <div v-if="errorMessage" class="fixed bottom-20 right-4 bg-red-50 border border-red-200 rounded-lg p-4 shadow-lg">
+      <div
+        v-if="errorMessage"
+        class="fixed bottom-20 right-4 bg-red-50 border border-red-200 rounded-lg p-4 shadow-lg"
+      >
         <p class="text-sm text-red-800 flex items-center">
-          <AlertCircle :size="18" class="mr-2" />
+          <AlertCircle
+            :size="18"
+            class="mr-2"
+          />
           {{ errorMessage }}
         </p>
       </div>
@@ -185,58 +239,61 @@
         <div class="space-y-3 mb-6">
           <label class="flex items-center">
             <input
-              type="checkbox"
               v-model="selectedRoles"
+              type="checkbox"
               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"
+              type="checkbox"
               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"
+              type="checkbox"
               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"
+              type="checkbox"
               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">
+        <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"
+            @click="closeRoleModal"
           >
             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"
+            @click="saveUserRoles"
           >
             Speichern
           </button>