Add alert modal and close profile modal on save

css/converse.css

@@ -6953,6 +6953,8 @@ body.reset {
     color: #818479; }
   #conversejs .modal {
     background-color: rgba(0, 0, 0, 0.4); }
+    #conversejs .modal .modal-body p {
+      padding: 0.25rem 0; }
   #conversejs .selected {
     color: #578EA9 !important; }
   #conversejs .circle {

css/inverse.css

@@ -6953,6 +6953,8 @@ body.reset {
     color: #818479; }
   #conversejs .modal {
     background-color: rgba(0, 0, 0, 0.4); }
+    #conversejs .modal .modal-body p {
+      padding: 0.25rem 0; }
   #conversejs .selected {
     color: #578EA9 !important; }
   #conversejs .circle {

sass/_core.scss

@@ -176,6 +176,12 @@ body.reset {
 
     .modal {
         background-color: rgba(0, 0, 0, 0.4);
+
+        .modal-body {
+            p {
+                padding: 0.25rem 0;
+            }
+        }
     }
 
     .selected {

src/converse-modal.js

@@ -8,15 +8,15 @@
     if (typeof define === 'function' && define.amd) {
         define([
             "converse-core",
+            "tpl!alert_modal",
             "bootstrap",
-            "underscore",
-            "backbone",
             "backbone.vdomview"
         ], factory);
    }
-}(this, function (converse, bootstrap, _, Backbone) {
+}(this, function (converse, tpl_alert_modal, bootstrap) {
     "use strict";
 
+    const { Strophe, Backbone, _ } = converse.env;
 
     converse.plugins.add('converse-modal', {
 
@@ -44,12 +44,64 @@
                 },
 
                 show (ev) {
-                    ev.preventDefault();
-                    this.trigger_el = ev.target;
-                    this.trigger_el.classList.add('selected');
+                    if (ev) {
+                        ev.preventDefault();
+                        this.trigger_el = ev.target;
+                        this.trigger_el.classList.add('selected');
+                    }
                     this.modal.show();
                 }
             });
+
+            _converse.Alert = _converse.BootstrapModal.extend({
+
+                initialize () {
+                    _converse.BootstrapModal.prototype.initialize.apply(this, arguments);
+                    this.model.on('change', this.render, this);
+                },
+
+                toHTML () {
+                    return tpl_alert_modal(this.model.toJSON());
+                }
+            });
+
+
+            /************************ BEGIN API ************************/
+            // We extend the default converse.js API to add methods specific to MUC chat rooms.
+            let alert 
+
+            _.extend(_converse.api, {
+                'alert': {
+                    'show' (type, title, messages) {
+                        if (_.isString(messages)) {
+                            messages = [messages];
+                        }
+                        if (type === Strophe.LogLevel.ERROR) {
+                            type = 'alert-danger';
+                        } else if (type === Strophe.LogLevel.INFO) {
+                            type = 'alert-info';
+                        } else if (type === Strophe.LogLevel.WARN) {
+                            type = 'alert-warning';
+                        }
+
+                        if (_.isUndefined(alert)) {
+                            const model = new Backbone.Model({
+                                'title': title,
+                                'messages': messages,
+                                'type': type
+                            })
+                            alert = new _converse.Alert({'model': model});
+                        } else {
+                            alert.model.set({
+                                'title': title,
+                                'messages': messages,
+                                'type': type
+                            });
+                        }
+                        alert.show();
+                    }
+                }
+            });
         }
     });
 }));

src/converse-profile.js

@@ -90,22 +90,17 @@
 
                 setVCard (body, data) {
                     _converse.api.vcard.set(data)
-                    .then(() => {
-                        _converse.api.vcard.update(this.model.vcard, true);
-
-                        const html = tpl_alert({
-                            'message': __('Profile data succesfully saved'),
-                            'type': 'alert-primary'
-                        });
-                        body.insertAdjacentHTML('afterBegin', html);
-                    }).catch((err) => {
+                    .then(() => _converse.api.vcard.update(this.model.vcard, true))
+                    .catch((err) => {
                         _converse.log(err, Strophe.LogLevel.FATAL);
-                        const html = tpl_alert({
-                            'message': __('An error happened while trying to save your profile data'),
-                            'type': 'alert-danger'
-                        });
-                        body.insertAdjacentHTML('afterBegin', html);
+                        _converse.api.alert.show(
+                            Strophe.LogLevel.ERROR,
+                            __('Error'),
+                            [__("Sorry, an error happened while trying to save your profile data."),
+                            __("You can check your browser's developer console for any error output.")]
+                        )
                     });
+                    this.modal.hide();
                 },
 
                 onFormSubmitted (ev) {

src/templates/alert_modal.html

@@ -0,0 +1,16 @@
+<div class="modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header {{{o.type}}}">
+        <h5 class="modal-title">{{{o.title}}}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">{[ _.each(o.messages, function (message) { ]}
+          <p>{{{message}}}</p>
+      {[ }) ]}
+    </div>
+    </div>
+  </div>
+</div>