Add rudimentary ui for sending a group update

index.html

@@ -32,6 +32,16 @@
             </div>
             <div id='contacts'></div>
         </div>
+        <script type='text/x-tmpl-mustache' id='new-group-update-form'>
+            <div>
+              <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
+            </div>
+            <div class='group-avatar'>
+              <div><input type='file' name='avatar' class='file-input'></div>
+            </div>
+            <div>Add members: <input name='members' class='members' role=tagsinput></div>
+            <button class='send'>Update</button>
+        </script>
         <script type='text/x-tmpl-mustache' id='conversation'>
             <div class='discussion-container'></div>
             <div class='send-message-area'>
@@ -145,6 +155,7 @@
         <script type="text/javascript" src="js/views/notifications.js"></script>
         <script type="text/javascript" src="js/views/file_input_view.js"></script>
         <script type="text/javascript" src="js/views/list_view.js"></script>
+        <script type="text/javascript" src="js/views/new_group_update_view.js"></script>
         <script type="text/javascript" src="js/views/group_update_view.js"></script>
         <script type="text/javascript" src="js/views/attachment_view.js"></script>
         <script type="text/javascript" src="js/views/message_view.js"></script>

js/libtextsecure.js

@@ -8319,6 +8319,34 @@ window.textsecure.messaging = function() {
         }
     }
 
+    self.updateGroup = function(groupId, name, avatar, numbers) {
+        var proto = new textsecure.protobuf.PushMessageContent();
+        proto.group = new textsecure.protobuf.PushMessageContent.GroupContext();
+
+        proto.group.id = toArrayBuffer(groupId);
+        proto.group.type = textsecure.protobuf.PushMessageContent.GroupContext.Type.UPDATE;
+        proto.group.name = name;
+
+        var numbers = textsecure.storage.groups.addNumbers(groupId, numbers);
+        if (numbers === undefined) {
+            return new Promise(function(resolve, reject) { reject(new Error("Unknown Group")); });
+        }
+        proto.group.members = numbers;
+
+        if (avatar !== undefined) {
+            return makeAttachmentPointer(avatar).then(function(attachment) {
+                proto.group.avatar = attachment;
+                return sendGroupProto(numbers, proto).then(function() {
+                    return proto.group.id;
+                });
+            });
+        } else {
+            return sendGroupProto(numbers, proto).then(function() {
+                return proto.group.id;
+            });
+        }
+    }
+
     self.addNumberToGroup = function(groupId, number) {
         var proto = new textsecure.protobuf.PushMessageContent();
         proto.group = new textsecure.protobuf.PushMessageContent.GroupContext();

js/views/conversation_view.js

@@ -38,13 +38,26 @@
 
             if (this.model.get('type') === 'group') {
                 this.$el.addClass('group');
+                this.$el.find('.send-message-area').append($('<button>').addClass('new-group-update').text('Update group'));
             }
         },
 
         events: {
             'submit .send': 'sendMessage',
             'close': 'remove',
-            'click .destroy': 'destroyMessages'
+            'click .destroy': 'destroyMessages',
+            'click .new-group-update': 'newGroupUpdate'
+        },
+
+        newGroupUpdate: function() {
+            if (!this.newGroupUpdateView) {
+                this.newGroupUpdateView = new Whisper.NewGroupUpdateView({
+                    model: this.model
+                });
+            } else {
+                this.newGroupUpdateView.delegateEvents();
+            }
+            this.newGroupUpdateView.render().$el.insertBefore(this.view.el);
         },
 
         destroyMessages: function(e) {

js/views/new_group_update_view.js

@@ -0,0 +1,61 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+    'use strict';
+
+    window.Whisper = window.Whisper || {};
+
+    Whisper.NewGroupUpdateView = Backbone.View.extend({
+        tagName:   "div",
+        className: "new-group-update-form",
+        initialize: function(options) {
+            this.template = $('#new-group-update-form').html();
+            Mustache.parse(this.template);
+            this.$el.html(
+                Mustache.render(this.template, this.model.attributes)
+            );
+            this.avatarInput = new Whisper.FileInputView({
+                el: this.$el.find('.group-avatar')
+            });
+
+            if (this.model.attributes.avatar) {
+                new Whisper.AttachmentView({
+                    model: this.model.attributes.avatar
+                }).render().$el.addClass('preview').prependTo(this.avatarInput.el);
+            }
+
+        },
+        events: {
+            'click .send': 'send'
+        },
+        send: function() {
+            return this.avatarInput.getFiles().then(function(avatarFiles) {
+                this.model.save({
+                    name: this.$el.find('.name').val(),
+                    avatar: avatarFiles[0],
+                    members: _.union(this.model.get('members'), this.$el.find('.members').val().split(','))
+                });
+                textsecure.messaging.updateGroup(
+                    this.model.id,
+                    this.model.get('name'),
+                    this.model.get('avatar'),
+                    this.model.get('members')
+                );
+                this.remove();
+            }.bind(this));
+        }
+    });
+})();

libtextsecure/sendmessage.js

@@ -339,6 +339,34 @@ window.textsecure.messaging = function() {
         }
     }
 
+    self.updateGroup = function(groupId, name, avatar, numbers) {
+        var proto = new textsecure.protobuf.PushMessageContent();
+        proto.group = new textsecure.protobuf.PushMessageContent.GroupContext();
+
+        proto.group.id = toArrayBuffer(groupId);
+        proto.group.type = textsecure.protobuf.PushMessageContent.GroupContext.Type.UPDATE;
+        proto.group.name = name;
+
+        var numbers = textsecure.storage.groups.addNumbers(groupId, numbers);
+        if (numbers === undefined) {
+            return new Promise(function(resolve, reject) { reject(new Error("Unknown Group")); });
+        }
+        proto.group.members = numbers;
+
+        if (avatar !== undefined) {
+            return makeAttachmentPointer(avatar).then(function(attachment) {
+                proto.group.avatar = attachment;
+                return sendGroupProto(numbers, proto).then(function() {
+                    return proto.group.id;
+                });
+            });
+        } else {
+            return sendGroupProto(numbers, proto).then(function() {
+                return proto.group.id;
+            });
+        }
+    }
+
     self.addNumberToGroup = function(groupId, number) {
         var proto = new textsecure.protobuf.PushMessageContent();
         proto.group = new textsecure.protobuf.PushMessageContent.GroupContext();