Correction of the filter naming in the upload_admin.html and edit_library.html

Web/app.py

@@ -3203,6 +3203,8 @@ def home_admin():
         flash('Ihnen ist es nicht gestattet auf dieser Internetanwendung, die eben besuchte Adrrese zu nutzen, versuchen sie es erneut nach dem sie sich mit einem berechtigten Nutzer angemeldet haben!', 'error')
         return redirect(url_for('library_view'))
 
+    filter_names = it.get_filter_names()
+
     return render_template(
         'main_admin.html',
         username=session['username'],
@@ -3212,6 +3214,7 @@ def home_admin():
         student_default_borrow_days=cfg.STUDENT_DEFAULT_BORROW_DAYS,
         student_max_borrow_days=cfg.STUDENT_MAX_BORROW_DAYS,
         school_info=_get_school_info_for_export(),
+        filter_names=filter_names,
         open_item=request.args.get('open_item')
     )
 
@@ -4707,12 +4710,15 @@ def upload_admin():
     if not _action_access_allowed(permissions, 'can_insert'):
         flash('Ihnen ist es nicht gestattet auf dieser Internetanwendung, die eben besuchte Adrrese zu nutzen, versuchen sie es erneut nach dem sie sich mit einem berechtigten Nutzer angemeldet haben!', 'error')
         return redirect(url_for('login'))
-    
+
+    filter_names = it.get_filter_names()
+
     return render_template(
         'upload_admin.html',
         username=session['username'],
         library_module_enabled=cfg.MODULES.is_enabled('library'),
         student_cards_module_enabled=cfg.MODULES.is_enabled('student_cards'),
+        filter_names=filter_names,
         show_library_features=False,
         upload_mode='item',
         page_title='Artikel hochladen',
@@ -7005,12 +7011,15 @@ def item_edit(id):
 
         current_item['IndividualCodes'] = '\n'.join(individual_codes)
 
+        filter_names = it.get_filter_names()
+
         return render_template(
             'edit_library.html',
             username=session['username'],
             item=current_item,
             show_library_features=show_library_features,
             library_module_enabled=library_module_active,
+            filter_names=filter_names,
             page_title=f"Bearbeiten: {current_item.get('Name', '')}"
         )
 

Web/modules/database/items.py

@@ -911,9 +911,9 @@ def get_filter_names():
     if names_doc and 'names' in names_doc:
         return names_doc['names']
     return {
-        '1': 'Fach/Kategorie',
-        '2': 'System/Bereich',
-        '3': 'Typ/Art'
+        '1': 'Jahrgangsstufe',
+        '2': 'Fachgebiet',
+        '3': 'Schlagwort'
     }
 
 def set_filter_name(filter_num, name):

Web/templates/admin_school_settings.html

@@ -78,15 +78,15 @@
                     <div class="form-row">
                         <div class="form-group">
                             <label for="filter_name_1">Name Filter 1</label>
-                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Fach/Kategorie') }}" placeholder="z. B. Fach/Kategorie">
+                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Klassenstufe') }}" placeholder="z. B. Klassenstufe">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_2">Name Filter 2</label>
-                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'System/Bereich') }}" placeholder="z. B. System/Bereich">
+                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'Fach') }}" placeholder="z. B. Fach">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_3">Name Filter 3</label>
-                            <input type="text" id="filter_name_3" name="filter_name_3" value="{{ filter_names.get('3', 'Typ/Art') }}" placeholder="z. B. Typ/Art">
+                            <input type="text" id="filter_name_3" name="filter_name_3" value="{{ filter_names.get('3', 'Schlagwort') }}" placeholder="z. B. Schlagwort">
                         </div>
                     </div>
 

Web/templates/edit_library.html

@@ -274,7 +274,7 @@
             {% if not show_library_features %}
             <!-- ================= SYSTEM FILTERS 1-3 (INVENTORY / OTHER ITEMS ONLY) ================= -->
             <div class="filter-inputs">
