Move password form for chatrooms to an external template.

converse.js

@@ -2211,6 +2211,7 @@
                 this.render();
                 this.occupantsview.model.fetch({add:true});
                 this.connect(null);
+                converse.emit('chatRoomOpened', this);
 
                 this.$el.insertAfter(converse.chatboxviews.get("controlbox").$el);
                 this.model.messages.fetch({add: true});
@@ -2224,12 +2225,10 @@
             render: function () {
                 this.$el.attr('id', this.model.get('box_id'))
                         .html(converse.templates.chatroom(this.model.toJSON()));
-
                 this.renderChatArea();
                 setTimeout(function () {
                     converse.refreshWebkit();
                 }, 50);
-                converse.emit('chatRoomOpened', this);
                 return this;
             },
 
@@ -2342,7 +2341,7 @@
             connect: function (password) {
                 if (_.has(converse.connection.muc.rooms, this.model.get('jid'))) {
                     // If the room exists, it already has event listeners, so we
-                    // doing add them again.
+                    // don't add them again.
                     converse.connection.muc.join(
                         this.model.get('jid'), this.model.get('nick'), null, null, null, password);
                 } else {
@@ -2476,9 +2475,8 @@
                 if (this.$el.find('div.chatroom-form-container').length) {
                     return;
                 }
-                this.$el.find('.chat-area').hide();
-                this.$el.find('.participants').hide();
-                this.$el.find('.chat-body').append(
+                this.$('.chat-body').children().hide();
+                this.$('.chat-body').append(
                     $('<div class="chatroom-form-container">'+
                         '<form class="chatroom-form">'+
                         '<span class="spinner centered"/>'+
@@ -2493,29 +2491,27 @@
             submitPassword: function (ev) {
                 ev.preventDefault();
                 var password = this.$el.find('.chatroom-form').find('input[type=password]').val();
-                this.$el.find('.chatroom-form-container').replaceWith(
-                    '<span class="spinner centered"/>');
+                this.$el.find('.chatroom-form-container').replaceWith('<span class="spinner centered"/>');
                 this.connect(password);
             },
 
             renderPasswordForm: function () {
-                this.$el.find('span.centered.spinner').remove();
-                this.$el.find('.chat-body').html(
-                    $('<div class="chatroom-form-container">'+
-                        '<form class="chatroom-form">'+
-                            '<legend>'+__('This chatroom requires a password')+'</legend>' +
-                            '<label>'+__('Password: ')+'<input type="password" name="password"/></label>' +
-                            '<input type="submit" value="'+__('Submit')+'/>' +
-                        '</form>'+
-                    '</div>'));
-                this.$el.find('.chatroom-form').on('submit', $.proxy(this.submitPassword, this));
+                this.$('.chat-body').children().hide();
+                this.$('span.centered.spinner').remove();
+                this.$('.chat-body').append(
+                    converse.templates.chatroom_password_form({
+                        heading: __('This chatroom requires a password'),
+                        label_password: __('Password: '),
+                        label_submit: __('Submit')
+                    }));
+                this.$('.chatroom-form').on('submit', $.proxy(this.submitPassword, this));
             },
 
             showDisconnectMessage: function (msg) {
-                this.$el.find('.chat-area').remove();
-                this.$el.find('.participants').remove();
-                this.$el.find('span.centered.spinner').remove();
-                this.$el.find('.chat-body').append($('<p>'+msg+'</p>'));
+                this.$('.chat-area').hide();
+                this.$('.participants').hide();
+                this.$('span.centered.spinner').remove();
+                this.$('.chat-body').append($('<p>'+msg+'</p>'));
             },
 
             /* http://xmpp.org/extensions/xep-0045.html
@@ -2684,7 +2680,11 @@
                     this.showErrorMessage($presence.find('error'), room);
                 } else {
                     is_self = ($presence.find("status[code='110']").length) || ($presence.attr('from') == room.name+'/'+Strophe.escapeNode(room.nick));
+                    if (!this.model.get('conneced')) {
                         this.model.set('connected', true);
+                        this.$('span.centered.spinner').remove();
+                        this.$el.find('.chat-body').children().show();
+                    }
                     this.showStatusMessages($presence, is_self);
                 }
                 return true;

css/converse.css

@@ -903,6 +903,7 @@ dl.add-converse-contact {
   margin-bottom: 5px;
 }
 #conversejs .chatroom-form label {
+  height: 30px;
   font-weight: bold;
   display: block;
   clear: both;

less/converse.less

@@ -1006,6 +1006,7 @@ dl.add-converse-contact {
 }
 
 #conversejs .chatroom-form label {
+    height: 30px;
     font-weight: bold;
     display: block;
     clear: both;

main.js

@@ -67,6 +67,7 @@ config = {
         "chatarea":                 "src/templates/chatarea",
         "chatbox":                  "src/templates/chatbox",
         "chatroom":                 "src/templates/chatroom",
+        "chatroom_password_form":   "src/templates/chatroom_password_form",
         "chatroom_sidebar":         "src/templates/chatroom_sidebar",
         "chatrooms_tab":            "src/templates/chatrooms_tab",
         "chats_panel":              "src/templates/chats_panel",

src/templates.js

@@ -7,6 +7,7 @@ define("converse-templates", [
     "tpl!chatarea",
     "tpl!chatbox",
     "tpl!chatroom",
+    "tpl!chatroom_password_form",
     "tpl!chatroom_sidebar",
     "tpl!chatrooms_tab",
     "tpl!chats_panel",
@@ -51,39 +52,40 @@ define("converse-templates", [
         chatarea:               arguments[5],
         chatbox:                arguments[6],
         chatroom:               arguments[7],
-        chatroom_sidebar:       arguments[8],
-        chatrooms_tab:          arguments[9],
-        chats_panel:            arguments[10],
-        choose_status:          arguments[11],
-        contacts_panel:         arguments[12],
-        contacts_tab:           arguments[13],
-        controlbox:             arguments[14],
-        controlbox_toggle:      arguments[15],
-        field:                  arguments[16],
-        form_checkbox:          arguments[17],
-        form_input:             arguments[18],
-        form_select:            arguments[19],
-        group_header:           arguments[20],
-        info:                   arguments[21],
-        login_panel:            arguments[22],
-        login_tab:              arguments[23],
-        message:                arguments[24],
-        new_day:                arguments[25],
-        occupant:               arguments[26],
-        pending_contact:        arguments[27],
-        pending_contacts:       arguments[28],
-        requesting_contact:     arguments[29],
-        requesting_contacts:    arguments[30],
-        room_description:       arguments[31],
-        room_item:              arguments[32],
-        room_panel:             arguments[33],
-        roster:                 arguments[34],
-        roster_item:            arguments[35],
-        select_option:          arguments[36],
-        search_contact:         arguments[37],
-        status_option:          arguments[38],
-        toggle_chats:           arguments[39],
-        toolbar:                arguments[40],
-        trimmed_chat:           arguments[41]
+        chatroom_password_form: arguments[8],
+        chatroom_sidebar:       arguments[9],
+        chatrooms_tab:          arguments[10],
+        chats_panel:            arguments[11],
+        choose_status:          arguments[12],
+        contacts_panel:         arguments[13],
+        contacts_tab:           arguments[14],
+        controlbox:             arguments[15],
+        controlbox_toggle:      arguments[16],
+        field:                  arguments[17],
+        form_checkbox:          arguments[18],
+        form_input:             arguments[19],
+        form_select:            arguments[20],
+        group_header:           arguments[21],
+        info:                   arguments[22],
+        login_panel:            arguments[23],
+        login_tab:              arguments[24],
+        message:                arguments[25],
+        new_day:                arguments[26],
+        occupant:               arguments[27],
+        pending_contact:        arguments[28],
+        pending_contacts:       arguments[29],
+        requesting_contact:     arguments[30],
+        requesting_contacts:    arguments[31],
+        room_description:       arguments[32],
+        room_item:              arguments[33],
+        room_panel:             arguments[34],
+        roster:                 arguments[35],
+        roster_item:            arguments[36],
+        select_option:          arguments[37],
+        search_contact:         arguments[38],
+        status_option:          arguments[39],
+        toggle_chats:           arguments[40],
+        toolbar:                arguments[41],
+        trimmed_chat:           arguments[42]
     };
 });