Add basic UI for joining a new MUC

clientapp/pages/main.js

@@ -23,6 +23,7 @@ module.exports = BasePage.extend({
         'click .enableAlerts': 'enableAlerts',
         'click .installFirefox': 'installFirefox',
         'click .addContact': 'handleAddContact',
+        'click .joinMUC': 'handleJoinMUC',
         'dragover': 'handleAvatarChangeDragOver',
         'drop': 'handleAvatarChange',
         'change #uploader': 'handleAvatarChange',
@@ -111,5 +112,18 @@ module.exports = BasePage.extend({
         this.$('#addcontact').val('');
 
         return false;
+    },
+    handleJoinMUC: function (e) {
+        e.preventDefault();
+
+        var mucjid = this.$('#joinmuc').val();
+        me.mucs.add({
+            id: mucjid,
+            name: mucjid,
+            jid: new client.JID(mucjid),
+            nick: me.nick,
+            autoJoin: false
+        });
+        me.mucs.get(mucjid).join();
     }
 });

clientapp/templates.js

@@ -488,7 +488,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><div><h4>Current status</h4><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Add / Approve Contacts</h4><input type="text" id="addcontact" class="inline"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div><div><button class="logout">Logout</button></div></section>');
+        buf.push('<section class="page main"><div><h4>Current status</h4><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Add / Approve Contacts</h4><input type="text" id="addcontact" class="inline"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h4>Join MUC</h4><input type="text" id="joinmuc" class="inline"/><button class="joinMUC">Join</button></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div><div><button class="logout">Logout</button></div></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/main.jade

@@ -18,6 +18,11 @@ section.page.main
     button.addContact Add
     ul#contactrequests
 
+  div
+    h4 Join MUC
+    input(type="text", class="inline")#joinmuc
+    button.joinMUC Join
+
   div
     h4 Desktop Integration
     button.enableAlerts Enable alerts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "otalk.im",
   "description": "Otalk: WebRTC Enabled XMPP Client, in the Browser",
-  "version": "0.0.34",
+  "version": "0.0.38",
   "dependencies": {
     "andlog": "0.0.4",
     "async": "0.2.9",