Render disconnect message via template and add padding.

css/converse.css

@@ -2308,6 +2308,9 @@
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
         color: #1A9707; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
+      #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
+        padding: 2em 2em 0 2em; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;

docs/CHANGES.md

@@ -18,6 +18,7 @@
 - #842 Persistent muc room creation not working [jcbrand]
 - #848 OTR doesn't start when `cache_otr_key` is set to `true`. [jcbrand]
 - #849 `TypeError: _converse.i18n.locale_data is undefined` when reconnecting. [jcbrand]
+- #850 Roster not loading when group names are numbers. [jcbrand]
 
 ## 3.0.1 (2017-04-04)
 

sass/_chatrooms.scss

@@ -71,7 +71,9 @@
                 .chat-msg-room {
                     color: $message-them-color;
                 }
-
+                .disconnect-msg {
+                    padding: 2em 2em 0 2em;
+                }
                 .chat-area {
                     word-wrap: break-word; 
                     height: 100%;

spec/chatroom.js

@@ -1441,11 +1441,11 @@
                 expect(view.$('.chat-area').is(':visible')).toBeFalsy();
                 expect(view.$('.occupants').is(':visible')).toBeFalsy();
                 var $chat_body = view.$('.chatroom-body');
-                expect($chat_body.html().trim().indexOf(
-                    '<p>You have been kicked from this room</p>'+
-                    '<p>This action was done by Fluellen.</p>'+
-                    '<p>The reason given is: "Avaunt, you cullion!".</p>'
-                )).not.toBe(-1);
+                expect($chat_body.find('.disconnect-msg').text()).toBe(
+                    'You have been kicked from this room'+
+                    'This action was done by Fluellen.'+
+                    'The reason given is: "Avaunt, you cullion!".'
+                );
             }));
 
             it("can be saved to, and retrieved from, browserStorage", mock.initConverse(function (_converse) {
@@ -1703,7 +1703,7 @@
                 var view = _converse.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').and.callThrough();
                 view.onChatRoomPresence(presence);
-                expect(view.$el.find('.chatroom-body p:last').text()).toBe('You are not on the member list of this room');
+                expect(view.$el.find('.chatroom-body p:last').text()).toBe('You are not on the member list of this room.');
             }));
 
             it("will show an error message if the user has been banned", mock.initConverse(function (_converse) {
@@ -1719,7 +1719,7 @@
                 var view = _converse.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').and.callThrough();
                 view.onChatRoomPresence(presence);
-                expect(view.$el.find('.chatroom-body p:last').text()).toBe('You have been banned from this room');
+                expect(view.$el.find('.chatroom-body p:last').text()).toBe('You have been banned from this room.');
             }));
 
             it("will render a nickname form if a nickname conflict happens and muc_nickname_from_jid=false", mock.initConverse(function (_converse) {
@@ -1804,7 +1804,7 @@
                 var view = _converse.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').and.callThrough();
                 view.onChatRoomPresence(presence);
-                expect(view.$el.find('.chatroom-body p:last').text()).toBe('You are not allowed to create new rooms');
+                expect(view.$el.find('.chatroom-body p:last').text()).toBe('You are not allowed to create new rooms.');
             }));
 
             it("will show an error message if the user's nickname doesn't conform to room policy", mock.initConverse(function (_converse) {
@@ -1820,7 +1820,7 @@
                 var view = _converse.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').and.callThrough();
                 view.onChatRoomPresence(presence);
-                expect(view.$el.find('.chatroom-body p:last').text()).toBe("Your nickname doesn't conform to this room's policies");
+                expect(view.$el.find('.chatroom-body p:last').text()).toBe("Your nickname doesn't conform to this room's policies.");
             }));
 
             it("will show an error message if the room doesn't yet exist", mock.initConverse(function (_converse) {
@@ -1836,7 +1836,7 @@
                 var view = _converse.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').and.callThrough();
                 view.onChatRoomPresence(presence);
-                expect(view.$el.find('.chatroom-body p:last').text()).toBe("This room does not (yet) exist");
+                expect(view.$el.find('.chatroom-body p:last').text()).toBe("This room does not (yet) exist.");
             }));
 
             it("will show an error message if the room has reached its maximum number of occupants", mock.initConverse(function (_converse) {
@@ -1852,7 +1852,7 @@
                 var view = _converse.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').and.callThrough();
                 view.onChatRoomPresence(presence);
-                expect(view.$el.find('.chatroom-body p:last').text()).toBe("This room has reached its maximum number of occupants");
+                expect(view.$el.find('.chatroom-body p:last').text()).toBe("This room has reached its maximum number of occupants.");
             }));
         });
 

