Add outline for a user profile modal

src/converse-profile.js

@@ -10,6 +10,7 @@
     define(["converse-core",
             "bootstrap",
             "tpl!chat_status_modal",
+            "tpl!profile_modal",
             "tpl!profile_view",
             "tpl!status_option",
             "converse-vcard",
@@ -19,6 +20,7 @@
             converse,
             bootstrap,
             tpl_chat_status_modal,
+            tpl_profile_modal,
             tpl_profile_view,
             tpl_status_option
         ) {
@@ -40,6 +42,17 @@
                   { __ } = _converse;
 
 
+            _converse.ProfileModal = _converse.BootstrapModal.extend({
+
+                toHTML () {
+                    return tpl_profile_modal(_.extend(this.model.toJSON(), {
+                        'heading_profile': __('Your profile'),
+                        'label_close': __('Close')
+                    }));
+                },
+            });
+
+
             _converse.ChatStatusModal = _converse.BootstrapModal.extend({
                 events: {
                     "submit form#set-xmpp-status": "onFormSubmitted",
@@ -85,6 +98,7 @@
             _converse.XMPPStatusView = Backbone.VDOMView.extend({
                 tagName: "div",
                 events: {
+                    "click a.show-profile": "showProfileModal",
                     "click a.change-status": "showStatusChangeModal",
                     "click .dropdown dd ul li a": "setStatus",
                     "click .logout": "logOut"
@@ -108,6 +122,13 @@
                     }));
                 },
 
+                showProfileModal (ev) {
+                    if (_.isUndefined(this.profile_modal)) {
+                        this.profile_modal = new _converse.ProfileModal({model: this.model});
+                    }
+                    this.profile_modal.show(ev);
+                },
+
                 showStatusChangeModal (ev) {
                     if (_.isUndefined(this.status_modal)) {
                         this.status_modal = new _converse.ChatStatusModal({model: this.model});

src/templates/profile_modal.html

+<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.heading_profile}}}</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">
+            </div>
+        </div>
+    </div>
+</div>

src/templates/profile_view.html

 <div class="userinfo">
 <div class="d-flex">
     {[ if (o.image) { ]}
+    <a class="show-profile" href="#">
         <img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
+    </a>
     {[ } ]}
     <span class="username w-100 align-self-center">{{{o.fullname}}}</span>
     <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="{{{o.title_your_profile}}}" data-toggle="modal" data-target="#userProfileModal"></a> -->