More work on the user profile modal

css/converse.css

@@ -5115,6 +5115,9 @@ body.reset {
 #conversejs > .row {
   flex-direction: row-reverse; }
 
+#conversejs label {
+  font-weight: bold; }
+
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
   border-radius: 4px;

css/inverse.css

@@ -5171,6 +5171,9 @@ body {
     padding-right: 1em;
     margin-right: 1em; }
 
+#conversejs label {
+  font-weight: bold; }
+
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
   border-radius: 4px;

sass/_profile.scss

@@ -0,0 +1,5 @@
+#conversejs {
+    label {
+        font-weight: bold;
+    }
+}

sass/converse/converse.scss

@@ -41,6 +41,7 @@
 }
 @import "../core";
 @import "core";
+@import "../profile";
 @import "../chatbox";
 @import "chatbox";
 @import "../controlbox";

sass/inverse/inverse.scss

@@ -40,6 +40,7 @@
 }
 @import "../core";
 @import "core";
+@import "../profile";
 @import "../chatbox";
 @import "chatbox";
 @import "../controlbox";

src/converse-profile.js

@@ -46,7 +46,7 @@
 
                 toHTML () {
                     return tpl_profile_modal(_.extend(this.model.toJSON(), {
-                        'heading_profile': __('Your profile'),
+                        'heading_profile': __('Your Profile'),
                         'label_close': __('Close')
                     }));
                 },

src/templates/profile_modal.html

@@ -6,6 +6,25 @@
                 <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 class="row">
+                    <div class="col-auto">
+                        {[ if (o.image) { ]}
+                        <a class="show-profile" href="#">
+                            <img alt="User Avatar" class="img-thumbnail avatar align-self-center" height="100px" width="100px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
+                        </a>
+                        {[ } ]}
+                    </div>
+                    <div class="col-auto">
+                        <div classs="row w-100">
+                            <label>Fullname:</label>
+                            <span class="username">{{{o.fullname}}}</span>
+                        </div>
+                        <div classs="row w-100">
+                            <label>XMPP Address:</label>
+                            <span class="username">{{{o.jid}}}</span>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>