Replaced the Browser side pop ups with custom ones from the site itsself

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

@@ -613,6 +613,7 @@
     </div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
+{% endblock %}
 <script>
     // =========================================================================
     // 1. GLOBAL STATE DEFINITIONS
@@ -884,7 +885,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 +898,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) {
@@ -1241,33 +1242,186 @@
     }
 
     // =========================================================================
-    // 4. UI INTERACTIONS & UTILITIES
+    // CUSTOM MODAL HELPERS (Replaces native alert/prompt)
     // =========================================================================
-    function borrowItem(itemId) {
+    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 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();
+        });
+    }
+
+    // =========================================================================
+    // ORIGINAL SCRIPT (Updated to use custom modals)
+    // =========================================================================
+
+    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);
+
+        // Return early if the user clicked "Cancel" (prompt returns null)
+        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;
         }
 
@@ -1278,7 +1432,7 @@
         const csrfField = document.createElement('input');
         csrfField.type = 'hidden';
         csrfField.name = 'csrf_token';
-        csrfField.value = '{{ csrf_token }}';
+        csrfField.value = '{{ csrf_token }}'; // Note: Template syntax remains intact
         form.appendChild(csrfField);
 
         const cardField = document.createElement('input');
@@ -1348,13 +1502,13 @@
         const labels = { 'book': 'Buch', 'cd': 'CD', 'dvd': 'DVD', 'other': 'Sonstige', 'schoolbook': 'Schulbuch' };
         return labels[type] || type;
     }
-
     function escapeHtml(text) {
         const div = document.createElement('div');
         div.textContent = text;
         return div.innerHTML;
     }
 
+
     function showItemDetail(itemId) {
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
@@ -1388,9 +1542,9 @@
                                 : `/uploads/${image}`;
 
                             return `
-                        <div class="item-image-wrapper" style="width: 100%; height: auto;">
-                            <video src="${videoSrc}" class="item-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" controls preload="metadata" style="width: 100%; height: auto; max-height: 300px;"></video>
-                        </div>`;
+                    <div class="item-image-wrapper" style="width: 100%; height: auto;">
+                        <video src="${videoSrc}" class="item-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" controls preload="metadata" style="width: 100%; height: auto; max-height: 300px;"></video>
+                    </div>`;
                         } else {
                             const imageSrc = thumbnailInfo && thumbnailInfo.has_preview
                                 ? thumbnailInfo.preview_url
@@ -1399,15 +1553,15 @@
                                     : `/uploads/${image}`);
 
                             return `
-                        <div class="item-image-wrapper">
-                            <img src="${imageSrc}"
-                                 alt="Buchcover / Bild"
-                                 class="item-image ${index === 0 ? 'active-image' : ''}"
-                                 id="modal-image-${index}"
-                                 loading="lazy"
-                                 onload="console.log('Bild geladen:', '${imageSrc}')"
-                                 onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
-                        </div>`;
+                    <div class="item-image-wrapper">
+                        <img src="${imageSrc}"
+                             alt="Buchcover / Bild"
+                             class="item-image ${index === 0 ? 'active-image' : ''}"
+                             id="modal-image-${index}"
+                             loading="lazy"
+                             onload="console.log('Bild geladen:', '${imageSrc}')"
+                             onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
+                    </div>`;
                         }
                     }).join('');
 
@@ -1592,4 +1746,3 @@
         window.location.href = `/item_edit/${itemId}`;
     }
 </script>
-{% endblock %}

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">
@@ -343,11 +347,11 @@
         form.method = 'POST';
         form.action = "{{ url_for('export_users_csv') }}";
 
-        // 1. CSRF-Token hinzufügen
+        // 1. CSRF-Token als Wert (ohne Klammern) übergeben
         var csrfInput = document.createElement('input');
         csrfInput.type = 'hidden';
         csrfInput.name = 'csrf_token';
-        csrfInput.value = "{{ csrf_token() }}";
+        csrfInput.value = "{{ csrf_token }}";
         form.appendChild(csrfInput);
 
         // 2. Gefilterte Benutzernamen hinzufügen