More templates refactored into separate files.

spec/controlbox.js

@@ -164,7 +164,7 @@
                     expect(this.rosterview.render).toHaveBeenCalled();
                     expect(converse.emit).toHaveBeenCalledWith('onRosterViewUpdated');
                     // Check that they are sorted alphabetically
-                    t = this.rosterview.$el.find('dt#pending-xmpp-contacts').siblings('dd.pending-xmpp-contact').text();
+                    t = this.rosterview.$el.find('dt#pending-xmpp-contacts').siblings('dd.pending-xmpp-contact').find('span').text();
                     expect(t).toEqual(mock.pend_names.slice(0,i+1).sort().join(''));
                 }
             }, converse));
@@ -351,7 +351,7 @@
                     });
                     expect(this.rosterview.render).toHaveBeenCalled();
                     // Check that they are sorted alphabetically
-                    t = this.rosterview.$el.find('dt#xmpp-contact-requests').siblings('dd.requesting-xmpp-contact').text().replace(/AcceptDecline/g, '');
+                    t = this.rosterview.$el.find('dt#xmpp-contact-requests').siblings('dd.requesting-xmpp-contact').children('div').text().replace(/AcceptDecline/g, '');
                     expect(t).toEqual(mock.req_names.slice(0,i+1).sort().join(''));
                     // When a requesting contact is added, the controlbox must
                     // be opened.

src/templates.js

@@ -23,7 +23,18 @@ define("converse-templates", [
     "tpl!src/templates/form_checkbox",
     "tpl!src/templates/field",
     "tpl!src/templates/occupant",
-    "tpl!src/templates/roster_item"
+    "tpl!src/templates/roster_item",
+    "tpl!src/templates/pending_contact",
+    "tpl!src/templates/requesting_contact",
+    "tpl!src/templates/requesting_contacts",
+    "tpl!src/templates/pending_contacts",
+    "tpl!src/templates/contacts",
+    "tpl!src/templates/chat_status",
+    "tpl!src/templates/change_status_message",
+    "tpl!src/templates/choose_status",
+    "tpl!src/templates/status_option",
+    "tpl!src/templates/login_panel",
+    "tpl!src/templates/controlbox_toggle"
 ], function () {
     return {
         action: arguments[0],
@@ -50,6 +61,17 @@ define("converse-templates", [
         form_checkbox: arguments[21],
         field: arguments[22],
         occupant: arguments[23],
-        roster_item: arguments[24]
+        roster_item: arguments[24],
+        pending_contact: arguments[25],
+        requesting_contact: arguments[26],
+        requesting_contacts: arguments[27],
+        pending_contacts: arguments[28],
+        contacts: arguments[29],
+        chat_status: arguments[30],
+        change_status_message: arguments[31],
+        choose_status: arguments[32],
+        status_option: arguments[33],
+        login_panel: arguments[34],
+        controlbox_toggle: arguments[35]
     };
 });

src/templates/change_status_message.html

+<form id="set-custom-xmpp-status">
+    <input type="text" class="custom-xmpp-status" {{status_message}}
+        placeholder="{{label_custom_status}}"/>
+    <button type="submit">{{label_save}}</button>
+</form>

src/templates/chat_status.html

+<div class="xmpp-status">
+    <a class="choose-xmpp-status {{chat_status}}"
+       data-value="{{status_message}}"
+       href="#" title="{{desc_change_status}}">
+
+        <span class="icon-{{chat_status}}"></span>{{status_message}}
+    </a>
+    <a class="change-xmpp-status-message icon-pencil"
+        href="#"
+        title="{{desc_custom_status}}"></a>
+</div>

src/templates/choose_status.html

+<dl id="target" class="dropdown">
+    <dt id="fancy-xmpp-status-select" class="fancy-dropdown"></dt>
+    <dd><ul class="xmpp-status-menu"></ul></dd>
+</dl>

src/templates/contacts.html

+<dt id="xmpp-contacts">{{label_contacts}}</dt>

src/templates/controlbox_toggle.html

+<strong class="conn-feedback">{{label_toggle}}</strong>
+<strong style="display: none" id="online-count">(0)</strong>

src/templates/login_panel.html

+<form id="converse-login">
+    <label>{{label_username}}</label>
+    <input type="username" name="jid">
+    <label>{{label_password}}</label>
+    <input type="password" name="password">
+    <input class="login-submit" type="submit" value="{{label_login}}">
+</form">

src/templates/pending_contact.html

+<span>{{fullname}}</span> <a class="remove-xmpp-contact icon-remove" title="{{desc_remove}}" href="#"></a>

src/templates/pending_contacts.html

+<dt id="pending-xmpp-contacts">{{label_pending_contacts}}</dt>

src/templates/requesting_contact.html

+<div>{{fullname}}</div>
+<button type="button" class="accept-xmpp-request">{{label_accept}}</button>
+<button type="button" class="decline-xmpp-request">{{label_decline}}</button>

src/templates/requesting_contacts.html

+<dt id="xmpp-contact-requests">{{label_contact_requests}}</dt>

src/templates/status_option.html

+<li>
+    <a href="#" class="{{ value }}" data-value="{{ value }}">
+        <span class="icon-{{ value }}"></span>
+        {{ text }}
+    </a>
+</li>