-                <h3>Unterrichtsfach (Filter 1):</h3>
+                <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">
@@ -286,7 +286,7 @@
                     {% endfor %}
                 </div>
 
-                <h3>Jahrgangsstufe (Filter 2):</h3>
+                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">
@@ -298,7 +298,7 @@
                     {% endfor %}
                 </div>
 
-                <h3>Schlagwort (Filter 3):</h3>
+                <h3>{{ filter_names.get('3', 'Schlagwort') }}</h3>
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">

Web/templates/library_borrowings_admin.html

@@ -122,7 +122,7 @@
     letter-spacing: 0.04em;
     color: #64748b;
     background: var(--ui-surface-soft);
-    user-select: none; /* Verhindert Textmarkierung beim Klicken */
+    user-select: none;
   }
 
   .library-table tr:hover td {
@@ -151,7 +151,7 @@
   .badge-open { background: #fee2e2; color: #991b1b; }
   .badge-paid { background: #dcfce7; color: #166534; }
   .badge-damaged { background: #fee2e2; color: #991b1b; }
-  .badge-class { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; } /* Neues Badge für Klasse */
+  .badge-class { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
 
   .row-actions {
     display: flex;
@@ -168,6 +168,32 @@
     white-space: nowrap;
   }
 
+  .row-actions .btn-outline-danger {
+    color: #dc2626;
+    background-color: #fef2f2; /* Light red tint so it doesn't blend into the white table */
+    border: 2px solid #dc2626; /* Thicker, clear border */
+    padding: 6px 14px;
+    border-radius: 6px;
+    font-weight: bold;
+    font-size: 0.85rem;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1); /* Subtle shadow for depth */
+    transition: all 0.2s ease;
+  }
+
+  .row-actions .btn-outline-danger:hover {
+    background-color: #dc2626;
+    color: #ffffff;
+    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.25);
+    transform: translateY(-1px); /* Slight lift effect on hover */
+  }
+
+  .row-actions .btn-outline-danger:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.15); /* Pressed state */
+  }
+  /* ------------------------------------------------------ */
+
   .muted {
     color: #6b7280;
     font-size: 0.92rem;

Web/templates/library_table.html

@@ -614,6 +614,199 @@
 </div>
 <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script>
+
+    // =========================================================================
+    // CUSTOM MODAL HELPERS (Replaces native browser alert, confirm & prompt)
+    // =========================================================================
+    function createModalOverlay() {
+        const overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100vw';
+        overlay.style.height = '100vh';
+        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
+        overlay.style.display = 'flex';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+        overlay.style.zIndex = '999999';
+        return overlay;
+    }
+
+    function createModalBox() {
+        const box = document.createElement('div');
+        box.style.backgroundColor = '#fff';
+        box.style.padding = '24px';
+        box.style.borderRadius = '8px';
+        box.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
+        box.style.fontFamily = 'sans-serif';
+        box.style.minWidth = '320px';
+        box.style.maxWidth = '90%';
+        box.style.textAlign = 'left';
+        box.style.color = '#333';
+        return box;
+    }
+
+    function customAlert(message) {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '20px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+
+            const btn = document.createElement('button');
+            btn.textContent = 'OK';
+            btn.style.padding = '8px 16px';
+            btn.style.cursor = 'pointer';
+            btn.style.border = 'none';
+            btn.style.backgroundColor = '#007bff';
+            btn.style.color = '#fff';
+            btn.style.borderRadius = '4px';
+
+            btn.onclick = () => {
+                document.body.removeChild(overlay);
+                resolve();
+            };
+
+            btnContainer.appendChild(btn);
+            box.appendChild(text);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+            btn.focus();
+        });
+    }
+
+    function customConfirm(message) {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '20px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+            btnContainer.style.gap = '10px';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.textContent = 'Abbrechen';
+            cancelBtn.style.padding = '8px 16px';
+            cancelBtn.style.cursor = 'pointer';
+            cancelBtn.style.border = '1px solid #ccc';
+            cancelBtn.style.backgroundColor = '#f8f9fa';
+            cancelBtn.style.color = '#333';
+            cancelBtn.style.borderRadius = '4px';
+
+            const okBtn = document.createElement('button');
+            okBtn.textContent = 'OK';
+            okBtn.style.padding = '8px 16px';
+            okBtn.style.cursor = 'pointer';
+            okBtn.style.border = 'none';
+            okBtn.style.backgroundColor = '#007bff';
+            okBtn.style.color = '#fff';
+            okBtn.style.borderRadius = '4px';
+
+            const closeAndResolve = (val) => {
+                document.body.removeChild(overlay);
+                resolve(val);
+            };
+
+            cancelBtn.onclick = () => closeAndResolve(false);
+            okBtn.onclick = () => closeAndResolve(true);
+
+            btnContainer.appendChild(cancelBtn);
+            btnContainer.appendChild(okBtn);
+            box.appendChild(text);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+            okBtn.focus();
+        });
+    }
+
+    function customPrompt(message, defaultValue = '') {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '15px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.value = defaultValue;
+            input.style.width = '100%';
+            input.style.marginBottom = '20px';
+            input.style.padding = '10px';
+            input.style.boxSizing = 'border-box';
+            input.style.border = '1px solid #ccc';
+            input.style.borderRadius = '4px';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+            btnContainer.style.gap = '10px';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.textContent = 'Abbrechen';
+            cancelBtn.style.padding = '8px 16px';
+            cancelBtn.style.cursor = 'pointer';
+            cancelBtn.style.border = '1px solid #ccc';
+            cancelBtn.style.backgroundColor = '#f8f9fa';
+            cancelBtn.style.color = '#333';
+            cancelBtn.style.borderRadius = '4px';
+
+            const okBtn = document.createElement('button');
+            okBtn.textContent = 'OK';
+            okBtn.style.padding = '8px 16px';
+            okBtn.style.cursor = 'pointer';
+            okBtn.style.border = 'none';
+            okBtn.style.backgroundColor = '#007bff';
+            okBtn.style.color = '#fff';
+            okBtn.style.borderRadius = '4px';
+
+            const closeAndResolve = (val) => {
+                document.body.removeChild(overlay);
+                resolve(val);
+            };
+
+            cancelBtn.onclick = () => closeAndResolve(null);
+            okBtn.onclick = () => closeAndResolve(input.value);
+
+            input.onkeydown = (e) => {
+                if (e.key === 'Enter') closeAndResolve(input.value);
+                if (e.key === 'Escape') closeAndResolve(null);
+            };
+
+            btnContainer.appendChild(cancelBtn);
+            btnContainer.appendChild(okBtn);
+
+            box.appendChild(text);
+            box.appendChild(input);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+
+            input.focus();
+            input.select();
+        });
+    }
     // =========================================================================
     // 1. GLOBAL STATE DEFINITIONS
     // =========================================================================
