Let the user choose their nick after opening a chat room

This change is with an eye on supporting reserved nicknames, in which case the
user who has a reserved nickname won't have to choose a nick upon joining a
room.

converse.js

@@ -130,6 +130,7 @@ require.config({
         "chatroom":                 "src/templates/chatroom",
         "chatroom_form":            "src/templates/chatroom_form",
         "chatroom_password_form":   "src/templates/chatroom_password_form",
+        "chatroom_nickname_form":   "src/templates/chatroom_nickname_form",
         "chatroom_sidebar":         "src/templates/chatroom_sidebar",
         "chatrooms_tab":            "src/templates/chatrooms_tab",
         "chats_panel":              "src/templates/chats_panel",

css/converse.css

@@ -759,7 +759,7 @@
     margin: 0.5em 0 0.2em; }
   #conversejs .pure-form fieldset {
     margin: 0;
-    padding: 0.35em 0 0.75em;
+    padding: 0.35em 0 0.35em;
     border: 0; }
   #conversejs .pure-form legend {
     display: block;
@@ -1951,6 +1951,9 @@
   #conversejs #converse-roster span.pending-contact-name {
     width: 80%; }
 
+#conversejs .add-chatroom input[type="submit"],
+#conversejs .add-chatroom input[type="button"] {
+  margin: 0.3em 0; }
 #conversejs .chat-head-chatroom {
   background-color: #E76F51; }
   #conversejs .chat-head-chatroom .chatroom-topic {

sass/_chatrooms.scss

@@ -1,4 +1,11 @@
 #conversejs {
+    .add-chatroom {
+        input[type="submit"],
+        input[type="button"] {
+            margin: 0.3em 0;
+        }
+    }
+
     .chat-head-chatroom {
         background-color: $chatroom-head-color;
 

sass/pure/_forms.scss

@@ -166,7 +166,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 }
 .pure-form fieldset {
     margin: 0;
-    padding: 0.35em 0 0.75em;
+    padding: 0.35em 0 0.35em;
     border: 0;
 }
 .pure-form legend {

src/converse-muc.js

@@ -204,7 +204,13 @@
                     this.occupantsview.model.fetch({add:true});
                     _.each(['member', 'owner', 'admin'], this.fetchMembersList.bind(this));
 
-                    this.join(null, {'maxstanzas': converse.muc_history_max_stanzas});
+                    var nick = this.model.get('nick');
+                    if (!nick) {
+                        this.renderNicknameForm();
+                    } else {
+                        this.join(null, {'maxstanzas': converse.muc_history_max_stanzas});
+                    }
+
                     this.fetchMessages().insertIntoDOM();
                     // XXX: adding the event below to the events map above doesn't work.
                     // The code that gets executed because of that looks like this:
@@ -725,11 +731,39 @@
                     );
                 },
 
+                submitNickname: function (ev) {
+                    ev.preventDefault();
+                    var $nick = this.$el.find('input[name=nick]');
+                    var nick = $nick.val();
+                    if (!nick) {
+                        $nick.addClass('error');
+                        return;
+                    }
+                    else {
+                        $nick.removeClass('error');
+                    }
+                    this.model.save({'nick': nick});
+                    this.$el.find('.chatroom-form-container').replaceWith('<span class="spinner centered"/>');
+                    this.join(null, {'maxstanzas': converse.muc_history_max_stanzas});
+                },
+
+                renderNicknameForm: function () {
+                    this.$('.chatroom-body').children().addClass('hidden');
+                    this.$('span.centered.spinner').remove();
+                    this.$('.chatroom-body').append(
+                        converse.templates.chatroom_nickname_form({
+                            heading: __('Please choose your nickname'),
+                            label_nickname: __('Nickname'),
+                            label_join: __('Enter room')
+                        }));
+                    this.$('.chatroom-form').on('submit', this.submitNickname.bind(this));
+                },
+
                 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.join(password);
