add https://github.com/nakupanda/bootstrap3-dialog to standard codebase to...

add https://github.com/nakupanda/bootstrap3-dialog to standard codebase to ease jQuery/bootstrap dialogs

src/opnsense/www/js/bootstrap-dialog.js

+/* global define */
+
+/* ================================================
+ * Make use of Bootstrap's modal more monkey-friendly.
+ *
+ * For Bootstrap 3.
+ *
+ * javanoob@hotmail.com
+ *
+ * https://github.com/nakupanda/bootstrap3-dialog
+ *
+ * Licensed under The MIT License.
+ * ================================================ */
+(function(root, factory) {
+
+    "use strict";
+
+    // CommonJS module is defined
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = factory(require('jquery')(root));
+    }
+    // AMD module is defined
+    else if (typeof define === "function" && define.amd) {
+        define("bootstrap-dialog", ["jquery"], function($) {
+            return factory($);
+        });
+    } else {
+        // planted over the root!
+        root.BootstrapDialog = factory(root.jQuery);
+    }
+
+}(this, function($) {
+
+    "use strict";
+
+    /* ================================================
+     * Definition of BootstrapDialogModal.
+     * Extend Bootstrap Modal and override some functions.
+     * BootstrapDialogModal === Modified Modal.
+     * ================================================ */
+    var Modal = $.fn.modal.Constructor;
+    var BootstrapDialogModal = function(element, options) {
+        Modal.call(this, element, options);
+    };
+    BootstrapDialogModal.getModalVersion = function() {
+        var version = null;
+        if (typeof $.fn.modal.Constructor.VERSION === 'undefined') {
+            version = 'v3.1';
+        } else if (/3\.2\.\d+/.test($.fn.modal.Constructor.VERSION)) {
+            version = 'v3.2';
+        } else {
+            version = 'v3.3';  // v3.3+
+        }
+
+        return version;
+    };
+    BootstrapDialogModal.ORIGINAL_BODY_PADDING = $('body').css('padding-right') || 0;
+    BootstrapDialogModal.METHODS_TO_OVERRIDE = {};
+    BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.1'] = {};
+    BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.2'] = {
+        hide: function(e) {
+            if (e) {
+                e.preventDefault();
+            }
+            e = $.Event('hide.bs.modal');
+
+            this.$element.trigger(e);
+
+            if (!this.isShown || e.isDefaultPrevented()) {
+                return;
+            }
+
+            this.isShown = false;
+
+            // Remove css class 'modal-open' when the last opened dialog is closing.
+            var openedDialogs = this.getGlobalOpenedDialogs();
+            if (openedDialogs.length === 0) {
+                this.$body.removeClass('modal-open');
+            }
+
+            this.resetScrollbar();
+            this.escape();
+
+            $(document).off('focusin.bs.modal');
+
+            this.$element
+            .removeClass('in')
+            .attr('aria-hidden', true)
+            .off('click.dismiss.bs.modal');
+
+            $.support.transition && this.$element.hasClass('fade') ?
+            this.$element
+            .one('bsTransitionEnd', $.proxy(this.hideModal, this))
+            .emulateTransitionEnd(300) :
+            this.hideModal();
+        }
+    };
+    BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3'] = {
+        /**
+         * Overrided.
+         * 
+         * @returns {undefined}
+         */
+        setScrollbar: function() {
+            var bodyPad = BootstrapDialogModal.ORIGINAL_BODY_PADDING;
+            if (this.bodyIsOverflowing) {
+                this.$body.css('padding-right', bodyPad + this.scrollbarWidth);
+            }
+        },
+        /**
+         * Overrided.
+         * 
+         * @returns {undefined}
+         */
+        resetScrollbar: function() {
+            var openedDialogs = this.getGlobalOpenedDialogs();
+            if (openedDialogs.length === 0) {
+                this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
+            }
+        },
+        /**
+         * Overrided.
+         * 
+         * @returns {undefined}
+         */
+        hideModal: function() {
+            this.$element.hide();
+            this.backdrop($.proxy(function() {
+                var openedDialogs = this.getGlobalOpenedDialogs();
+                if (openedDialogs.length === 0) {
+                    this.$body.removeClass('modal-open');
+                }
+                this.resetAdjustments();
+                this.resetScrollbar();
+                this.$element.trigger('hidden.bs.modal');
+            }, this));
+        }
+    };
+    BootstrapDialogModal.prototype = {
+        constructor: BootstrapDialogModal,
+        /**
+         * New function, to get the dialogs that opened by BootstrapDialog.
+         * 
+         * @returns {undefined}
+         */
+        getGlobalOpenedDialogs: function() {
+            var openedDialogs = [];
+            $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
+                if (dialogInstance.isRealized() && dialogInstance.isOpened()) {
+                    openedDialogs.push(dialogInstance);
+                }
+            });
+
+            return openedDialogs;
+        }
+    };
+
+    // Add compatible methods.
+    BootstrapDialogModal.prototype = $.extend(BootstrapDialogModal.prototype, Modal.prototype, BootstrapDialogModal.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]);
+
+    /* ================================================
+     * Definition of BootstrapDialog.
+     * ================================================ */
+    var BootstrapDialog = function(options) {
+        this.defaultOptions = $.extend(true, {
+            id: BootstrapDialog.newGuid(),
+            buttons: [],
+            data: {},
+            onshow: null,
+            onshown: null,
+            onhide: null,
+            onhidden: null
+        }, BootstrapDialog.defaultOptions);
+        this.indexedButtons = {};
+        this.registeredButtonHotkeys = {};
+        this.draggableData = {
+            isMouseDown: false,
+            mouseOffset: {}
+        };
+        this.realized = false;
+        this.opened = false;
+        this.initOptions(options);
+        this.holdThisInstance();
+    };
+
+    BootstrapDialog.BootstrapDialogModal = BootstrapDialogModal;
+
+    /**
+     *  Some constants.
+     */
+    BootstrapDialog.NAMESPACE = 'bootstrap-dialog';
+
+    BootstrapDialog.TYPE_DEFAULT = 'type-default';
+    BootstrapDialog.TYPE_INFO = 'type-info';
+    BootstrapDialog.TYPE_PRIMARY = 'type-primary';
+    BootstrapDialog.TYPE_SUCCESS = 'type-success';
+    BootstrapDialog.TYPE_WARNING = 'type-warning';
+    BootstrapDialog.TYPE_DANGER = 'type-danger';
+
+    BootstrapDialog.DEFAULT_TEXTS = {};
+    BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Information';
+    BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information';
+    BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Information';
+    BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success';
+    BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning';
+    BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger';
+    BootstrapDialog.DEFAULT_TEXTS['OK'] = 'OK';
+    BootstrapDialog.DEFAULT_TEXTS['CANCEL'] = 'Cancel';
+    BootstrapDialog.DEFAULT_TEXTS['CONFIRM'] = 'Confirmation';
+
+    BootstrapDialog.SIZE_NORMAL = 'size-normal';
+    BootstrapDialog.SIZE_SMALL = 'size-small';
+    BootstrapDialog.SIZE_WIDE = 'size-wide';    // size-wide is equal to modal-lg
+    BootstrapDialog.SIZE_LARGE = 'size-large';
+
+    BootstrapDialog.BUTTON_SIZES = {};
+    BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_NORMAL] = '';
+    BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_SMALL] = '';
+    BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_WIDE] = '';
+    BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_LARGE] = 'btn-lg';
+
+    BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk';
+
+    /**
+     * Default options.
+     */
+    BootstrapDialog.defaultOptions = {
+        type: BootstrapDialog.TYPE_PRIMARY,
+        size: BootstrapDialog.SIZE_NORMAL,
+        cssClass: '',
+        title: null,
+        message: null,
+        nl2br: true,
+        closable: true,
+        closeByBackdrop: true,
+        closeByKeyboard: true,
+        spinicon: BootstrapDialog.ICON_SPINNER,
+        autodestroy: true,
+        draggable: false,
+        animate: true,
+        description: ''
+    };
+
+    /**
+     * Config default options.
+     */
+    BootstrapDialog.configDefaultOptions = function(options) {
+        BootstrapDialog.defaultOptions = $.extend(true, BootstrapDialog.defaultOptions, options);
+    };
+
+    /**
+     * Open / Close all created dialogs all at once.
+     */
+    BootstrapDialog.dialogs = {};
+    BootstrapDialog.openAll = function() {
+        $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
+            dialogInstance.open();
+        });
+    };
+    BootstrapDialog.closeAll = function() {
+        $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
+            dialogInstance.close();
+        });
+    };
+
+    /**
+     * Move focus to next visible dialog.
+     */
+    BootstrapDialog.moveFocus = function() {
+        var lastDialogInstance = null;
+        $.each(BootstrapDialog.dialogs, function(id, dialogInstance) {
+            lastDialogInstance = dialogInstance;
+        });
+        if (lastDialogInstance !== null && lastDialogInstance.isRealized()) {
+            lastDialogInstance.getModal().focus();
+        }
+    };
+
+    BootstrapDialog.METHODS_TO_OVERRIDE = {};
+    BootstrapDialog.METHODS_TO_OVERRIDE['v3.1'] = {
+        handleModalBackdropEvent: function() {
+            this.getModal().on('click', {dialog: this}, function(event) {
+                event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
+            });
+
+            return this;
+        },
+        /**
+         * To make multiple opened dialogs look better.
+         * 
+         * Will be removed in later version, after Bootstrap Modal >= 3.3.0, updating z-index is unnecessary.
+         */
+        updateZIndex: function() {
+            var zIndexBackdrop = 1040;
+            var zIndexModal = 1050;
+            var dialogCount = 0;
+            $.each(BootstrapDialog.dialogs, function(dialogId, dialogInstance) {
+                dialogCount++;
+            });
+            var $modal = this.getModal();
+            var $backdrop = $modal.data('bs.modal').$backdrop;
+            $modal.css('z-index', zIndexModal + (dialogCount - 1) * 20);
+            $backdrop.css('z-index', zIndexBackdrop + (dialogCount - 1) * 20);
+
+            return this;
+        },
+        open: function() {
+            !this.isRealized() && this.realize();
+            this.getModal().modal('show');
+            this.updateZIndex();
+            this.setOpened(true);
+
+            return this;
+        }
+    };
+    BootstrapDialog.METHODS_TO_OVERRIDE['v3.2'] = {
+        handleModalBackdropEvent: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['handleModalBackdropEvent'],
+        updateZIndex: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['updateZIndex'],
+        open: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['open']
+    };
+    BootstrapDialog.METHODS_TO_OVERRIDE['v3.3'] = {};
+    BootstrapDialog.prototype = {
+        constructor: BootstrapDialog,
+        initOptions: function(options) {
+            this.options = $.extend(true, this.defaultOptions, options);
+
+            return this;
+        },
+        holdThisInstance: function() {
+            BootstrapDialog.dialogs[this.getId()] = this;
+
+            return this;
+        },
+        initModalStuff: function() {
+            this.setModal(this.createModal())
+            .setModalDialog(this.createModalDialog())
+            .setModalContent(this.createModalContent())
+            .setModalHeader(this.createModalHeader())
+            .setModalBody(this.createModalBody())
+            .setModalFooter(this.createModalFooter());
+
+            this.getModal().append(this.getModalDialog());
+            this.getModalDialog().append(this.getModalContent());
+            this.getModalContent()
+            .append(this.getModalHeader())
+            .append(this.getModalBody())
+            .append(this.getModalFooter());
+
+            return this;
+        },
+        createModal: function() {
+            var $modal = $('<div class="modal" tabindex="-1" role="dialog" aria-hidden="true"></div>');
+            $modal.prop('id', this.getId()).attr('aria-labelledby', this.getId() + '_title');
+
+            return $modal;
+        },
+        getModal: function() {
+            return this.$modal;
+        },
+        setModal: function($modal) {
+            this.$modal = $modal;
+
+            return this;
+        },
+        createModalDialog: function() {
+            return $('<div class="modal-dialog"></div>');
+        },
+        getModalDialog: function() {
+            return this.$modalDialog;
+        },
+        setModalDialog: function($modalDialog) {
+            this.$modalDialog = $modalDialog;
+
+            return this;
+        },
+        createModalContent: function() {
+            return $('<div class="modal-content"></div>');
+        },
+        getModalContent: function() {
+            return this.$modalContent;
+        },
+        setModalContent: function($modalContent) {
+            this.$modalContent = $modalContent;
+
+            return this;
+        },
+        createModalHeader: function() {
+            return $('<div class="modal-header"></div>');
+        },
+        getModalHeader: function() {
+            return this.$modalHeader;
+        },
+        setModalHeader: function($modalHeader) {
+            this.$modalHeader = $modalHeader;
+
+            return this;
+        },
+        createModalBody: function() {
+            return $('<div class="modal-body"></div>');
+        },
+        getModalBody: function() {
+            return this.$modalBody;
+        },
+        setModalBody: function($modalBody) {
+            this.$modalBody = $modalBody;
+
+            return this;
+        },
+        createModalFooter: function() {
+            return $('<div class="modal-footer"></div>');
+        },
+        getModalFooter: function() {
+            return this.$modalFooter;
+        },
+        setModalFooter: function($modalFooter) {
+            this.$modalFooter = $modalFooter;
+
+            return this;
+        },
+        createDynamicContent: function(rawContent) {
+            var content = null;
+            if (typeof rawContent === 'function') {
+                content = rawContent.call(rawContent, this);
+            } else {
+                content = rawContent;
+            }
+            if (typeof content === 'string') {
+                content = this.formatStringContent(content);
+            }
+
+            return content;
+        },
+        formatStringContent: function(content) {
+            if (this.options.nl2br) {
+                return content.replace(/\r\n/g, '<br />').replace(/[\r\n]/g, '<br />');
+            }
+
+            return content;
+        },
+        setData: function(key, value) {
+            this.options.data[key] = value;
+
+            return this;
+        },
+        getData: function(key) {
+            return this.options.data[key];
+        },
+        setId: function(id) {
+            this.options.id = id;
+
+            return this;
+        },
+        getId: function() {
+            return this.options.id;
+        },
+        getType: function() {
+            return this.options.type;
+        },
+        setType: function(type) {
+            this.options.type = type;
+            this.updateType();
+
+            return this;
+        },
+        updateType: function() {
+            if (this.isRealized()) {
+                var types = [BootstrapDialog.TYPE_DEFAULT,
+                    BootstrapDialog.TYPE_INFO,
+                    BootstrapDialog.TYPE_PRIMARY,
+                    BootstrapDialog.TYPE_SUCCESS,
+                    BootstrapDialog.TYPE_WARNING,
+                    BootstrapDialog.TYPE_DANGER];
+
+                this.getModal().removeClass(types.join(' ')).addClass(this.getType());
+            }
+
+            return this;
+        },
+        getSize: function() {
+            return this.options.size;
+        },
+        setSize: function(size) {
+            this.options.size = size;
+            this.updateSize();
+
+            return this;
+        },
+        updateSize: function() {
+            if (this.isRealized()) {
+                var dialog = this;
+
+                // Dialog size
+                this.getModal().removeClass(BootstrapDialog.SIZE_NORMAL)
+                .removeClass(BootstrapDialog.SIZE_SMALL)
+                .removeClass(BootstrapDialog.SIZE_WIDE)
+                .removeClass(BootstrapDialog.SIZE_LARGE);
+                this.getModal().addClass(this.getSize());
+
+                // Smaller dialog.
+                this.getModalDialog().removeClass('modal-sm');
+                if (this.getSize() === BootstrapDialog.SIZE_SMALL) {
+                    this.getModalDialog().addClass('modal-sm');
+                }
+
+                // Wider dialog.
+                this.getModalDialog().removeClass('modal-lg');
+                if (this.getSize() === BootstrapDialog.SIZE_WIDE) {
+                    this.getModalDialog().addClass('modal-lg');
+                }
+
+                // Button size
+                $.each(this.options.buttons, function(index, button) {
+                    var $button = dialog.getButton(button.id);
+                    var buttonSizes = ['btn-lg', 'btn-sm', 'btn-xs'];
+                    var sizeClassSpecified = false;
+                    if (typeof button['cssClass'] === 'string') {
+                        var btnClasses = button['cssClass'].split(' ');
+                        $.each(btnClasses, function(index, btnClass) {
+                            if ($.inArray(btnClass, buttonSizes) !== -1) {
+                                sizeClassSpecified = true;
+                            }
+                        });
+                    }
+                    if (!sizeClassSpecified) {
+                        $button.removeClass(buttonSizes.join(' '));
+                        $button.addClass(dialog.getButtonSize());
+                    }
+                });
+            }
+
+            return this;
+        },
+        getCssClass: function() {
+            return this.options.cssClass;
+        },
+        setCssClass: function(cssClass) {
+            this.options.cssClass = cssClass;
+
+            return this;
+        },
+        getTitle: function() {
+            return this.options.title;
+        },
+        setTitle: function(title) {
+            this.options.title = title;
+            this.updateTitle();
+
+            return this;
+        },
+        updateTitle: function() {
+            if (this.isRealized()) {
+                var title = this.getTitle() !== null ? this.createDynamicContent(this.getTitle()) : this.getDefaultText();
+                this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title).prop('id', this.getId() + '_title');
+            }
+
+            return this;
+        },
+        getMessage: function() {
+            return this.options.message;
+        },
+        setMessage: function(message) {
+            this.options.message = message;
+            this.updateMessage();
+
+            return this;
+        },
+        updateMessage: function() {
+            if (this.isRealized()) {
+                var message = this.createDynamicContent(this.getMessage());
+                this.getModalBody().find('.' + this.getNamespace('message')).html('').append(message);
+            }
+
+            return this;
+        },
+        isClosable: function() {
+            return this.options.closable;
+        },
+        setClosable: function(closable) {
+            this.options.closable = closable;
+            this.updateClosable();
+
+            return this;
+        },
+        setCloseByBackdrop: function(closeByBackdrop) {
+            this.options.closeByBackdrop = closeByBackdrop;
+
+            return this;
+        },
+        canCloseByBackdrop: function() {
+            return this.options.closeByBackdrop;
+        },
+        setCloseByKeyboard: function(closeByKeyboard) {
+            this.options.closeByKeyboard = closeByKeyboard;
+
+            return this;
+        },
+        canCloseByKeyboard: function() {
+            return this.options.closeByKeyboard;
+        },
+        isAnimate: function() {
+            return this.options.animate;
+        },
+        setAnimate: function(animate) {
+            this.options.animate = animate;
+
+            return this;
+        },
+        updateAnimate: function() {
+            if (this.isRealized()) {
+                this.getModal().toggleClass('fade', this.isAnimate());
+            }
+
+            return this;
+        },
+        getSpinicon: function() {
+            return this.options.spinicon;
+        },
+        setSpinicon: function(spinicon) {
+            this.options.spinicon = spinicon;
+
+            return this;
+        },
+        addButton: function(button) {
+            this.options.buttons.push(button);
+
+            return this;
+        },
+        addButtons: function(buttons) {
+            var that = this;
+            $.each(buttons, function(index, button) {
+                that.addButton(button);
+            });
+
+            return this;
+        },
+        getButtons: function() {
+            return this.options.buttons;
+        },
+        setButtons: function(buttons) {
+            this.options.buttons = buttons;
+            this.updateButtons();
+
+            return this;
+        },
+        /**
+         * If there is id provided for a button option, it will be in dialog.indexedButtons list.
+         *
+         * In that case you can use dialog.getButton(id) to find the button.
+         *
+         * @param {type} id
+         * @returns {undefined}
+         */
+        getButton: function(id) {
+            if (typeof this.indexedButtons[id] !== 'undefined') {
+                return this.indexedButtons[id];
+            }
+
+            return null;
+        },
+        getButtonSize: function() {
+            if (typeof BootstrapDialog.BUTTON_SIZES[this.getSize()] !== 'undefined') {
+                return BootstrapDialog.BUTTON_SIZES[this.getSize()];
+            }
+
+            return '';
+        },
+        updateButtons: function() {
+            if (this.isRealized()) {
+                if (this.getButtons().length === 0) {
+                    this.getModalFooter().hide();
+                } else {
+                    this.getModalFooter().show().find('.' + this.getNamespace('footer')).html('').append(this.createFooterButtons());
+                }
+            }
+
+            return this;
+        },
+        isAutodestroy: function() {
+            return this.options.autodestroy;
+        },
+        setAutodestroy: function(autodestroy) {
+            this.options.autodestroy = autodestroy;
+        },
+        getDescription: function() {
+            return this.options.description;
+        },
+        setDescription: function(description) {
+            this.options.description = description;
+
+            return this;
+        },
+        getDefaultText: function() {
+            return BootstrapDialog.DEFAULT_TEXTS[this.getType()];
+        },
+        getNamespace: function(name) {
+            return BootstrapDialog.NAMESPACE + '-' + name;
+        },
+        createHeaderContent: function() {
+            var $container = $('<div></div>');
+            $container.addClass(this.getNamespace('header'));
+
+            // title
+            $container.append(this.createTitleContent());
+
+            // Close button
+            $container.prepend(this.createCloseButton());
+
+            return $container;
+        },
+        createTitleContent: function() {
+            var $title = $('<div></div>');
+            $title.addClass(this.getNamespace('title'));
+
+            return $title;
+        },
+        createCloseButton: function() {
+            var $container = $('<div></div>');
+            $container.addClass(this.getNamespace('close-button'));
+            var $icon = $('<button class="close">&times;</button>');
+            $container.append($icon);
+            $container.on('click', {dialog: this}, function(event) {
+                event.data.dialog.close();
+            });
+
+            return $container;
+        },
+        createBodyContent: function() {
+            var $container = $('<div></div>');
+            $container.addClass(this.getNamespace('body'));
+
+            // Message
+            $container.append(this.createMessageContent());
+
+            return $container;
+        },
+        createMessageContent: function() {
+            var $message = $('<div></div>');
+            $message.addClass(this.getNamespace('message'));
+
+            return $message;
+        },
+        createFooterContent: function() {
+            var $container = $('<div></div>');
+            $container.addClass(this.getNamespace('footer'));
+
+            return $container;
+        },
+        createFooterButtons: function() {
+            var that = this;
+            var $container = $('<div></div>');
+            $container.addClass(this.getNamespace('footer-buttons'));
+            this.indexedButtons = {};
+            $.each(this.options.buttons, function(index, button) {
+                if (!button.id) {
+                    button.id = BootstrapDialog.newGuid();
+                }
+                var $button = that.createButton(button);
+                that.indexedButtons[button.id] = $button;
+                $container.append($button);
+            });
+
+            return $container;
+        },
+        createButton: function(button) {
+            var $button = $('<button class="btn"></button>');
+            $button.prop('id', button.id);
+            $button.data('button', button);
+
+            // Icon
+            if (typeof button.icon !== 'undefined' && $.trim(button.icon) !== '') {
+                $button.append(this.createButtonIcon(button.icon));
+            }
+
+            // Label
+            if (typeof button.label !== 'undefined') {
+                $button.append(button.label);
+            }
+
+            // Css class
+            if (typeof button.cssClass !== 'undefined' && $.trim(button.cssClass) !== '') {
+                $button.addClass(button.cssClass);
+            } else {
+                $button.addClass('btn-default');
+            }
+
+            // Hotkey
+            if (typeof button.hotkey !== 'undefined') {
+                this.registeredButtonHotkeys[button.hotkey] = $button;
+            }
+
+            // Button on click
+            $button.on('click', {dialog: this, $button: $button, button: button}, function(event) {
+                var dialog = event.data.dialog;
+                var $button = event.data.$button;
+                var button = $button.data('button');
+                if (typeof button.action === 'function') {
+                    button.action.call($button, dialog, event);
+                }
+
+                if (button.autospin) {
+                    $button.toggleSpin(true);
+                }
+            });
+
+            // Dynamically add extra functions to $button
+            this.enhanceButton($button);
+
+            return $button;
+        },
+        /**
+         * Dynamically add extra functions to $button
+         *
+         * Using '$this' to reference 'this' is just for better readability.
+         *
+         * @param {type} $button
+         * @returns {_L13.BootstrapDialog.prototype}
+         */
+        enhanceButton: function($button) {
+            $button.dialog = this;
+
+            // Enable / Disable
+            $button.toggleEnable = function(enable) {
+                var $this = this;
+                if (typeof enable !== 'undefined') {
+                    $this.prop("disabled", !enable).toggleClass('disabled', !enable);
+                } else {
+                    $this.prop("disabled", !$this.prop("disabled"));
+                }
+
+                return $this;
+            };
+            $button.enable = function() {
+                var $this = this;
+                $this.toggleEnable(true);
+
+                return $this;
+            };
+            $button.disable = function() {
+                var $this = this;
+                $this.toggleEnable(false);
+
+                return $this;
+            };
+
+            // Icon spinning, helpful for indicating ajax loading status.
+            $button.toggleSpin = function(spin) {
+                var $this = this;
+                var dialog = $this.dialog;
+                var $icon = $this.find('.' + dialog.getNamespace('button-icon'));
+                if (typeof spin === 'undefined') {
+                    spin = !($button.find('.icon-spin').length > 0);
+                }
+                if (spin) {
+                    $icon.hide();
+                    $button.prepend(dialog.createButtonIcon(dialog.getSpinicon()).addClass('icon-spin'));
+                } else {
+                    $icon.show();
+                    $button.find('.icon-spin').remove();
+                }
+
+                return $this;
+            };
+            $button.spin = function() {
+                var $this = this;
+                $this.toggleSpin(true);
+
+                return $this;
+            };
+            $button.stopSpin = function() {
+                var $this = this;
+                $this.toggleSpin(false);
+
+                return $this;
+            };
+
+            return this;
+        },
+        createButtonIcon: function(icon) {
+            var $icon = $('<span></span>');
+            $icon.addClass(this.getNamespace('button-icon')).addClass(icon);
+
+            return $icon;
+        },
+        /**
+         * Invoke this only after the dialog is realized.
+         *
+         * @param {type} enable
+         * @returns {undefined}
+         */
+        enableButtons: function(enable) {
+            $.each(this.indexedButtons, function(id, $button) {
+                $button.toggleEnable(enable);
+            });
+
+            return this;
+        },
+        /**
+         * Invoke this only after the dialog is realized.
+         *
+         * @returns {undefined}
+         */
+        updateClosable: function() {
+            if (this.isRealized()) {
+                // Close button
+                this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable());
+            }
+
+            return this;
+        },
+        /**
+         * Set handler for modal event 'show.bs.modal'.
+         * This is a setter!
+         */
+        onShow: function(onshow) {
+            this.options.onshow = onshow;
+
+            return this;
+        },
+        /**
+         * Set handler for modal event 'shown.bs.modal'.
+         * This is a setter!
+         */
+        onShown: function(onshown) {
+            this.options.onshown = onshown;
+
+            return this;
+        },
+        /**
+         * Set handler for modal event 'hide.bs.modal'.
+         * This is a setter!
+         */
+        onHide: function(onhide) {
+            this.options.onhide = onhide;
+
+            return this;
+        },
+        /**
+         * Set handler for modal event 'hidden.bs.modal'.
+         * This is a setter!
+         */
+        onHidden: function(onhidden) {
+            this.options.onhidden = onhidden;
+
+            return this;
+        },
+        isRealized: function() {
+            return this.realized;
+        },
+        setRealized: function(realized) {
+            this.realized = realized;
+
+            return this;
+        },
+        isOpened: function() {
+            return this.opened;
+        },
+        setOpened: function(opened) {
+            this.opened = opened;
+
+            return this;
+        },
+        handleModalEvents: function() {
+            this.getModal().on('show.bs.modal', {dialog: this}, function(event) {
+                var dialog = event.data.dialog;
+                dialog.setOpened(true);
+                if (dialog.isModalEvent(event) && typeof dialog.options.onshow === 'function') {
+                    var openIt = dialog.options.onshow(dialog);
+                    if (openIt === false) {
+                        dialog.setOpened(false);
+                    }
+
+                    return openIt;
+                }
+            });
+            this.getModal().on('shown.bs.modal', {dialog: this}, function(event) {
+                var dialog = event.data.dialog;
+                dialog.isModalEvent(event) && typeof dialog.options.onshown === 'function' && dialog.options.onshown(dialog);
+            });
+            this.getModal().on('hide.bs.modal', {dialog: this}, function(event) {
+                var dialog = event.data.dialog;
+                dialog.setOpened(false);
+                if (dialog.isModalEvent(event) && typeof dialog.options.onhide === 'function') {
+                    var hideIt = dialog.options.onhide(dialog);
+                    if (hideIt === false) {
+                        dialog.setOpened(true);
+                    }
+
+                    return hideIt;
+                }
+            });
+            this.getModal().on('hidden.bs.modal', {dialog: this}, function(event) {
+                var dialog = event.data.dialog;
+                dialog.isModalEvent(event) && typeof dialog.options.onhidden === 'function' && dialog.options.onhidden(dialog);
+                if (dialog.isAutodestroy()) {
+                    delete BootstrapDialog.dialogs[dialog.getId()];
+                    $(this).remove();
+                }
+                BootstrapDialog.moveFocus();
+            });
+
+            // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
+            this.handleModalBackdropEvent();
+
+            // ESC key support
+            this.getModal().on('keyup', {dialog: this}, function(event) {
+                event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
+            });
+
+            // Button hotkey
+            this.getModal().on('keyup', {dialog: this}, function(event) {
+                var dialog = event.data.dialog;
+                if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
+                    var $button = $(dialog.registeredButtonHotkeys[event.which]);
+                    !$button.prop('disabled') && $button.focus().trigger('click');
+                }
+            });
+
+            return this;
+        },
+        handleModalBackdropEvent: function() {
+            this.getModal().on('click', {dialog: this}, function(event) {
+                $(event.target).hasClass('modal-backdrop') && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
+            });
+
+            return this;
+        },
+        isModalEvent: function(event) {
+            return typeof event.namespace !== 'undefined' && event.namespace === 'bs.modal';
+        },
+        makeModalDraggable: function() {
+            if (this.options.draggable) {
+                this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown', {dialog: this}, function(event) {
+                    var dialog = event.data.dialog;
+                    dialog.draggableData.isMouseDown = true;
+                    var dialogOffset = dialog.getModalDialog().offset();
+                    dialog.draggableData.mouseOffset = {
+                        top: event.clientY - dialogOffset.top,
+                        left: event.clientX - dialogOffset.left
+                    };
+                });
+                this.getModal().on('mouseup mouseleave', {dialog: this}, function(event) {
+                    event.data.dialog.draggableData.isMouseDown = false;
+                });
+                $('body').on('mousemove', {dialog: this}, function(event) {
+                    var dialog = event.data.dialog;
+                    if (!dialog.draggableData.isMouseDown) {
+                        return;
+                    }
+                    dialog.getModalDialog().offset({
+                        top: event.clientY - dialog.draggableData.mouseOffset.top,
+                        left: event.clientX - dialog.draggableData.mouseOffset.left
+                    });
+                });
+            }
+
+            return this;
+        },
+        realize: function() {
+            this.initModalStuff();
+            this.getModal().addClass(BootstrapDialog.NAMESPACE)
+            .addClass(this.getCssClass());
+            this.updateSize();
+            if (this.getDescription()) {
+                this.getModal().attr('aria-describedby', this.getDescription());
+            }
+            this.getModalFooter().append(this.createFooterContent());
+            this.getModalHeader().append(this.createHeaderContent());
+            this.getModalBody().append(this.createBodyContent());
+            this.getModal().data('bs.modal', new BootstrapDialogModal(this.getModal(), {
+                backdrop: 'static',
+                keyboard: false,
+                show: false
+            }));
+            this.makeModalDraggable();
+            this.handleModalEvents();
+            this.setRealized(true);
+            this.updateButtons();
+            this.updateType();
+            this.updateTitle();
+            this.updateMessage();
+            this.updateClosable();
+            this.updateAnimate();
+            this.updateSize();
+
+            return this;
+        },
+        open: function() {
+            !this.isRealized() && this.realize();
+            this.getModal().modal('show');
+
+            return this;
+        },
+        close: function() {
+            this.getModal().modal('hide');
+
+            return this;
+        }
+    };
+
+    // Add compatible methods.
+    BootstrapDialog.prototype = $.extend(BootstrapDialog.prototype, BootstrapDialog.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]);
+
+    /**
+     * RFC4122 version 4 compliant unique id creator.
+     *
+     * Added by https://github.com/tufanbarisyildirim/
+     *
+     *  @returns {String}
+     */
+    BootstrapDialog.newGuid = function() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+            var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    };
+
+    /* ================================================
+     * For lazy people
+     * ================================================ */
+
+    /**
+     * Shortcut function: show
+     *
+     * @param {type} options
+     * @returns the created dialog instance
+     */
+    BootstrapDialog.show = function(options) {
+        return new BootstrapDialog(options).open();
+    };
+
+    /**
+     * Alert window
+     *
+     * @returns the created dialog instance
+     */
+    BootstrapDialog.alert = function() {
+        var options = {};
+        var defaultOptions = {
+            type: BootstrapDialog.TYPE_PRIMARY,
+            title: null,
+            message: null,
+            closable: false,
+            draggable: false,
+            buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
+            callback: null
+        };
+
+        if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
+            options = $.extend(true, defaultOptions, arguments[0]);
+        } else {
+            options = $.extend(true, defaultOptions, {
+                message: arguments[0],
+                callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
+            });
+        }
+
+        return new BootstrapDialog({
+            type: options.type,
+            title: options.title,
+            message: options.message,
+            closable: options.closable,
+            draggable: options.draggable,
+            data: {
+                callback: options.callback
+            },
+            onhide: function(dialog) {
+                !dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
+            },
+            buttons: [{
+                    label: options.buttonLabel,
+                    action: function(dialog) {
+                        dialog.setData('btnClicked', true);
+                        typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
+                        dialog.close();
+                    }
+                }]
+        }).open();
+    };
+
+    /**
+     * Confirm window
+     *
+     * @returns the created dialog instance
+     */
+    BootstrapDialog.confirm = function() {
+        var options = {};
+        var defaultOptions = {
+            type: BootstrapDialog.TYPE_PRIMARY,
+            title: null,
+            message: null,
+            closable: false,
+            draggable: false,
+            btnCancelLabel: BootstrapDialog.DEFAULT_TEXTS.CANCEL,
+            btnOKLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
+            btnOKClass: null,
+            callback: null
+        };
+        if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) {
+            options = $.extend(true, defaultOptions, arguments[0]);
+        } else {
+            options = $.extend(true, defaultOptions, {
+                message: arguments[0],
+                closable: false,
+                buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK,
+                callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null
+            });
+        }
+        if (options.btnOKClass === null) {
+            options.btnOKClass = ['btn', options.type.split('-')[1]].join('-');
+        }
+
+        return new BootstrapDialog({
+            type: options.type,
+            title: options.title,
+            message: options.message,
+            closable: options.closable,
+            draggable: options.draggable,
+            data: {
+                callback: options.callback
+            },
+            buttons: [{
+                    label: options.btnCancelLabel,
+                    action: function(dialog) {
+                        typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
+                        dialog.close();
+                    }
+                }, {
+                    label: options.btnOKLabel,
+                    cssClass: options.btnOKClass,
+                    action: function(dialog) {
+                        typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
+                        dialog.close();
+                    }
+                }]
+        }).open();
+    };
+
+    /**
+     * Warning window
+     *
+     * @param {type} message
+     * @returns the created dialog instance
+     */
+    BootstrapDialog.warning = function(message, callback) {
+        return new BootstrapDialog({
+            type: BootstrapDialog.TYPE_WARNING,
+            message: message
+        }).open();
+    };
+
+    /**
+     * Danger window
+     *
+     * @param {type} message
+     * @returns the created dialog instance
+     */
+    BootstrapDialog.danger = function(message, callback) {
+        return new BootstrapDialog({
+            type: BootstrapDialog.TYPE_DANGER,
+            message: message
+        }).open();
+    };
+
+    /**
+     * Success window
+     *
+     * @param {type} message
+     * @returns the created dialog instance
+     */
+    BootstrapDialog.success = function(message, callback) {
+        return new BootstrapDialog({
+            type: BootstrapDialog.TYPE_SUCCESS,
+            message: message
+        }).open();
+    };
+
+    return BootstrapDialog;
+
+}));