@@ -884,7 +1077,7 @@
                     name: "Live",
                     type: "LiveStream",
                     // This MUST match the inner div where the video should appear
-                    target: document.querySelector('.library-scan-reader'), 
+                    target: document.querySelector('.library-scan-reader'),
                     constraints: {
                         width: 640,
                         height: 480,
@@ -897,7 +1090,7 @@
                 },
                 decoder: {
                     // Keep only the barcode types you actually use to improve performance
-                    readers: ["code_128_reader", "ean_reader", "code_39_reader"] 
+                    readers: ["code_128_reader", "ean_reader", "code_39_reader"]
                 },
                 locate: true
             }, function(err) {
@@ -1243,31 +1436,39 @@
     // =========================================================================
     // 4. UI INTERACTIONS & UTILITIES
     // =========================================================================
-    function borrowItem(itemId) {
+    async function borrowItem(itemId) {
         const selectedItem = (libraryItems || []).find(item => item._id === itemId);
         if (selectedItem && selectedItem.LibraryDisplayStatus === 'damaged') {
-            alert('Dieses Medium ist als defekt/zerstört markiert und kann nicht ausgeliehen werden.');
+            await customAlert('Dieses Medium ist als defekt/zerstört markiert und kann nicht ausgeliehen werden.');
             return;
         }
 
         const defaultCardId = activeStudentCardId || '';
-        const cardId = (window.prompt('Bitte Bibliotheksausweis-ID eingeben:', defaultCardId) || '').trim().toUpperCase();
+        const promptCardResult = await customPrompt('Bitte Bibliotheksausweis-ID eingeben:', defaultCardId);
+        if (promptCardResult === null) return;
+
+        const cardId = promptCardResult.trim().toUpperCase();
         if (!cardId) {
-            alert('Ausleihe abgebrochen: Für Bibliotheksmedien ist eine gültige Bibliotheksausweis-ID erforderlich.');
+            await customAlert('Ausleihe abgebrochen: Für Bibliotheksmedien ist eine gültige Bibliotheksausweis-ID erforderlich.');
             return;
         }
 
         setActiveStudentCard(cardId);
 
-        const durationInput = (window.prompt('Ausleihdauer in Tagen (optional):') || '').trim();
+        const promptDurationResult = await customPrompt('Ausleihdauer in Tagen (optional):');
+        if (promptDurationResult === null) return;
+        const durationInput = promptDurationResult.trim();
+
         const maxAvailable = Math.max(1, parseInt(selectedItem?.AvailableGroupedCount || selectedItem?.Quantity || 1, 10) || 1);
-        const countPrompt = (window.prompt(`Anzahl ausleihen? (Standard: 1, verfügbar: ${maxAvailable})`, '1') || '').trim();
-        let borrowCount = parseInt(countPrompt || '1', 10);
+        const countPromptResult = await customPrompt(`Anzahl ausleihen? (Standard: 1, verfügbar: ${maxAvailable})`, '1');
+        if (countPromptResult === null) return;
+
+        let borrowCount = parseInt(countPromptResult.trim() || '1', 10);
         if (!Number.isFinite(borrowCount) || borrowCount < 1) {
             borrowCount = 1;
         }
         if (borrowCount > maxAvailable) {
-            alert(`Es sind nur ${maxAvailable} Exemplar(e) verfügbar.`);
+            await customAlert(`Es sind nur ${maxAvailable} Exemplar(e) verfügbar.`);
             return;
         }
 

Web/templates/main_admin.html

@@ -2343,7 +2343,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div class="filter-container">
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Unterrichtsfach:</label>
+                    <label>{{ filter_names.get('2', 'Fach') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter1-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(1)">Clear</button>
                 </div>
@@ -2357,7 +2357,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Jahrgangsstufe:</label>
+                    <label>{{ filter_names.get('1', 'Klassenstufe') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter2-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(2)">Clear</button>
                 </div>
@@ -2371,7 +2371,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Schlagwort:</label>
+                    <label>{{ filter_names.get('3', 'Schlagwort') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter3-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(3)">Clear</button>
                 </div>
@@ -2420,9 +2420,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
             <span>Name</span>
             <span>Ort</span>
-            <span>Unterrichtsfach</span>
-            <span>Jahrgangsstufe</span>
-            <span>Schlagwort</span>
+            <span>{{ filter_names.get('2', 'Fach') }}</span>
+            <span>{{ filter_names.get('1', 'Jahrgangsstufe') }}</span>
+            <span>{{ filter_names.get('3', 'Schlagwort') }}</span>
             <span>Barcode</span>
             <span>Anzahl</span>
         </div>

Web/templates/manage_filters.html

@@ -19,7 +19,7 @@
         <div class="col-md-4">
             <div class="card mb-4">
                 <div class="card-header">
-                    <h2 class="card-title h5 mb-0">{{ filter_names.get('1', 'Jahrgang') }} (Filter 1)</h2>
+                    <h2 class="card-title h5 mb-0">{{ filter_names.get('1', 'Jahrgangsstufe') }} (Filter 1)</h2>
                 </div>
                 <div class="card-body">
                     <form method="POST" action="{{ url_for('add_filter_value', filter_num=1) }}" class="mb-4">
@@ -67,7 +67,7 @@
         <div class="col-md-4">
             <div class="card mb-4">
                 <div class="card-header">
-                    <h2 class="card-title h5 mb-0">{{ filter_names.get('2', 'Fach') }} (Filter 2)</h2>
+                    <h2 class="card-title h5 mb-0">{{ filter_names.get('2', 'Fachgebiet') }} (Filter 2)</h2>
                 </div>
                 <div class="card-body">
                     <form method="POST" action="{{ url_for('add_filter_value', filter_num=2) }}" class="mb-4">

Web/templates/upload_admin.html

@@ -781,7 +781,7 @@
             {% else %}
             <!-- Normal Item Mode: Standard Filters -->
             <div class="filter-inputs">
-                <h3>Unterrichtsfach:</h3>
+                <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter1-1">Wert 1:</label>
@@ -813,7 +813,7 @@
                     </div>
                 </div>
                 
-                <h3>Jahrgangsstufe:</h3>
+                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter2-1">Wert 1:</label>
@@ -845,7 +845,7 @@
                     </div>
                 </div>
                 
-                <h3>Schlagwort:</h3>
+                <h3>{{ filter_names.get('3', 'Schlagwort') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter3-1">Wert 1:</label>

Web/templates/user_del.html

@@ -85,6 +85,7 @@
                         <td>{{ permission_presets.get(user.permission_preset, {}).get('label', user.permission_preset) }}</td>
                         <td class="actions">
                             <form method="POST" action="{{ url_for('delete_user') }}" class="d-inline">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                 <input type="hidden" name="username" value="{{ user.username }}">
                                 <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Sind Sie sicher, dass Sie den Benutzer {{ user.username }} löschen möchten?')">
                                     Löschen
@@ -127,6 +128,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_update_user_permissions') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body permissions-modal-body">
                     <input type="hidden" id="perm-username" name="username">
                     <div class="mb-3">
@@ -183,6 +185,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_update_user_name') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body">
                     <input type="hidden" id="edit-username" name="username">
                     <div class="mb-3">
@@ -216,6 +219,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_reset_user_password') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body">
                     <input type="hidden" id="reset-username" name="username">
                     <div class="mb-3">
@@ -328,7 +332,6 @@
             if (row.style.display !== 'none') {
                 var cells = row.querySelectorAll('td');
                 if (cells.length > 0) {
-                    // Der Benutzername ist in der ersten Spalte (Index 0)
                     visibleUsernames.push(cells[0].textContent.trim());
                 }
             }
@@ -339,19 +342,26 @@
             return;
         }
 
-        // Dynamisches Formular erstellen, um die gefilterten Daten per POST ans Backend zu senden
+        // Dynamisches Formular erstellen
         var form = document.createElement('form');
         form.method = 'POST';
-        form.action = "{{ url_for('export_users_csv') }}"; // Passe dies ggf. an deinen Endpunktnamen an
+        form.action = "{{ url_for('export_users_csv') }}";
 
+        // 1. CSRF-Token als Wert (ohne Klammern) übergeben
+        var csrfInput = document.createElement('input');
+        csrfInput.type = 'hidden';
+        csrfInput.name = 'csrf_token';
+        csrfInput.value = "{{ csrf_token }}";
+        form.appendChild(csrfInput);
+
+        // 2. Gefilterte Benutzernamen hinzufügen
         var input = document.createElement('input');
         input.type = 'hidden';
         input.name = 'usernames';
         input.value = JSON.stringify(visibleUsernames);
-
         form.appendChild(input);
-        document.body.appendChild(form);
 
+        document.body.appendChild(form);
         form.submit();
 
         // Aufräumen