Add the ability to remove a contact via the details modal

css/converse.css

@@ -6990,8 +6990,11 @@ body.reset {
   #conversejs .list-container {
     text-align: left;
     margin: 0.3em 0; }
-  #conversejs .btn.btn-primary {
+  #conversejs .btn {
     color: #fff; }
+    #conversejs .btn .fa {
+      color: #fff;
+      padding-right: 0.5em; }
   #conversejs .no-text-select {
     -webkit-touch-callout: none;
     -webkit-user-select: none;

css/inverse.css

@@ -6990,8 +6990,11 @@ body.reset {
   #conversejs .list-container {
     text-align: left;
     margin: 0.3em 0; }
-  #conversejs .btn.btn-primary {
+  #conversejs .btn {
     color: #fff; }
+    #conversejs .btn .fa {
+      color: #fff;
+      padding-right: 0.5em; }
   #conversejs .no-text-select {
     -webkit-touch-callout: none;
     -webkit-user-select: none;

sass/_core.scss

@@ -234,8 +234,12 @@ body.reset {
         margin: 0.3em 0;
     }
 
-    .btn.btn-primary {
+    .btn {
         color: #fff;
+        .fa {
+            color: #fff;
+            padding-right: 0.5em;
+        }
     }
 
     .no-text-select {

src/converse-chatboxes.js

@@ -238,6 +238,9 @@
                     if (_.isNil(this.vcard)) {
                         this.vcard = _converse.vcards.create({'jid': this.get('jid')});
                     }
+                    _converse.api.waitUntil('rosterContactsFetched').then(() => {
+                        this.contact = _converse.roster.findWhere({'jid': this.get('jid')});
+                    });
 
                     this.messages = new _converse.Messages();
                     this.messages.browserStorage = new Backbone.BrowserStorage[_converse.message_storage](

src/converse-chatview.js

@@ -235,6 +235,11 @@
 
 
             _converse.UserDetailsModal = _converse.BootstrapModal.extend({
+
+                events: { 
+                    'click button.remove-contact': 'removeContact'
+                },
+
                 toHTML () {
                     return tpl_user_details_modal(_.extend(
                         this.model.toJSON(),
@@ -246,10 +251,34 @@
                         'label_fullname': __('Full Name'),
                         'label_nickname': __('Nickname'),
                         'label_role': __('Role'),
-                        'label_save': __('Save'),
+                        'label_remove': __('Remove as contact'),
                         'label_url': __('URL'),
+                        'allow_contact_removal': _converse.allow_contact_removal,
+                        'is_roster_contact': !_.isUndefined(this.model.contact)
                     }));
-                }
+                },
+
+                removeContact (ev) {
+                    if (ev && ev.preventDefault) { ev.preventDefault(); }
+                    if (!_converse.allow_contact_removal) { return; }
+                    const result = confirm(__("Are you sure you want to remove this contact?"));
+                    if (result === true) {
+                        this.contact.removeFromRoster(
+                            (iq) => {
+                                this.contact.destroy();
+                                delete this.contact;
+                            },
+                            (err) => {
+                                _converse.log(err, Strophe.LogLevel.ERROR);
+                                _converse.api.alert.show(
+                                    Strophe.LogLevel.ERROR,
+                                    __('Error'),
+                                    [__('Sorry, there was an error while trying to remove %1$s as a contact.', name)]
+                                )
+                            }
+                        );
+                    }
+                },
             });
 
 
@@ -288,6 +317,7 @@
                     this.model.on('change:chat_status', this.onChatStatusChanged, this);
                     this.model.on('showHelpMessages', this.showHelpMessages, this);
                     this.render();
+
                     this.fetchMessages();
                     _converse.emit('chatBoxOpened', this);
                     _converse.emit('chatBoxInitialized', this);
@@ -408,6 +438,9 @@
                     this.heading.render();
                     this.heading.chatview = this;
 
+                    if (!_.isUndefined(this.model.contact)) {
+                        this.model.contact.on('destroy', this.heading.render, this);
+                    }
                     const flyout = this.el.querySelector('.flyout');
                     flyout.insertBefore(this.heading.el, flyout.querySelector('.chat-body'));
                     return this;

src/templates/profile_modal.html

@@ -49,8 +49,8 @@
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="submit" class="save-form btn btn-primary">{{{o.label_save}}}</button>
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.label_close}}}</button>
+                    <button type="submit" class="save-form btn btn-primary">{{{o.label_save}}}</button>
                 </div>
             </form>
         </div>

src/templates/user_details_modal.html

@@ -28,7 +28,9 @@
                 {[ } ]}
             </div>
             <div class="modal-footer">
-                <button type="submit" class="save-form btn btn-primary">{{{o.label_save}}}</button>
+                {[ if (o.allow_contact_removal && o.is_roster_contact) { ]}
+                    <button type="button" class="btn btn-danger remove-contact" data-dismiss="modal"><i class="fa fa-trash"> </i>{{{o.label_remove}}}</button>
+                {[ } ]}
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.label_close}}}</button>
             </div>
         </div>