src/opnsense/www/js/bootstrap-dialog.min.js

+(function(a,b){if(typeof module!=="undefined"&&module.exports){module.exports=b(require("jquery")(a))}else{if(typeof define==="function"&&define.amd){define("bootstrap-dialog",["jquery"],function(c){return b(c)})}else{a.BootstrapDialog=b(a.jQuery)}}}(this,function(d){var b=d.fn.modal.Constructor;var c=function(f,e){b.call(this,f,e)};c.getModalVersion=function(){var e=null;if(typeof d.fn.modal.Constructor.VERSION==="undefined"){e="v3.1"}else{if(/3\.2\.\d+/.test(d.fn.modal.Constructor.VERSION)){e="v3.2"}else{e="v3.3"}}return e};c.ORIGINAL_BODY_PADDING=d("body").css("padding-right")||0;c.METHODS_TO_OVERRIDE={};c.METHODS_TO_OVERRIDE["v3.1"]={};c.METHODS_TO_OVERRIDE["v3.2"]={hide:function(g){if(g){g.preventDefault()}g=d.Event("hide.bs.modal");this.$element.trigger(g);if(!this.isShown||g.isDefaultPrevented()){return}this.isShown=false;var f=this.getGlobalOpenedDialogs();if(f.length===0){this.$body.removeClass("modal-open")}this.resetScrollbar();this.escape();d(document).off("focusin.bs.modal");this.$element.removeClass("in").attr("aria-hidden",true).off("click.dismiss.bs.modal");d.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",d.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal()}};c.METHODS_TO_OVERRIDE["v3.3"]={setScrollbar:function(){var e=c.ORIGINAL_BODY_PADDING;if(this.bodyIsOverflowing){this.$body.css("padding-right",e+this.scrollbarWidth)}},resetScrollbar:function(){var e=this.getGlobalOpenedDialogs();if(e.length===0){this.$body.css("padding-right",c.ORIGINAL_BODY_PADDING)}},hideModal:function(){this.$element.hide();this.backdrop(d.proxy(function(){var e=this.getGlobalOpenedDialogs();if(e.length===0){this.$body.removeClass("modal-open")}this.resetAdjustments();this.resetScrollbar();this.$element.trigger("hidden.bs.modal")},this))}};c.prototype={constructor:c,getGlobalOpenedDialogs:function(){var e=[];d.each(a.dialogs,function(g,f){if(f.isRealized()&&f.isOpened()){e.push(f)}});return e}};c.prototype=d.extend(c.prototype,b.prototype,c.METHODS_TO_OVERRIDE[c.getModalVersion()]);var a=function(e){this.defaultOptions=d.extend(true,{id:a.newGuid(),buttons:[],data:{},onshow:null,onshown:null,onhide:null,onhidden:null},a.defaultOptions);this.indexedButtons={};this.registeredButtonHotkeys={};this.draggableData={isMouseDown:false,mouseOffset:{}};this.realized=false;this.opened=false;this.initOptions(e);this.holdThisInstance()};a.BootstrapDialogModal=c;a.NAMESPACE="bootstrap-dialog";a.TYPE_DEFAULT="type-default";a.TYPE_INFO="type-info";a.TYPE_PRIMARY="type-primary";a.TYPE_SUCCESS="type-success";a.TYPE_WARNING="type-warning";a.TYPE_DANGER="type-danger";a.DEFAULT_TEXTS={};a.DEFAULT_TEXTS[a.TYPE_DEFAULT]="Information";a.DEFAULT_TEXTS[a.TYPE_INFO]="Information";a.DEFAULT_TEXTS[a.TYPE_PRIMARY]="Information";a.DEFAULT_TEXTS[a.TYPE_SUCCESS]="Success";a.DEFAULT_TEXTS[a.TYPE_WARNING]="Warning";a.DEFAULT_TEXTS[a.TYPE_DANGER]="Danger";a.DEFAULT_TEXTS.OK="OK";a.DEFAULT_TEXTS.CANCEL="Cancel";a.DEFAULT_TEXTS.CONFIRM="Confirmation";a.SIZE_NORMAL="size-normal";a.SIZE_SMALL="size-small";a.SIZE_WIDE="size-wide";a.SIZE_LARGE="size-large";a.BUTTON_SIZES={};a.BUTTON_SIZES[a.SIZE_NORMAL]="";a.BUTTON_SIZES[a.SIZE_SMALL]="";a.BUTTON_SIZES[a.SIZE_WIDE]="";a.BUTTON_SIZES[a.SIZE_LARGE]="btn-lg";a.ICON_SPINNER="glyphicon glyphicon-asterisk";a.defaultOptions={type:a.TYPE_PRIMARY,size:a.SIZE_NORMAL,cssClass:"",title:null,message:null,nl2br:true,closable:true,closeByBackdrop:true,closeByKeyboard:true,spinicon:a.ICON_SPINNER,autodestroy:true,draggable:false,animate:true,description:""};a.configDefaultOptions=function(e){a.defaultOptions=d.extend(true,a.defaultOptions,e)};a.dialogs={};a.openAll=function(){d.each(a.dialogs,function(f,e){e.open()})};a.closeAll=function(){d.each(a.dialogs,function(f,e){e.close()})};a.moveFocus=function(){var e=null;d.each(a.dialogs,function(g,f){e=f});if(e!==null&&e.isRealized()){e.getModal().focus()}};a.METHODS_TO_OVERRIDE={};a.METHODS_TO_OVERRIDE["v3.1"]={handleModalBackdropEvent:function(){this.getModal().on("click",{dialog:this},function(e){e.target===this&&e.data.dialog.isClosable()&&e.data.dialog.canCloseByBackdrop()&&e.data.dialog.close()});return this},updateZIndex:function(){var g=1040;var h=1050;var i=0;d.each(a.dialogs,function(j,k){i++});var f=this.getModal();var e=f.data("bs.modal").$backdrop;f.css("z-index",h+(i-1)*20);e.css("z-index",g+(i-1)*20);return this},open:function(){!this.isRealized()&&this.realize();this.getModal().modal("show");this.updateZIndex();this.setOpened(true);return this}};a.METHODS_TO_OVERRIDE["v3.2"]={handleModalBackdropEvent:a.METHODS_TO_OVERRIDE["v3.1"]["handleModalBackdropEvent"],updateZIndex:a.METHODS_TO_OVERRIDE["v3.1"]["updateZIndex"],open:a.METHODS_TO_OVERRIDE["v3.1"]["open"]};a.METHODS_TO_OVERRIDE["v3.3"]={};a.prototype={constructor:a,initOptions:function(e){this.options=d.extend(true,this.defaultOptions,e);return this},holdThisInstance:function(){a.dialogs[this.getId()]=this;return this},initModalStuff:function(){this.setModal(this.createModal()).setModalDialog(this.createModalDialog()).setModalContent(this.createModalContent()).setModalHeader(this.createModalHeader()).setModalBody(this.createModalBody()).setModalFooter(this.createModalFooter());this.getModal().append(this.getModalDialog());this.getModalDialog().append(this.getModalContent());this.getModalContent().append(this.getModalHeader()).append(this.getModalBody()).append(this.getModalFooter());return this},createModal:function(){var e=d('<div class="modal" tabindex="-1" role="dialog" aria-hidden="true"></div>');e.prop("id",this.getId()).attr("aria-labelledby",this.getId()+"_title");return e},getModal:function(){return this.$modal},setModal:function(e){this.$modal=e;return this},createModalDialog:function(){return d('<div class="modal-dialog"></div>')},getModalDialog:function(){return this.$modalDialog},setModalDialog:function(e){this.$modalDialog=e;return this},createModalContent:function(){return d('<div class="modal-content"></div>')},getModalContent:function(){return this.$modalContent},setModalContent:function(e){this.$modalContent=e;return this},createModalHeader:function(){return d('<div class="modal-header"></div>')},getModalHeader:function(){return this.$modalHeader},setModalHeader:function(e){this.$modalHeader=e;return this},createModalBody:function(){return d('<div class="modal-body"></div>')},getModalBody:function(){return this.$modalBody},setModalBody:function(e){this.$modalBody=e;return this},createModalFooter:function(){return d('<div class="modal-footer"></div>')},getModalFooter:function(){return this.$modalFooter},setModalFooter:function(e){this.$modalFooter=e;return this},createDynamicContent:function(f){var e=null;if(typeof f==="function"){e=f.call(f,this)}else{e=f}if(typeof e==="string"){e=this.formatStringContent(e)}return e},formatStringContent:function(e){if(this.options.nl2br){return e.replace(/\r\n/g,"<br />").replace(/[\r\n]/g,"<br />")}return e},setData:function(e,f){this.options.data[e]=f;return this},getData:function(e){return this.options.data[e]},setId:function(e){this.options.id=e;return this},getId:function(){return this.options.id},getType:function(){return this.options.type},setType:function(e){this.options.type=e;this.updateType();return this},updateType:function(){if(this.isRealized()){var e=[a.TYPE_DEFAULT,a.TYPE_INFO,a.TYPE_PRIMARY,a.TYPE_SUCCESS,a.TYPE_WARNING,a.TYPE_DANGER];this.getModal().removeClass(e.join(" ")).addClass(this.getType())}return this},getSize:function(){return this.options.size},setSize:function(e){this.options.size=e;this.updateSize();return this},updateSize:function(){if(this.isRealized()){var e=this;this.getModal().removeClass(a.SIZE_NORMAL).removeClass(a.SIZE_SMALL).removeClass(a.SIZE_WIDE).removeClass(a.SIZE_LARGE);this.getModal().addClass(this.getSize());this.getModalDialog().removeClass("modal-sm");if(this.getSize()===a.SIZE_SMALL){this.getModalDialog().addClass("modal-sm")}this.getModalDialog().removeClass("modal-lg");if(this.getSize()===a.SIZE_WIDE){this.getModalDialog().addClass("modal-lg")}d.each(this.options.buttons,function(g,i){var k=e.getButton(i.id);var f=["btn-lg","btn-sm","btn-xs"];var j=false;if(typeof i.cssClass==="string"){var h=i.cssClass.split(" ");d.each(h,function(l,m){if(d.inArray(m,f)!==-1){j=true}})}if(!j){k.removeClass(f.join(" "));k.addClass(e.getButtonSize())}})}return this},getCssClass:function(){return this.options.cssClass},setCssClass:function(e){this.options.cssClass=e;return this},getTitle:function(){return this.options.title},setTitle:function(e){this.options.title=e;this.updateTitle();return this},updateTitle:function(){if(this.isRealized()){var e=this.getTitle()!==null?this.createDynamicContent(this.getTitle()):this.getDefaultText();this.getModalHeader().find("."+this.getNamespace("title")).html("").append(e).prop("id",this.getId()+"_title")}return this},getMessage:function(){return this.options.message},setMessage:function(e){this.options.message=e;this.updateMessage();return this},updateMessage:function(){if(this.isRealized()){var e=this.createDynamicContent(this.getMessage());this.getModalBody().find("."+this.getNamespace("message")).html("").append(e)}return this},isClosable:function(){return this.options.closable},setClosable:function(e){this.options.closable=e;this.updateClosable();return this},setCloseByBackdrop:function(e){this.options.closeByBackdrop=e;return this},canCloseByBackdrop:function(){return this.options.closeByBackdrop},setCloseByKeyboard:function(e){this.options.closeByKeyboard=e;return this},canCloseByKeyboard:function(){return this.options.closeByKeyboard},isAnimate:function(){return this.options.animate},setAnimate:function(e){this.options.animate=e;return this},updateAnimate:function(){if(this.isRealized()){this.getModal().toggleClass("fade",this.isAnimate())}return this},getSpinicon:function(){return this.options.spinicon},setSpinicon:function(e){this.options.spinicon=e;return this},addButton:function(e){this.options.buttons.push(e);return this},addButtons:function(f){var e=this;d.each(f,function(g,h){e.addButton(h)});return this},getButtons:function(){return this.options.buttons},setButtons:function(e){this.options.buttons=e;this.updateButtons();return this},getButton:function(e){if(typeof this.indexedButtons[e]!=="undefined"){return this.indexedButtons[e]}return null},getButtonSize:function(){if(typeof a.BUTTON_SIZES[this.getSize()]!=="undefined"){return a.BUTTON_SIZES[this.getSize()]}return""},updateButtons:function(){if(this.isRealized()){if(this.getButtons().length===0){this.getModalFooter().hide()}else{this.getModalFooter().show().find("."+this.getNamespace("footer")).html("").append(this.createFooterButtons())}}return this},isAutodestroy:function(){return this.options.autodestroy},setAutodestroy:function(e){this.options.autodestroy=e},getDescription:function(){return this.options.description},setDescription:function(e){this.options.description=e;return this},getDefaultText:function(){return a.DEFAULT_TEXTS[this.getType()]},getNamespace:function(e){return a.NAMESPACE+"-"+e},createHeaderContent:function(){var e=d("<div></div>");e.addClass(this.getNamespace("header"));e.append(this.createTitleContent());e.prepend(this.createCloseButton());return e},createTitleContent:function(){var e=d("<div></div>");e.addClass(this.getNamespace("title"));return e},createCloseButton:function(){var f=d("<div></div>");f.addClass(this.getNamespace("close-button"));var e=d('<button class="close">&times;</button>');f.append(e);f.on("click",{dialog:this},function(g){g.data.dialog.close()});return f},createBodyContent:function(){var e=d("<div></div>");e.addClass(this.getNamespace("body"));e.append(this.createMessageContent());return e},createMessageContent:function(){var e=d("<div></div>");e.addClass(this.getNamespace("message"));return e},createFooterContent:function(){var e=d("<div></div>");e.addClass(this.getNamespace("footer"));return e},createFooterButtons:function(){var e=this;var f=d("<div></div>");f.addClass(this.getNamespace("footer-buttons"));this.indexedButtons={};d.each(this.options.buttons,function(g,h){if(!h.id){h.id=a.newGuid()}var i=e.createButton(h);e.indexedButtons[h.id]=i;f.append(i)});return f},createButton:function(e){var f=d('<button class="btn"></button>');f.prop("id",e.id);f.data("button",e);if(typeof e.icon!=="undefined"&&d.trim(e.icon)!==""){f.append(this.createButtonIcon(e.icon))}if(typeof e.label!=="undefined"){f.append(e.label)}if(typeof e.cssClass!=="undefined"&&d.trim(e.cssClass)!==""){f.addClass(e.cssClass)}else{f.addClass("btn-default")}if(typeof e.hotkey!=="undefined"){this.registeredButtonHotkeys[e.hotkey]=f}f.on("click",{dialog:this,$button:f,button:e},function(i){var h=i.data.dialog;var j=i.data.$button;var g=j.data("button");if(typeof g.action==="function"){g.action.call(j,h,i)}if(g.autospin){j.toggleSpin(true)}});this.enhanceButton(f);return f},enhanceButton:function(e){e.dialog=this;e.toggleEnable=function(f){var g=this;if(typeof f!=="undefined"){g.prop("disabled",!f).toggleClass("disabled",!f)}else{g.prop("disabled",!g.prop("disabled"))}return g};e.enable=function(){var f=this;f.toggleEnable(true);return f};e.disable=function(){var f=this;f.toggleEnable(false);return f};e.toggleSpin=function(i){var h=this;var g=h.dialog;var f=h.find("."+g.getNamespace("button-icon"));if(typeof i==="undefined"){i=!(e.find(".icon-spin").length>0)}if(i){f.hide();e.prepend(g.createButtonIcon(g.getSpinicon()).addClass("icon-spin"))}else{f.show();e.find(".icon-spin").remove()}return h};e.spin=function(){var f=this;f.toggleSpin(true);return f};e.stopSpin=function(){var f=this;f.toggleSpin(false);return f};return this},createButtonIcon:function(f){var e=d("<span></span>");e.addClass(this.getNamespace("button-icon")).addClass(f);return e},enableButtons:function(e){d.each(this.indexedButtons,function(g,f){f.toggleEnable(e)});return this},updateClosable:function(){if(this.isRealized()){this.getModalHeader().find("."+this.getNamespace("close-button")).toggle(this.isClosable())}return this},onShow:function(e){this.options.onshow=e;return this},onShown:function(e){this.options.onshown=e;return this},onHide:function(e){this.options.onhide=e;return this},onHidden:function(e){this.options.onhidden=e;return this},isRealized:function(){return this.realized},setRealized:function(e){this.realized=e;return this},isOpened:function(){return this.opened},setOpened:function(e){this.opened=e;return this},handleModalEvents:function(){this.getModal().on("show.bs.modal",{dialog:this},function(g){var f=g.data.dialog;f.setOpened(true);if(f.isModalEvent(g)&&typeof f.options.onshow==="function"){var e=f.options.onshow(f);if(e===false){f.setOpened(false)}return e}});this.getModal().on("shown.bs.modal",{dialog:this},function(f){var e=f.data.dialog;e.isModalEvent(f)&&typeof e.options.onshown==="function"&&e.options.onshown(e)});this.getModal().on("hide.bs.modal",{dialog:this},function(f){var e=f.data.dialog;e.setOpened(false);if(e.isModalEvent(f)&&typeof e.options.onhide==="function"){var g=e.options.onhide(e);if(g===false){e.setOpened(true)}return g}});this.getModal().on("hidden.bs.modal",{dialog:this},function(f){var e=f.data.dialog;e.isModalEvent(f)&&typeof e.options.onhidden==="function"&&e.options.onhidden(e);if(e.isAutodestroy()){delete a.dialogs[e.getId()];d(this).remove()}a.moveFocus()});this.handleModalBackdropEvent();this.getModal().on("keyup",{dialog:this},function(e){e.which===27&&e.data.dialog.isClosable()&&e.data.dialog.canCloseByKeyboard()&&e.data.dialog.close()});this.getModal().on("keyup",{dialog:this},function(f){var e=f.data.dialog;if(typeof e.registeredButtonHotkeys[f.which]!=="undefined"){var g=d(e.registeredButtonHotkeys[f.which]);!g.prop("disabled")&&g.focus().trigger("click")}});return this},handleModalBackdropEvent:function(){this.getModal().on("click",{dialog:this},function(e){d(e.target).hasClass("modal-backdrop")&&e.data.dialog.isClosable()&&e.data.dialog.canCloseByBackdrop()&&e.data.dialog.close()});return this},isModalEvent:function(e){return typeof e.namespace!=="undefined"&&e.namespace==="bs.modal"},makeModalDraggable:function(){if(this.options.draggable){this.getModalHeader().addClass(this.getNamespace("draggable")).on("mousedown",{dialog:this},function(g){var f=g.data.dialog;f.draggableData.isMouseDown=true;var e=f.getModalDialog().offset();f.draggableData.mouseOffset={top:g.clientY-e.top,left:g.clientX-e.left}});this.getModal().on("mouseup mouseleave",{dialog:this},function(e){e.data.dialog.draggableData.isMouseDown=false});d("body").on("mousemove",{dialog:this},function(f){var e=f.data.dialog;if(!e.draggableData.isMouseDown){return}e.getModalDialog().offset({top:f.clientY-e.draggableData.mouseOffset.top,left:f.clientX-e.draggableData.mouseOffset.left})})}return this},realize:function(){this.initModalStuff();this.getModal().addClass(a.NAMESPACE).addClass(this.getCssClass());this.updateSize();if(this.getDescription()){this.getModal().attr("aria-describedby",this.getDescription())}this.getModalFooter().append(this.createFooterContent());this.getModalHeader().append(this.createHeaderContent());this.getModalBody().append(this.createBodyContent());this.getModal().data("bs.modal",new c(this.getModal(),{backdrop:"static",keyboard:false,show:false}));this.makeModalDraggable();this.handleModalEvents();this.setRealized(true);this.updateButtons();this.updateType();this.updateTitle();this.updateMessage();this.updateClosable();this.updateAnimate();this.updateSize();return this},open:function(){!this.isRealized()&&this.realize();this.getModal().modal("show");return this},close:function(){this.getModal().modal("hide");return this}};a.prototype=d.extend(a.prototype,a.METHODS_TO_OVERRIDE[c.getModalVersion()]);a.newGuid=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(g){var f=Math.random()*16|0,e=g==="x"?f:(f&3|8);return e.toString(16)})};a.show=function(e){return new a(e).open()};a.alert=function(){var f={};var e={type:a.TYPE_PRIMARY,title:null,message:null,closable:false,draggable:false,buttonLabel:a.DEFAULT_TEXTS.OK,callback:null};if(typeof arguments[0]==="object"&&arguments[0].constructor==={}.constructor){f=d.extend(true,e,arguments[0])}else{f=d.extend(true,e,{message:arguments[0],callback:typeof arguments[1]!=="undefined"?arguments[1]:null})}return new a({type:f.type,title:f.title,message:f.message,closable:f.closable,draggable:f.draggable,data:{callback:f.callback},onhide:function(g){!g.getData("btnClicked")&&g.isClosable()&&typeof g.getData("callback")==="function"&&g.getData("callback")(false)},buttons:[{label:f.buttonLabel,action:function(g){g.setData("btnClicked",true);typeof g.getData("callback")==="function"&&g.getData("callback")(true);g.close()}}]}).open()};a.confirm=function(){var f={};var e={type:a.TYPE_PRIMARY,title:null,message:null,closable:false,draggable:false,btnCancelLabel:a.DEFAULT_TEXTS.CANCEL,btnOKLabel:a.DEFAULT_TEXTS.OK,btnOKClass:null,callback:null};if(typeof arguments[0]==="object"&&arguments[0].constructor==={}.constructor){f=d.extend(true,e,arguments[0])}else{f=d.extend(true,e,{message:arguments[0],closable:false,buttonLabel:a.DEFAULT_TEXTS.OK,callback:typeof arguments[1]!=="undefined"?arguments[1]:null})}if(f.btnOKClass===null){f.btnOKClass=["btn",f.type.split("-")[1]].join("-")}return new a({type:f.type,title:f.title,message:f.message,closable:f.closable,draggable:f.draggable,data:{callback:f.callback},buttons:[{label:f.btnCancelLabel,action:function(g){typeof g.getData("callback")==="function"&&g.getData("callback")(false);g.close()}},{label:f.btnOKLabel,cssClass:f.btnOKClass,action:function(g){typeof g.getData("callback")==="function"&&g.getData("callback")(true);g.close()}}]}).open()};a.warning=function(e,f){return new a({type:a.TYPE_WARNING,message:e}).open()};a.danger=function(e,f){return new a({type:a.TYPE_DANGER,message:e}).open()};a.success=function(e,f){return new a({type:a.TYPE_SUCCESS,message:e}).open()};return a}));
\ No newline at end of file

src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-dialog.less

+.modal-backdrop {
+  z-index: -1;
+}
+
+.bootstrap-dialog {
+
+    .modal-header {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+    }
+    .bootstrap-dialog-title {
+        color: #fff;
+        display: inline-block;
+    }
+    .bootstrap-dialog-button-icon {
+        margin-right: 3px;
+    }
+    .bootstrap-dialog-close-button {
+        float: right;
+        filter:alpha(opacity=90);
+        -moz-opacity:0.9;
+        -khtml-opacity: 0.9;
+        opacity: 0.9;
+        &:hover {
+            cursor: pointer;
+            filter: alpha(opacity=100);
+            -moz-opacity: 1;
+            -khtml-opacity: 1;
+            opacity: 1;
+        }
+    }
+
+    /* dialog types */
+    &.type-default {
+        .modal-header {
+            background-color: #fff;
+        }
+        .bootstrap-dialog-title {
+            color: #333;
+        }
+    }
+
+    &.type-info {
+        .modal-header {
+            background-color: #B0CDDB;
+        }
+    }
+
+    &.type-primary {
+        .modal-header {
+            background-color: #EA7105;
+        }
+    }
+
+    &.type-success {
+        .modal-header {
+            background-color: #9BD275;
+        }
+    }
+
+    &.type-warning {
+        .modal-header {
+            background-color: #f0ad4e;
+        }
+    }
+
+    &.type-danger {
+        .modal-header {
+            background-color: #d9534f;
+        }
+    }
+
+    &.size-large {
+        .bootstrap-dialog-title {
+            font-size: 24px;
+        }
+        .bootstrap-dialog-close-button {
+            font-size: 30px;
+        }
+        .bootstrap-dialog-message {
+            font-size: 18px;
+        }
+    }
+
+    /**
+     * Icon animation
+     * Copied from font-awesome: http://fontawesome.io/
+     **/
+    .icon-spin {
+        display: inline-block;
+        -moz-animation: spin 2s infinite linear;
+        -o-animation: spin 2s infinite linear;
+        -webkit-animation: spin 2s infinite linear;
+        animation: spin 2s infinite linear;
+    }
+    @-moz-keyframes spin {
+        0% {
+            -moz-transform: rotate(0deg);
+        }
+        100% {
+            -moz-transform: rotate(359deg);
+        }
+    }
+    @-webkit-keyframes spin {
+        0% {
+            -webkit-transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(359deg);
+        }
+    }
+    @-o-keyframes spin {
+        0% {
+            -o-transform: rotate(0deg);
+        }
+        100% {
+            -o-transform: rotate(359deg);
+        }
+    }
+    @-ms-keyframes spin {
+        0% {
+            -ms-transform: rotate(0deg);
+        }
+        100% {
+            -ms-transform: rotate(359deg);
+        }
+    }
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(359deg);
+        }
+    }
+    /** End of icon animation **/
+}
\ No newline at end of file

src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css

+.modal-backdrop {
+  z-index: -1;
+}
+.bootstrap-dialog {
+  /* dialog types */
+  /**
+     * Icon animation
+     * Copied from font-awesome: http://fontawesome.io/
+     **/
+  /** End of icon animation **/
+}
+.bootstrap-dialog .modal-header {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.bootstrap-dialog .bootstrap-dialog-title {
+  color: #fff;
+  display: inline-block;
+}
+.bootstrap-dialog .bootstrap-dialog-button-icon {
+  margin-right: 3px;
+}
+.bootstrap-dialog .bootstrap-dialog-close-button {
+  float: right;
+  filter: alpha(opacity=90);
+  -moz-opacity: 0.9;
+  -khtml-opacity: 0.9;
+  opacity: 0.9;
+}
+.bootstrap-dialog .bootstrap-dialog-close-button:hover {
+  cursor: pointer;
+  filter: alpha(opacity=100);
+  -moz-opacity: 1;
+  -khtml-opacity: 1;
+  opacity: 1;
+}
+.bootstrap-dialog.type-default .modal-header {
+  background-color: #fff;
+}
+.bootstrap-dialog.type-default .bootstrap-dialog-title {
+  color: #333;
+}
+.bootstrap-dialog.type-info .modal-header {
+  background-color: #B0CDDB;
+}
+.bootstrap-dialog.type-primary .modal-header {
+  background-color: #EA7105;
+}
+.bootstrap-dialog.type-success .modal-header {
+  background-color: #9BD275;
+}
+.bootstrap-dialog.type-warning .modal-header {
+  background-color: #f0ad4e;
+}
+.bootstrap-dialog.type-danger .modal-header {
+  background-color: #d9534f;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-title {
+  font-size: 24px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
+  font-size: 30px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-message {
+  font-size: 18px;
+}
+.bootstrap-dialog .icon-spin {
+  display: inline-block;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -o-transform: rotate(0deg);
+  }
+  100% {
+    -o-transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -ms-transform: rotate(0deg);
+  }
+  100% {
+    -ms-transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}