src/config.js

@@ -108,6 +108,7 @@ require.config({
         "chatroom":                 "src/templates/chatroom",
         "chatroom_bookmark_form":   "src/templates/chatroom_bookmark_form",
         "chatroom_bookmark_toggle": "src/templates/chatroom_bookmark_toggle",
+        "chatroom_disconnect":      "src/templates/chatroom_disconnect",
         "chatroom_features":        "src/templates/chatroom_features",
         "chatroom_form":            "src/templates/chatroom_form",
         "chatroom_head":            "src/templates/chatroom_head",

src/converse-muc.js

@@ -14,6 +14,7 @@
             "converse-core",
             "tpl!chatarea",
             "tpl!chatroom",
+            "tpl!chatroom_disconnect",
             "tpl!chatroom_features",
             "tpl!chatroom_form",
             "tpl!chatroom_head",
@@ -35,6 +36,7 @@
             converse,
             tpl_chatarea,
             tpl_chatroom,
+            tpl_chatroom_disconnect,
             tpl_chatroom_features,
             tpl_chatroom_form,
             tpl_chatroom_head,
@@ -1594,7 +1596,9 @@
                     this.$('.chat-area').addClass('hidden');
                     this.$('.occupants').addClass('hidden');
                     this.$('span.centered.spinner').remove();
-                    this.$('.chatroom-body').append($('<p>'+msg+'</p>'));
+                    this.$('.chatroom-body').append(tpl_chatroom_disconnect({
+                        'disconnect_message': msg
+                    }));
                 },
 
                 getMessageFromStatus: function (stat, stanza, is_self) {
@@ -1773,25 +1777,25 @@
                         if (!_.isNull(error.querySelector('not-authorized'))) {
                             this.renderPasswordForm();
                         } else if (!_.isNull(error.querySelector('registration-required'))) {
-                            this.showDisconnectMessage(__('You are not on the member list of this room'));
+                            this.showDisconnectMessage(__('You are not on the member list of this room.'));
                         } else if (!_.isNull(error.querySelector('forbidden'))) {
-                            this.showDisconnectMessage(__('You have been banned from this room'));
+                            this.showDisconnectMessage(__('You have been banned from this room.'));
                         }
                     } else if (error.getAttribute('type') === 'modify') {
                         if (!_.isNull(error.querySelector('jid-malformed'))) {
-                            this.showDisconnectMessage(__('No nickname was specified'));
+                            this.showDisconnectMessage(__('No nickname was specified.'));
                         }
                     } else if (error.getAttribute('type') === 'cancel') {
                         if (!_.isNull(error.querySelector('not-allowed'))) {
-                            this.showDisconnectMessage(__('You are not allowed to create new rooms'));
+                            this.showDisconnectMessage(__('You are not allowed to create new rooms.'));
                         } else if (!_.isNull(error.querySelector('not-acceptable'))) {
-                            this.showDisconnectMessage(__("Your nickname doesn't conform to this room's policies"));
+                            this.showDisconnectMessage(__("Your nickname doesn't conform to this room's policies."));
                         } else if (!_.isNull(error.querySelector('conflict'))) {
                             this.onNicknameClash(presence);
                         } else if (!_.isNull(error.querySelector('item-not-found'))) {
-                            this.showDisconnectMessage(__("This room does not (yet) exist"));
+                            this.showDisconnectMessage(__("This room does not (yet) exist."));
                         } else if (!_.isNull(error.querySelector('service-unavailable'))) {
-                            this.showDisconnectMessage(__("This room has reached its maximum number of occupants"));
+                            this.showDisconnectMessage(__("This room has reached its maximum number of occupants."));
                         }
                     }
                 },

src/templates/chatroom_disconnect.html

+<p class="disconnect-msg">{{{disconnect_message}}}</p>