snapshot of https://github.com/seaweedfs/seaweedfs.git (master, 2026-09-16; blobs > 131072B omitted)

weed/admin/static/js/modal-alerts.js

@@ -0,0 +1,394 @@
+/**
+ * Modal Alerts - Bootstrap Modal replacement for native alert() and confirm()
+ * Fixes Chrome auto-dismiss issue with native dialogs
+ * 
+ * Usage:
+ *   showAlert('Message', 'success');
+ *   showConfirm('Delete this?', function() { });
+ */
+
+(function () {
+    'use strict';
+
+    // Create and inject modal HTML into page if not already present
+    function ensureModalsExist() {
+        if (document.getElementById('globalAlertModal')) {
+            return; // Already exists
+        }
+
+        const modalsHTML = `
+            <!-- Global Alert Modal -->
+            <div class="modal fade" id="globalAlertModal" tabindex="-1" aria-labelledby="globalAlertModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header" id="globalAlertModalHeader">
+                            <h5 class="modal-title" id="globalAlertModalLabel">
+                                <i class="fas fa-info-circle me-2" id="globalAlertModalIcon"></i>
+                                <span id="globalAlertModalTitle">Notice</span>
+                            </h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body" id="globalAlertModalBody">
+                            <!-- Message will be inserted here -->
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Global Confirm Modal -->
+            <div class="modal fade" id="globalConfirmModal" tabindex="-1" aria-labelledby="globalConfirmModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header bg-warning">
+                            <h5 class="modal-title" id="globalConfirmModalLabel">
+                                <i class="fas fa-question-circle me-2"></i><span id="globalConfirmModalTitleText">Confirm Action</span>
+                            </h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body" id="globalConfirmModalBody">
+                            <!-- Message will be inserted here -->
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="globalConfirmCancelBtn">Cancel</button>
+                            <button type="button" class="btn btn-primary" id="globalConfirmOkBtn">OK</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Global Delete Confirm Modal -->
+            <div class="modal fade" id="globalDeleteModal" tabindex="-1" aria-labelledby="globalDeleteModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header bg-danger text-white">
+                            <h5 class="modal-title" id="globalDeleteModalLabel">
+                                <i class="fas fa-exclamation-triangle me-2"></i>Confirm Delete
+                            </h5>
+                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <p class="mb-2" id="globalDeleteModalMessage">Are you sure you want to delete this item?</p>
+                            <p class="mb-0"><strong id="globalDeleteModalItemName"></strong></p>
+                            <p class="text-muted small mt-2 mb-0">This action cannot be undone.</p>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                            <button type="button" class="btn btn-danger" id="globalDeleteConfirmBtn">
+                                <i class="fas fa-trash me-1"></i>Delete
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Inject modals at end of body
+        document.body.insertAdjacentHTML('beforeend', modalsHTML);
+    }
+
+    /**
+     * Show an alert message using Bootstrap modal
+     * @param {string} message - The message to display
+     * @param {string|object} typeOrOptions - Type ('success', 'error', 'warning', 'info') or options object
+     * @param {string} title - Optional custom title
+     */
+    window.showAlert = function (message, typeOrOptions, title) {
+        ensureModalsExist();
+
+        let type = 'info';
+        let isHtml = false;
+
+        if (typeof typeOrOptions === 'object' && typeOrOptions !== null) {
+            type = typeOrOptions.type || 'info';
+            isHtml = typeOrOptions.isHtml || false;
+            title = typeOrOptions.title || title;
+        } else if (typeof typeOrOptions === 'string') {
+            type = typeOrOptions;
+        }
+
+        const modal = document.getElementById('globalAlertModal');
+        const header = document.getElementById('globalAlertModalHeader');
+        const titleEl = document.getElementById('globalAlertModalTitle');
+        const bodyEl = document.getElementById('globalAlertModalBody');
+        const iconEl = document.getElementById('globalAlertModalIcon');
+
+        // Configuration for different types
+        const types = {
+            'success': {
+                title: 'Success',
+                icon: 'fa-check-circle',
+                headerClass: 'bg-success text-white',
+                btnClose: 'btn-close-white'
+            },
+            'error': {
+                title: 'Error',
+                icon: 'fa-exclamation-triangle',
+                headerClass: 'bg-danger text-white',
+                btnClose: 'btn-close-white'
+            },
+            'warning': {
+                title: 'Warning',
+                icon: 'fa-exclamation-circle',
+                headerClass: 'bg-warning text-dark',
+                btnClose: ''
+            },
+            'info': {
+                title: 'Notice',
+                icon: 'fa-info-circle',
+                headerClass: 'bg-info text-white',
+                btnClose: 'btn-close-white'
+            }
+        };
+
+        const config = types[type] || types['info'];
+
+        // Update header styling
+        header.className = 'modal-header ' + config.headerClass;
+        const closeBtn = header.querySelector('.btn-close');
+        closeBtn.className = 'btn-close ' + config.btnClose;
+
+        // Update icon
+        iconEl.className = 'fas ' + config.icon + ' me-2';
+
+        // Update title
+        titleEl.textContent = title || config.title;
+
+        // Update body - support HTML or text
+        if (isHtml || message.includes('<p>') || message.includes('<ul>')) {
+            bodyEl.innerHTML = message;
+        } else {
+            bodyEl.innerHTML = '<p class="mb-0">' + escapeHtml(message) + '</p>';
+        }
+
+        // Show modal
+        const bsModal = new bootstrap.Modal(modal);
+        bsModal.show();
+    };
+
+    /**
+     * Show a transient message that does not have to be dismissed
+     * @param {string} message - The message to display
+     * @param {string} type - Bootstrap contextual color, defaults to 'success'
+     */
+    window.showToast = function (message, type) {
+        let container = document.getElementById('globalToastContainer');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'globalToastContainer';
+            container.className = 'toast-container position-fixed top-0 end-0 p-3';
+            // Above any modal, however deeply they are stacked.
+            container.style.zIndex = '9999';
+            document.body.appendChild(container);
+        }
+
+        const toast = document.createElement('div');
+        toast.className = 'toast align-items-center text-white bg-' + (type || 'success') + ' border-0';
+        toast.setAttribute('role', 'alert');
+        toast.innerHTML = '<div class="d-flex"><div class="toast-body">' + escapeHtml(message) + '</div>' +
+            '<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div>';
+        container.appendChild(toast);
+
+        toast.addEventListener('hidden.bs.toast', function () {
+            toast.remove();
+        });
+
+        new bootstrap.Toast(toast, { delay: 3000 }).show();
+    };
+
+    /**
+     * Show a confirmation dialog using Bootstrap modal
+     * @param {string} message - The confirmation message
+     * @param {function} onConfirm - Callback function if user confirms
+     * @param {function|object} onCancelOrOptions - Optional callback or options object
+     * @param {string} title - Optional custom title
+     */
+    window.showConfirm = function (message, onConfirm, onCancelOrOptions, title) {
+        ensureModalsExist();
+
+        let onCancel = null;
+        let isHtml = false;
+
+        if (typeof onCancelOrOptions === 'object' && onCancelOrOptions !== null) {
+            onCancel = onCancelOrOptions.onCancel;
+            isHtml = onCancelOrOptions.isHtml || false;
+            title = onCancelOrOptions.title || null;
+        } else {
+            onCancel = onCancelOrOptions;
+        }
+
+        const modalEl = document.getElementById('globalConfirmModal');
+        const bodyEl = document.getElementById('globalConfirmModalBody');
+        const titleEl = document.getElementById('globalConfirmModalTitleText');
+        const okBtn = document.getElementById('globalConfirmOkBtn');
+        const cancelBtn = document.getElementById('globalConfirmCancelBtn');
+
+        // Set title
+        if (title) {
+            titleEl.textContent = title;
+        } else {
+            titleEl.textContent = 'Confirm Action';
+        }
+
+        // Set message
+        if (isHtml || message.includes('<p>') || message.includes('<ul>')) {
+            bodyEl.innerHTML = message;
+        } else {
+            bodyEl.innerHTML = '<p class="mb-0">' + escapeHtml(message) + '</p>';
+        }
+
+        // Remove old event listeners by cloning buttons
+        const newOkBtn = okBtn.cloneNode(true);
+        const newCancelBtn = cancelBtn.cloneNode(true);
+        okBtn.parentNode.replaceChild(newOkBtn, okBtn);
+        cancelBtn.parentNode.replaceChild(newCancelBtn, cancelBtn);
+
+        const modal = new bootstrap.Modal(modalEl);
+
+        // Add event listeners
+        newOkBtn.addEventListener('click', function () {
+            modal.hide();
+            if (typeof onConfirm === 'function') {
+                onConfirm();
+            }
+        });
+
+        newCancelBtn.addEventListener('click', function () {
+            modal.hide();
+            if (typeof onCancel === 'function') {
+                onCancel();
+            }
+        });
+
+        modal.show();
+    };
+
+    /**
+     * Show a delete confirmation dialog
+     * @param {string} itemName - Name of the item to delete
+     * @param {function} onConfirm - Callback function if user confirms deletion
+     * @param {string} message - Optional custom message (default: "Are you sure you want to delete this item?")
+     */
+    window.showDeleteConfirm = function (itemName, onConfirm, message) {
+        ensureModalsExist();
+
+        const modalEl = document.getElementById('globalDeleteModal');
+        const messageEl = document.getElementById('globalDeleteModalMessage');
+        const itemNameEl = document.getElementById('globalDeleteModalItemName');
+        const confirmBtn = document.getElementById('globalDeleteConfirmBtn');
+
+        // Set custom message if provided
+        if (message) {
+            messageEl.textContent = message;
+        } else {
+            messageEl.textContent = 'Are you sure you want to delete this item?';
+        }
+
+        // Set item name
+        itemNameEl.textContent = itemName;
+
+        // Remove old event listener by cloning button
+        const newConfirmBtn = confirmBtn.cloneNode(true);
+        confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
+
+        const modal = new bootstrap.Modal(modalEl);
+
+        // Add new event listener
+        newConfirmBtn.addEventListener('click', function () {
+            modal.hide();
+            if (typeof onConfirm === 'function') {
+                onConfirm();
+            }
+        });
+
+        modal.show();
+    };
+
+    /**
+     * Escape HTML to prevent XSS
+     */
+    function escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+        return text.replace(/[&<>"']/g, function (m) { return map[m]; });
+    }
+
+    // Bootstrap gives every modal and backdrop the same z-index, so a modal
+    // opened while another one is showing paints behind it and cannot be
+    // clicked. Lift each nested modal, and its backdrop, above what is already
+    // on screen.
+    const MODAL_Z_INDEX = 1055;
+    const MODAL_Z_INDEX_STEP = 20;
+
+    document.addEventListener('show.bs.modal', function (event) {
+        const depth = document.querySelectorAll('.modal.show').length;
+        if (depth === 0) {
+            return;
+        }
+
+        const zIndex = MODAL_Z_INDEX + depth * MODAL_Z_INDEX_STEP;
+        event.target.style.zIndex = zIndex;
+
+        // Bootstrap only creates the backdrop after this event returns.
+        setTimeout(function () {
+            const backdrops = document.querySelectorAll('.modal-backdrop');
+            const backdrop = backdrops[backdrops.length - 1];
+            if (backdrop) {
+                backdrop.style.zIndex = zIndex - 1;
+            }
+        }, 0);
+    });
+
+    document.addEventListener('hidden.bs.modal', function (event) {
+        event.target.style.zIndex = '';
+        // Closing any modal releases the scroll lock the others still need.
+        if (document.querySelector('.modal.show')) {
+            document.body.classList.add('modal-open');
+        }
+    });
+
+    // Auto-initialize on DOMContentLoaded
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', ensureModalsExist);
+    } else {
+        ensureModalsExist();
+    }
+
+    /**
+     * AUTOMATIC OVERRIDE of native alert()
+     * This makes ALL existing alert() calls automatically use Bootstrap modals
+     */
+    window.alert = function (message) {
+        // Auto-detect message type from content
+        let type = 'info';
+        const msg = String(message || '');
+        const msgLower = msg.toLowerCase();
+
+        // Refined type inference to avoid false positives
+        if (msgLower.includes('success') || msgLower.includes('successfully') || msgLower.includes('created') || msgLower.includes('updated') || msgLower.includes('saved')) {
+            // Avoid "not successful"
+            if (!msgLower.includes('not success')) {
+                type = 'success';
+            }
+        }
+
+        if (type === 'info') {
+            if (msgLower.includes('error') || msgLower.includes('failed') || msgLower.includes('invalid') || msgLower.includes('exception')) {
+                type = 'error';
+            } else if (msgLower.includes('warning') || msgLower.includes('required') || msgLower.includes('attention')) {
+                type = 'warning';
+            }
+        }
+
+        showAlert(msg, type);
+    };
+
+    console.log('Modal Alerts library loaded - native alert() overridden');
+})();