settings: Add confirm_dialog module.

This module makes it really easy to create are-you-sure
dialogs for dangerous operations.

Basically it's one function with five parameters.  You
give three chunks of HTML, a callback function, and
a parent container.

The first use of this will be in settings_user_groups,
coming up in a couple commits.

.eslintrc.json

@@ -49,6 +49,7 @@
         "compose_ui": false,
         "composebox_typeahead": false,
         "condense": false,
+        "confirm_dialog": false,
         "copy_and_paste": false,
         "csrf_token": false,
         "current_msg_list": true,

static/js/bundles/app.js

@@ -164,6 +164,7 @@ import "js/upload_widget.js";
 import "js/avatar.js";
 import "js/realm_icon.js";
 import 'js/reminder.js';
+import 'js/confirm_dialog.js';
 import "js/settings_account.js";
 import "js/settings_display.js";
 import "js/settings_notifications.js";

static/js/confirm_dialog.js

@@ -0,0 +1,86 @@
+var confirm_dialog = (function () {
+
+var exports = {};
+
+/*
+    Look for confirm_dialog in settings_user_groups
+    to see an example of how to use this widget.  It's
+    pretty simple to use!
+
+    Some things to note:
+
+        1) We create DOM on the fly, and we remove
+           the DOM once it's closed.
+
+        2) We attach the DOM for the modal to conf.parent,
+           and this temporary DOM location will influence
+           how styles work.
+
+        3) The cancel button is driven by bootstrap.js.
+
+        4) For settings, we have a click handler in settings.js
+           that will close the dialog via overlays.close_active_modal.
+
+        5) We assume that since this is a modal, you will
+           only ever have one confirm dialog active at any
+           time.
+
+*/
+
+exports.launch = function (conf) {
+    var html = templates.render("confirm_dialog");
+    var confirm_dialog = $(html);
+
+    var conf_fields = [
+        // The next three fields should be safe HTML. If callers
+        // interpolate user data into strings, they should use
+        // templates.
+        'html_heading',
+        'html_body',
+        'html_yes_button',
+        'on_click',
+        'parent',
+    ];
+
+    _.each(conf_fields, function (f) {
+        if (!conf[f]) {
+            blueslip.error('programmer omitted ' + f);
+        }
+    });
+
+    conf.parent.append(confirm_dialog);
+
+    // Close any existing modals--on settings screens you can
+    // have multiple buttons that need confirmation.
+    if (overlays.is_modal_open()) {
+        overlays.close_modal('confirm_dialog_modal');
+    }
+
+    confirm_dialog.find('.confirm_dialog_heading').html(conf.html_heading);
+    confirm_dialog.find('.confirm_dialog_body').html(conf.html_body);
+
+    var yes_button = confirm_dialog.find('.confirm_dialog_yes_button');
+
+    yes_button.html(conf.html_yes_button);
+
+    // Set up handlers.
+    yes_button.on('click', function () {
+        overlays.close_modal('confirm_dialog_modal');
+        conf.on_click();
+    });
+
+    confirm_dialog.on('hide', function () {
+        confirm_dialog.remove();
+    });
+
+    // Open the modal
+    overlays.open_modal('confirm_dialog_modal');
+};
+
+return exports;
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = confirm_dialog;
+}
+window.confirm_dialog = confirm_dialog;

static/styles/settings.scss

@@ -1446,6 +1446,7 @@ body:not(.night-mode) #account-settings .custom_user_field .datepicker {
     margin: 10px;
 }
 
+#confirm_dialog_modal,
 #deactivation_user_modal.fade.in {
     top: calc(50% - 120px);
 }

static/templates/confirm_dialog.handlebars

@@ -0,0 +1,12 @@
+<div class="modal modal-bg hide fade" id="confirm_dialog_modal" tabindex="-1" role="dialog" aria-labelledby="confirm_dialog_modal" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
+        <h3 class="confirm_dialog_heading"></h3>
+    </div>
+    <div class="modal-body confirm_dialog_body">
+    </div>
+    <div class="modal-footer">
+        <button class="button rounded" data-dismiss="modal">{{t "Cancel" }}</button>
+        <button class="button rounded btn-danger confirm_dialog_yes_button"></button>
+    </div>
+</div>

tools/linter_lib/custom_check.py

@@ -194,6 +194,7 @@ def build_custom_checkers(by_lang):
         {'pattern': '[.]html[(]',
          'exclude_pattern': '[.]html[(]("|\'|templates|html|message.content|sub.rendered_description|i18n.t|rendered_|$|[)]|error_text|widget_elem|[$]error|[$][(]"<p>"[)])',
          'exclude': ['static/js/portico', 'static/js/lightbox.js', 'static/js/ui_report.js',
+                     'static/js/confirm_dialog.js',
                      'frontend_tests/'],
          'description': 'Setting HTML content with jQuery .html() can lead to XSS security bugs.  Consider .text() or using rendered_foo as a variable name if content comes from handlebars and thus is already sanitized.'},
         {'pattern': '["\']json/',