Show roles from VCard next to name in messages

spec/messages.js

@@ -69,7 +69,7 @@
                     expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
                     return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === mock.cur_names[0])
                     .then(function () {
-                        expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Max Frankfurter');
+                        expect(chat_content.querySelector('span.chat-msg-author').textContent.trim()).toBe('Max Frankfurter');
                         done();
                     });
                 });
@@ -118,7 +118,7 @@
 
                     var author_el = chatboxview.el.querySelector('.chat-msg-author');
                     expect(chatbox.get('fullname') === sender_jid);
-                    expect( _.includes(author_el.textContent, 'max.frankfurter@localhost')).toBeTruthy();
+                    expect( _.includes(author_el.textContent.trim(), 'max.frankfurter@localhost')).toBeTruthy();
 
                     test_utils.waitUntil(function () { return vcard_fetched; }, 100)
                     .then(function () {
@@ -126,7 +126,7 @@
                         return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === mock.cur_names[0])
                     }).then(function () {
                         var author_el = chatboxview.el.querySelector('.chat-msg-author');
-                        expect( _.includes(author_el.textContent, 'Max Frankfurter')).toBeTruthy();
+                        expect( _.includes(author_el.textContent.trim(), 'Max Frankfurter')).toBeTruthy();
                         done();
                     });
                 }));
@@ -183,7 +183,7 @@
                     var chat_content = chatboxview.el.querySelector('.chat-content');
                     expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message);
                     expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-                    expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('max.frankfurter@localhost');
+                    expect(chat_content.querySelector('span.chat-msg-author').textContent.trim()).toBe('max.frankfurter@localhost');
                     done();
                 }));
             });
@@ -699,7 +699,7 @@
             expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
             return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === 'Candice van der Knijff')
             .then(function () {
-                expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
+                expect(chat_content.querySelector('span.chat-msg-author').textContent.trim()).toBe('Candice van der Knijff');
                 done();
             });
         }));
@@ -908,7 +908,7 @@
                     var chat_content = chatboxview.el.querySelector('.chat-content');
                     expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message);
                     expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-                    expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
+                    expect(chat_content.querySelector('span.chat-msg-author').textContent.trim()).toBe('Candice van der Knijff');
 
                     var $day = $chat_content.find('.date-separator');
                     expect($day.length).toEqual(1);
@@ -953,7 +953,7 @@
 
                     expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-text').textContent).toEqual(message);
                     expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-                    expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-author').textContent).toBe('Candice van der Knijff');
+                    expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-author').textContent.trim()).toBe('Candice van der Knijff');
                     done();
                 });
             });
@@ -1137,7 +1137,7 @@
             var msg_object = chatbox.messages.models[0];
 
             var msg_author = view.el.querySelector('.chat-content .chat-msg:last-child .chat-msg-author');
-            expect(msg_author.textContent).toBe('Max Mustermann');
+            expect(msg_author.textContent.trim()).toBe('Max Mustermann');
 
             var msg_time = view.el.querySelector('.chat-content .chat-msg:last-child .chat-msg-time');
             var time = moment(msg_object.get('time')).format(_converse.time_format);

src/converse-chatboxes.js

@@ -97,10 +97,16 @@
                 },
 
                 initialize () {
+                    if (this.get('type') === 'groupchat' &&
+                        this.collection.chatbox.get('nick') === Strophe.getResourceFromJid(this.get('from'))) {
+
+                        this.vcard = _converse.xmppstatus.vcard;
+                    } else {
                         this.vcard = _converse.vcards.findWhere({'jid': this.get('from')});
                         if (_.isNil(this.vcard)) {
                             this.vcard = _converse.vcards.create({'jid': this.get('from')});
                         }
+                    }
 
                     if (this.get('file')) {
                         this.on('change:put', this.uploadFile, this);

src/converse-message-view.js

@@ -108,10 +108,14 @@
                     } else {
                         template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;
                     }
+                    const moment_time = moment(this.model.get('time')),
+                          role = this.model.vcard.get('role'),
+                          roles = role ? role.split(',') : [];
 
-                    const moment_time = moment(this.model.get('time'));
                     const msg = u.stringToElement(template(
-                        _.extend(this.model.toJSON(), {
+                        _.extend(
+                            this.model.toJSON(), {
+                            'roles': roles,
                             'pretty_time': moment_time.format(_converse.time_format),
                             'time': moment_time.format(),
                             'extra_classes': this.getExtraMessageClasses(),

src/converse-profile.js

@@ -67,6 +67,7 @@
                         'label_nickname': __('Nickname'),
                         'label_jid': __('XMPP Address (JID)'),
                         'label_role': __('Role'),
+                        'label_role_help': __('Use commas to separate multiple roles. Your roles are shown next to your name on your chat messages.'),
                         'label_save': __('Save'),
                         'label_url': __('URL'),
                         'alt_avatar': __('Your avatar image')

src/templates/message.html

@@ -4,7 +4,9 @@
     {[ } ]}
     <div class="chat-msg-content">
         <span class="chat-msg-heading">
-            <span class="chat-msg-author">{{{o.username}}}</span>
+            <span class="chat-msg-author">{{{o.username}}}
+                {[ _.each(o.roles, function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
+            </span>
             <span class="chat-msg-time">{{{o.pretty_time}}}</span>
         </span>
         <span class="chat-msg-text"></span>

src/templates/profile_modal.html

@@ -44,7 +44,8 @@
                     </div>
                     <div class="form-group">
                         <label for="vcard-role" class="col-form-label">{{{o.label_role}}}:</label>
-                        <input id="vcard-role" type="text" class="form-control" name="role" value="{{{o.role}}}">
+                        <input id="vcard-role" type="text" class="form-control" name="role" value="{{{o.role}}}" aria-describedby="vcard-role-help">
+                        <small id="vcard-role-help" class="form-text text-muted">{{{o.label_role_help}}}</small>
                     </div>
                 </div>
                 <div class="modal-footer">