Add first pass at setting status messages

clientapp/pages/main.js

@@ -13,11 +13,15 @@ module.exports = BasePage.extend({
     srcBindings: {
         avatar: '#avatarChanger img'
     },
+    textBindings: {
+        status: '.status'
+    },
     events: {
         'click .enableAlerts': 'enableAlerts',
         'dragover': 'handleAvatarChangeDragOver',
         'drop': 'handleAvatarChange',
-        'change #uploader': 'handleAvatarChange'
+        'change #uploader': 'handleAvatarChange',
+        'blur .status': 'handleStatusChange'
     },
     initialize: function (spec) {
         me.shouldAskForAlertsPermission = app.notifier.shouldAskPermission();
@@ -74,5 +78,13 @@ module.exports = BasePage.extend({
             };
             fileTracker.readAsDataURL(file);
         }
+    },
+    handleStatusChange: function (e) {
+        var text = e.target.textContent;
+        me.status = text;
+        client.sendPresence({
+            status: text,
+            caps: client.disco.caps
+        });
     }
 });

clientapp/templates.js

@@ -131,7 +131,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><button class="enableAlerts">Enable alerts</button><div id="avatarChanger"><h1>Change Avatar</h1><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><h1>This space intentionally blank</h1></section>');
+        buf.push('<section class="page main"><p>Current status:<span contenteditable="true" class="status"></span></p><div id="avatarChanger"><h1>Change Avatar</h1><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><button class="enableAlerts">Enable alerts</button><h1>This space intentionally blank</h1></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/main.jade

@@ -1,12 +1,16 @@
 section.page.main
-  button.enableAlerts Enable alerts
+
+  p Current status:
+    span.status(contenteditable="true")
 
   div#avatarChanger
-      h1 Change Avatar
-      div.uploadRegion
-          p Drag and drop a new avatar here
-          img
-          form
-              input#uploader(type="file")
+    h1 Change Avatar
+    div.uploadRegion
+      p Drag and drop a new avatar here
+      img
+      form
+        input#uploader(type="file")
+
+  button.enableAlerts Enable alerts
 
   h1 This space intentionally blank