Add a way to show a user's vcard

src/converse-chatboxes.js

@@ -261,6 +261,10 @@
                     });
                 },
 
+                getDisplayName () {
+                    return this.vcard.get('fullname') || this.get('jid');
+                },
+
                 createMessageStanza (message) {
                     /* Given a _converse.Message Backbone.Model, return the XML
                      * stanza that represents it.

src/converse-chatview.js

@@ -19,11 +19,13 @@
             "tpl!help_message",
             "tpl!info",
             "tpl!new_day",
+            "tpl!user_details_modal",
             "tpl!toolbar_fileupload",
             "tpl!spinner",
             "tpl!spoiler_button",
             "tpl!status_message",
             "tpl!toolbar",
+            "converse-modal",
             "converse-chatboxes",
             "converse-message-view"
     ], factory);
@@ -41,6 +43,7 @@
             tpl_help_message,
             tpl_info,
             tpl_new_day,
+            tpl_user_details_modal,
             tpl_toolbar_fileupload,
             tpl_spinner,
             tpl_spoiler_button,
@@ -66,7 +69,7 @@
          *
          * NB: These plugins need to have already been loaded via require.js.
          */
-        dependencies: ["converse-chatboxes", "converse-disco", "converse-message-view"],
+        dependencies: ["converse-chatboxes", "converse-disco", "converse-message-view", "converse-modal"],
 
         overrides: {
             // Overrides mentioned here will be picked up by converse.js's
@@ -200,8 +203,8 @@
                 }
             });
 
-            _converse.ChatBoxHeading = _converse.ViewWithAvatar.extend({
 
+            _converse.ChatBoxHeading = _converse.ViewWithAvatar.extend({
                 initialize () {
                     this.model.on('change:status', this.onStatusMessageChanged, this);
                     this.model.vcard.on('change', this.render, this);
@@ -231,6 +234,25 @@
             });
 
 
+            _converse.UserDetailsModal = _converse.BootstrapModal.extend({
+                toHTML () {
+                    return tpl_user_details_modal(_.extend(
+                        this.model.toJSON(),
+                        this.model.vcard.toJSON(), {
+                        'alt_profile_image': __("The User's Profile Image"),
+                        'display_name': this.model.getDisplayName(),
+                        'label_close': __('Close'),
+                        'label_email': __('Email'),
+                        'label_fullname': __('Full Name'),
+                        'label_nickname': __('Nickname'),
+                        'label_role': __('Role'),
+                        'label_save': __('Save'),
+                        'label_url': __('URL'),
+                    }));
+                }
+            });
+
+
             _converse.ChatBoxView = Backbone.NativeView.extend({
                 length: 200,
                 className: 'chatbox hidden',
@@ -239,6 +261,7 @@
                 events: {
                     'change input.fileupload': 'onFileSelection',
                     'click .close-chatbox-button': 'close',
+                    'click .show-user-details-modal': 'showUserDetailsModal',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
                     'click .send-button': 'onFormSubmitted',
                     'click .toggle-call': 'toggleCall',
@@ -328,6 +351,13 @@
                     this.renderToolbar();
                 },
 
+                showUserDetailsModal (ev) {
+                    if (_.isUndefined(this.user_details_modal)) {
+                        this.user_details_modal = new _converse.UserDetailsModal({model: this.model});
+                    }
+                    this.user_details_modal.show(ev);
+                },
+
                 toggleFileUpload (ev) {
                     this.el.querySelector('input.fileupload').click();
                 },

src/templates/chatbox_head.html

@@ -16,6 +16,6 @@
     </div>
     <div class="chatbox-buttons row no-gutters">
         <a class="chatbox-btn close-chatbox-button fa fa-close" title={{{o.info_close}}}></a>
-        <!-- <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a> -->
+        <a class="chatbox-btn show-user-details-modal fa fa-vcard" title="{{{o.info_details}}}"></a>
     </div>
 </div>

src/templates/user_details_modal.html

@@ -0,0 +1,36 @@
+<div class="modal fade" id="user-profile-modal" tabindex="-1" role="dialog" aria-labelledby="user-profile-modal-label" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="user-profile-modal-label">{{{o.display_name}}}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
+            </div>
+            <div class="modal-body">
+                {[ if (o.image) { ]}
+                    <img alt="{{{o.alt_profile_image}}}"
+                        class="img-thumbnail avatar align-self-center"
+                        height="100" width="100" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
+                {[ } ]}
+                {[ if (o.fullname) { ]}
+                <p><label>{{{o.label_fullname}}}:</label>&nbsp;{{{o.fullname}}}</p>
+                {[ } ]}
+                {[ if (o.nickname) { ]}
+                <p><label>{{{o.label_nickname}}}:</label>&nbsp;{{{o.nickname}}}</p>
+                {[ } ]}
+                {[ if (o.url) { ]}
+                <p><label>{{{o.label_url}}}:</label>&nbsp;<a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.url}}}</a></p>
+                {[ } ]}
+                {[ if (o.email) { ]}
+                <p><label>{{{o.label_email}}}:</label>&nbsp;<a href="mailto:{{{o.email}}}">{{{o.email}}}</a></p>
+                {[ } ]}
+                {[ if (o.role) { ]}
+                <p><label>{{{o.label_role}}}:</label>&nbsp;{{{o.role}}}</p>
+                {[ } ]}
+            </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>
+            </div>
+        </div>
+    </div>
+</div>