+                    this.join(password, {'maxstanzas': converse.muc_history_max_stanzas});
                 },
 
                 renderPasswordForm: function () {
@@ -909,6 +943,23 @@
                     }
                 },
 
+                hideSpinner: function () {
+                    /* Check if the spinner is being shown and if so, hide it.
+                     * Also make sure then that the chat area and occupants
+                     * list are both visible.
+                     */
+                    var that = this;
+                    var $spinner = this.$el.find('.spinner');
+                    if ($spinner.length) {
+                        $spinner.hide(function () {
+                            $(this).remove();
+                            that.$el.find('.chat-area').removeClass('hidden');
+                            that.$el.find('.occupants').removeClass('hidden');
+                        });
+                    }
+                    return this;
+                },
+
                 onChatRoomPresence: function (pres) {
                     var $presence = $(pres), is_self;
                     var nick = this.model.get('nick');
@@ -921,7 +972,7 @@
                         if (this.model.get('connection_status') !== Strophe.Status.CONNECTED) {
                             this.model.set('connection_status', Strophe.Status.CONNECTED);
                         }
-                        this.showStatusMessages(pres, is_self);
+                        this.hideSpinner().showStatusMessages(pres, is_self);
                     }
                     this.occupantsview.updateOccupantsOnPresence(pres);
                 },
@@ -1408,13 +1459,8 @@
                     var name, $name,
                         server, $server,
                         jid,
-                        $nick = this.$el.find('input.new-chatroom-nick'),
-                        nick = $nick.val(),
                         chatroom;
 
-                    if (!nick) { $nick.addClass('error'); }
-                    else { $nick.removeClass('error'); }
-
                     if (ev.type === 'click') {
                         name = $(ev.target).text();
                         jid = $(ev.target).attr('data-room-jid');
@@ -1435,12 +1481,10 @@
                             return;
                         }
                     }
-                    if (!nick) { return; }
                     chatroom = converse.chatboxviews.showChat({
                         'id': jid,
                         'jid': jid,
                         'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)),
-                        'nick': nick,
                         'type': 'chatroom',
                         'box_id': b64_sha1(jid)
                     });
@@ -1498,7 +1542,7 @@
                                 [Strophe.Status.CONNECTING, Strophe.Status.CONNECTED],
                                 chatroom.get('connection_status'))
                             ) {
-                        converse.chatboxviews.get(room_jid).join(null);
+                        converse.chatboxviews.get(room_jid).join(null, {'maxstanzas': converse.muc_history_max_stanzas});
                     }
                 }
             };

src/converse-templates.js

