Hook up group creation flow UI

Checkboxes add and remove members as well as exposing the group update
ui. The conversation window is opened after saving the group.

index.html

@@ -59,7 +59,7 @@
               <div class='group-avatar'>
                 <div><input type='file' name='avatar' class='file-input'></div>
               </div>
-              <button>Create group</button>
+              <button class='create-group'>Create group</button>
             </div>
             <div class='results'>
               <div class='new-contact'></div>

js/views/conversation_list_item_view.js

@@ -43,7 +43,10 @@ var Whisper = Whisper || {};
 
     checkbox: function(e) {
         e.stopPropagation();
-        this.$el.trigger('checkbox', {modelId: this.model.id});
+        this.$el.trigger('checkbox', {
+            modelId: this.model.id,
+            checked: e.target.checked
+        });
     },
 
     render: function() {

js/views/inbox_view.js

@@ -52,6 +52,7 @@
             'click .fab': 'showCompose',
             'open #contacts': 'openConversation',
             'open .contacts': 'openConversation',
+            'open .new-conversation': 'openConversation',
             'open .new-contact': 'createConversation',
         },
         openConversation: function(e, data) {

js/views/new_conversation_view.js

@@ -30,7 +30,7 @@ var Whisper = Whisper || {};
               return null;
           }
 
-          return s.toLowerCase().split(/[\s\-_+]+/)
+          return s.toLowerCase().split(/[\s\-_+]+/);
       }
   });
 
@@ -41,6 +41,7 @@ var Whisper = Whisper || {};
         Mustache.parse(this.template);
         this.$el.html($(Mustache.render(this.template)));
         this.$input = this.$el.find('input.new-message');
+        this.$group_update = this.$el.find('.new-group-update-form');
 
         this.typeahead_collection = new typeahead();
         this.typeahead_view = new Whisper.ConversationListView({
@@ -61,18 +62,62 @@ var Whisper = Whisper || {};
                 type: 'private'
             })
         }).render();
+
+        this.newGroupUpdateView = new Whisper.NewGroupUpdateView({
+            model: new Whisper.Conversation({ type: 'group' }),
+            el: this.$group_update
+        });
+        this.group_members = new Whisper.ConversationCollection();
         this.$el.find('.new-contact').append(this.new_contact.el);
     },
 
     events: {
         'change input.new-message': 'filterContacts',
-        'keyup input.new-message': 'filterContacts'
+        'keyup input.new-message': 'filterContacts',
+        'checkbox .contact': 'updateGroup',
+        'click .create-group': 'createGroup'
+    },
+
+    updateGroup: function(e, data) {
+        this.$input.focus();
+        if (data.checked) {
+            this.group_members.add({id: data.modelId});
+        } else {
+            this.group_members.remove({id: data.modelId});
+        }
+        this.group_members
+        if (this.group_members.length) {
+            this.$group_update.show();
+        } else {
+            this.$group_update.hide();
+        }
+    },
+
+    createGroup: function() {
+        return this.newGroupUpdateView.avatarInput.getFiles().then(function(avatarFiles) {
+            var attributes = {
+                type: 'group',
+                name: this.$el.find('.new-group-update-form .name').val(),
+                avatar: avatarFiles[0],
+                members: this.group_members.pluck('id')
+            };
+            return textsecure.messaging.createGroup(
+                attributes.members, attributes.name, attributes.avatar
+            ).then(function(groupId) {
+                var id = getString(groupId);
+                var group = new Whisper.Conversation(attributes);
+                group.save({ id: id, groupId: id }).then(function() {
+                    this.$el.trigger('open', {modelId: id});
+                }.bind(this));
+            }.bind(this));
+        }.bind(this));
     },
 
     reset: function() {
         this.new_contact.$el.hide();
         this.$input.val('').focus();
         this.typeahead_view.collection.reset(this.typeahead_collection.models);
+        this.group_members.reset([]);
     },
 
     filterContacts: function() {

js/views/new_group_update_view.js

@@ -22,11 +22,13 @@
         tagName:   "div",
         className: "new-group-update-form",
         initialize: function(options) {
-            this.template = $('#new-group-update-form').html();
+            if (this.$el.html().length === 0) {
-            Mustache.parse(this.template);
+                this.template = $('#new-group-update-form').html();
-            this.$el.html(
+                Mustache.parse(this.template);
-                Mustache.render(this.template, this.model.attributes)
+                this.$el.html(
-            );
+                    Mustache.render(this.template, this.model.attributes)
+                );
+            }
             this.avatarInput = new Whisper.FileInputView({
                 el: this.$el.find('.group-avatar')
             });