@@ -9,6 +9,7 @@ define("converse-templates", [
     "tpl!chatroom",
     "tpl!chatroom_form",
     "tpl!chatroom_password_form",
+    "tpl!chatroom_nickname_form",
     "tpl!chatroom_sidebar",
     "tpl!chatrooms_tab",
     "tpl!chats_panel",
@@ -69,49 +70,50 @@ define("converse-templates", [
         chatroom:               arguments[7],
         chatroom_form:          arguments[8],
         chatroom_password_form: arguments[9],
-        chatroom_sidebar:       arguments[10],
-        chatrooms_tab:          arguments[11],
-        chats_panel:            arguments[12],
-        choose_status:          arguments[13],
-        contacts_panel:         arguments[14],
-        contacts_tab:           arguments[15],
-        controlbox:             arguments[16],
-        controlbox_toggle:      arguments[17],
-        field:                  arguments[18],
-        form_captcha:           arguments[19],
-        form_checkbox:          arguments[20],
-        form_input:             arguments[21],
-        form_select:            arguments[22],
-        form_textarea:          arguments[23],
-        form_username:          arguments[24],
-        group_header:           arguments[25],
-        info:                   arguments[26],
-        login_panel:            arguments[27],
-        login_tab:              arguments[28],
-        message:                arguments[29],
-        new_day:                arguments[30],
-        occupant:               arguments[31],
-        pending_contact:        arguments[32],
-        pending_contacts:       arguments[33],
-        register_panel:         arguments[34],
-        register_tab:           arguments[35],
-        registration_form:      arguments[36],
-        registration_request:   arguments[37],
-        requesting_contact:     arguments[38],
-        requesting_contacts:    arguments[39],
-        room_description:       arguments[40],
-        room_item:              arguments[41],
-        room_panel:             arguments[42],
-        roster:                 arguments[43],
-        roster_item:            arguments[44],
-        search_contact:         arguments[45],
-        select_option:          arguments[46],
-        status_option:          arguments[47],
-        toggle_chats:           arguments[48],
-        toolbar:                arguments[49],
-        toolbar_otr:            arguments[50],
-        trimmed_chat:           arguments[51],
-        vcard:                  arguments[52],
-        chatbox_minimize:       arguments[53]
+        chatroom_nickname_form: arguments[10],
+        chatroom_sidebar:       arguments[11],
+        chatrooms_tab:          arguments[12],
+        chats_panel:            arguments[13],
+        choose_status:          arguments[14],
+        contacts_panel:         arguments[15],
+        contacts_tab:           arguments[16],
+        controlbox:             arguments[17],
+        controlbox_toggle:      arguments[18],
+        field:                  arguments[19],
+        form_captcha:           arguments[20],
+        form_checkbox:          arguments[21],
+        form_input:             arguments[22],
+        form_select:            arguments[23],
+        form_textarea:          arguments[24],
+        form_username:          arguments[25],
+        group_header:           arguments[26],
+        info:                   arguments[27],
+        login_panel:            arguments[28],
+        login_tab:              arguments[29],
+        message:                arguments[30],
+        new_day:                arguments[31],
+        occupant:               arguments[32],
+        pending_contact:        arguments[33],
+        pending_contacts:       arguments[34],
+        register_panel:         arguments[35],
+        register_tab:           arguments[36],
+        registration_form:      arguments[37],
+        registration_request:   arguments[38],
+        requesting_contact:     arguments[39],
+        requesting_contacts:    arguments[40],
+        room_description:       arguments[41],
+        room_item:              arguments[42],
+        room_panel:             arguments[43],
+        roster:                 arguments[44],
+        roster_item:            arguments[45],
+        search_contact:         arguments[46],
+        select_option:          arguments[47],
+        status_option:          arguments[48],
+        toggle_chats:           arguments[49],
+        toolbar:                arguments[50],
+        toolbar_otr:            arguments[51],
+        trimmed_chat:           arguments[52],
+        vcard:                  arguments[53],
+        chatbox_minimize:       arguments[54]
     };
 });

src/templates/chatroom_nickname_form.html

@@ -0,0 +1,11 @@
+<div class="chatroom-form-container">
+    <form class="pure-form converse-form chatroom-form">
+        <fieldset>
+            <label>{{heading}}</label>
+            <input type="text" required="required" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
+        </fieldset>
+        <fieldset>
+            <input type="submit" class="pure-button button-primary" name="join" value="{{label_join}}"/>
+        </fieldset>
+    </form>
+</div>

src/templates/room_panel.html

@@ -2,14 +2,11 @@
     <fieldset>
         <label>{{label_room_name}}</label>
         <input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/>
-        <label>{{label_nickname}}</label> <input type="text" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
-        <input type="submit" class="pure-button button-primary" name="join" value="{{label_join}}"/>
-    </fieldset>
-    <fieldset>
         {[ if (server_input_type != 'hidden') { ]}
             <label{{server_label_global_attr}}>{{label_server}}</label>
+            <input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
         {[ } ]}
-        <input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
+        <input type="submit" class="pure-button button-primary" name="join" value="{{label_join}}"/>
         <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
     </fieldset>
 </form>