Merge pull request #842 from Bilb/clearnet

separate update group name and group members dialog (add and remove m…

_locales/en/messages.json

@@ -2204,12 +2204,16 @@
     "message": "Edit Profile",
     "description": "Button action that the user can click to edit their profile"
   },
+  "editGroupName": {
+    "message": "Edit group name",
+    "description": "Button action that the user can click to edit a group name"
+  },
   "createGroupDialogTitle": {
-    "message": "Creating a Private Group Chat",
+    "message": "Creating a Closed Group",
     "description": "Title for the dialog box used to create a new private group"
   },
   "updateGroupDialogTitle": {
-    "message": "Updating a Private Group Chat",
+    "message": "Updating a Closed Group",
     "description":
       "Title for the dialog box used to update an existing private group"
   },
@@ -2529,6 +2533,9 @@
   "noFriendsToAdd": {
     "message": "No friends to add"
   },
+  "noMembersInThisGroup": {
+    "message": "No other members in this group"
+  },
   "noModeratorsToRemove": {
     "message": "no moderators to remove"
   },

js/background.js

@@ -1135,9 +1135,14 @@
       }
     });
 
-    Whisper.events.on('updateGroup', async groupConvo => {
+    Whisper.events.on('updateGroupName', async groupConvo => {
       if (appView) {
-        appView.showUpdateGroupDialog(groupConvo);
+        appView.showUpdateGroupNameDialog(groupConvo);
+      }
+    });
+    Whisper.events.on('updateGroupMembers', async groupConvo => {
+      if (appView) {
+        appView.showUpdateGroupMembersDialog(groupConvo);
       }
     });
 

js/modules/signal.js

@@ -34,8 +34,8 @@ const {
   ConversationHeader,
 } = require('../../ts/components/conversation/ConversationHeader');
 const {
-  SessionChannelSettings,
-} = require('../../ts/components/session/SessionChannelSettings');
+  SessionGroupSettings,
+} = require('../../ts/components/session/SessionGroupSettings');
 const {
   EmbeddedContact,
 } = require('../../ts/components/conversation/EmbeddedContact');
@@ -93,8 +93,11 @@ const {
 } = require('../../ts/components/session/SessionRegistrationView');
 
 const {
-  UpdateGroupDialog,
-} = require('../../ts/components/conversation/UpdateGroupDialog');
+  UpdateGroupNameDialog,
+} = require('../../ts/components/conversation/UpdateGroupNameDialog');
+const {
+  UpdateGroupMembersDialog,
+} = require('../../ts/components/conversation/UpdateGroupMembersDialog');
 const {
   InviteFriendsDialog,
 } = require('../../ts/components/conversation/InviteFriendsDialog');
@@ -278,7 +281,7 @@ exports.setup = (options = {}) => {
     ContactListItem,
     ContactName,
     ConversationHeader,
-    SessionChannelSettings,
+    SessionGroupSettings,
     SettingsView,
     EmbeddedContact,
     Emojify,
@@ -293,7 +296,8 @@ exports.setup = (options = {}) => {
     DevicePairingDialog,
     SessionRegistrationView,
     ConfirmDialog,
-    UpdateGroupDialog,
+    UpdateGroupNameDialog,
+    UpdateGroupMembersDialog,
     InviteFriendsDialog,
     AddModeratorsDialog,
     RemoveModeratorsDialog,

js/views/app_view.js

@@ -228,10 +228,15 @@
       const dialog = new Whisper.CreateGroupDialogView();
       this.el.append(dialog.el);
     },
-    showUpdateGroupDialog(groupConvo) {
-      const dialog = new Whisper.UpdateGroupDialogView(groupConvo);
-      this.el.prepend(dialog.el);
+    showUpdateGroupNameDialog(groupConvo) {
+      const dialog = new Whisper.UpdateGroupNameDialogView(groupConvo);
+      this.el.append(dialog.el);
     },
+    showUpdateGroupMembersDialog(groupConvo) {
+      const dialog = new Whisper.UpdateGroupMembersDialogView(groupConvo);
+      this.el.append(dialog.el);
+    },
+
     showSessionRestoreConfirmation(options) {
       const dialog = new Whisper.ConfirmSessionResetView(options);
       this.el.append(dialog.el);

js/views/conversation_view.js

@@ -244,11 +244,6 @@
           onMoveToInbox: () => {
             this.model.setArchived(false);
           },
-
-          onUpdateGroup: () => {
-            window.Whisper.events.trigger('updateGroup', this.model);
-          },
-
           onLeaveGroup: () => {
             window.Whisper.events.trigger('leaveGroup', this.model);
           },
@@ -276,7 +271,8 @@
           },
         };
       };
-      const getGroupSettingsProp = () => {
+      const getGroupSettingsProps = () => {
+        const ourPK = window.textsecure.storage.user.getNumber();
         const members = this.model.get('members') || [];
 
         return {
@@ -288,6 +284,7 @@
           avatarPath: this.model.getAvatarPath(),
           isGroup: !this.model.isPrivate(),
           isPublic: this.model.isPublic(),
+          isAdmin: this.model.get('groupAdmins').includes(ourPK),
           isRss: this.model.isRss(),
           memberCount: members.length,
 
@@ -303,8 +300,11 @@
             this.$('.conversation-content-right').hide();
           },
 
-          onUpdateGroup: () => {
-            window.Whisper.events.trigger('updateGroup', this.model);
+          onUpdateGroupName: () => {
+            window.Whisper.events.trigger('updateGroupName', this.model);
+          },
+          onUpdateGroupMembers: () => {
+            window.Whisper.events.trigger('updateGroupMembers', this.model);
           },
 
           onLeaveGroup: () => {
@@ -344,12 +344,15 @@
         if (!this.groupSettings) {
           this.groupSettings = new Whisper.ReactWrapperView({
             className: 'group-settings',
-            Component: window.Signal.Components.SessionChannelSettings,
-            props: getGroupSettingsProp(this.model),
+            Component: window.Signal.Components.SessionGroupSettings,
+            props: getGroupSettingsProps(this.model),
           });
           this.$('.conversation-content-right').append(this.groupSettings.el);
+          this.updateGroupSettingsPanel = () =>
+            this.groupSettings.update(getGroupSettingsProps(this.model));
+          this.listenTo(this.model, 'change', this.updateGroupSettingsPanel);
         } else {
-          this.groupSettings.update(getGroupSettingsProp(this.model));
+          this.groupSettings.update(getGroupSettingsProps(this.model));
         }
         this.$('.conversation-content-right').show();
       };

js/views/create_group_dialog_view.js

@@ -47,13 +47,13 @@
     },
   });
 
-  Whisper.UpdateGroupDialogView = Whisper.View.extend({
+  Whisper.UpdateGroupNameDialogView = Whisper.View.extend({
     className: 'loki-dialog modal',
     initialize(groupConvo) {
       this.groupName = groupConvo.get('name');
 
       this.conversation = groupConvo;
-      this.titleText = `${i18n('updateGroupDialogTitle')}: ${this.groupName}`;
+      this.titleText = i18n('updateGroupDialogTitle');
       this.okText = i18n('ok');
       this.cancelText = i18n('cancel');
       this.close = this.close.bind(this);
@@ -106,7 +106,90 @@
     render() {
       this.dialogView = new Whisper.ReactWrapperView({
         className: 'create-group-dialog',
-        Component: window.Signal.Components.UpdateGroupDialog,
+        Component: window.Signal.Components.UpdateGroupNameDialog,
+        props: {
+          titleText: this.titleText,
+          groupName: this.groupName,
+          okText: this.okText,
+          isPublic: this.isPublic,
+          cancelText: this.cancelText,
+          existingMembers: this.existingMembers,
+          isAdmin: this.isAdmin,
+          onClose: this.close,
+          onSubmit: this.onSubmit,
+        },
+      });
+
+      this.$el.append(this.dialogView.el);
+      return this;
+    },
+    onSubmit(newGroupName, members) {
+      const groupId = this.conversation.get('id');
+
+      window.doUpdateGroup(groupId, newGroupName, members);
+    },
+    close() {
+      this.remove();
+    },
+  });
+
+  Whisper.UpdateGroupMembersDialogView = Whisper.View.extend({
+    className: 'loki-dialog modal',
+    initialize(groupConvo) {
+      this.groupName = groupConvo.get('name');
+
+      this.conversation = groupConvo;
+      this.titleText = i18n('updateGroupDialogTitle');
+      this.okText = i18n('ok');
+      this.cancelText = i18n('cancel');
+      this.close = this.close.bind(this);
+      this.onSubmit = this.onSubmit.bind(this);
+      this.isPublic = groupConvo.isPublic();
+
+      const ourPK = textsecure.storage.user.getNumber();
+
+      this.isAdmin = groupConvo.get('groupAdmins').includes(ourPK);
+
+      const convos = window.getConversations().models.filter(d => !!d);
+
+      let existingMembers = groupConvo.get('members') || [];
+
+      // Show a contact if they are our friend or if they are a member
+      const friendsAndMembers = convos.filter(
+        d => existingMembers.includes(d.id) && d.isPrivate() && !d.isMe()
+      );
+      this.friendsAndMembers = _.uniq(friendsAndMembers, true, d => d.id);
+
+      // at least make sure it's an array
+      if (!Array.isArray(existingMembers)) {
+        existingMembers = [];
+      }
+
+      this.existingMembers = existingMembers;
+
+      // public chat settings overrides
+      if (this.isPublic) {
+        // fix the title
+        this.titleText = `${i18n('updatePublicGroupDialogTitle')}: ${
+          this.groupName
+        }`;
+        // I'd much prefer to integrate mods with groupAdmins
+        // but lets discuss first...
+        this.isAdmin = groupConvo.isModerator(
+          window.storage.get('primaryDevicePubKey')
+        );
+        // zero out friendList for now
+        this.friendsAndMembers = [];
+        this.existingMembers = [];
+      }
+
+      this.$el.focus();
+      this.render();
+    },
+    render() {
+      this.dialogView = new Whisper.ReactWrapperView({
+        className: 'create-group-dialog',
+        Component: window.Signal.Components.UpdateGroupMembersDialog,
         props: {
           titleText: this.titleText,
           groupName: this.groupName,
@@ -124,12 +207,12 @@
       this.$el.append(this.dialogView.el);
       return this;
     },
-    onSubmit(newGroupName, newMembers) {
+    onSubmit(groupName, newMembers) {
       const ourPK = textsecure.storage.user.getNumber();
       const allMembers = window.Lodash.concat(newMembers, [ourPK]);
       const groupId = this.conversation.get('id');
 
-      window.doUpdateGroup(groupId, newGroupName, allMembers);
+      window.doUpdateGroup(groupId, groupName, allMembers);
     },
     close() {
       this.remove();

js/views/invite_friends_dialog_view.js

@@ -1,4 +1,4 @@
-/* global Whisper */
+/* global Whisper, _ */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -22,6 +22,8 @@
       this.chatName = convo.get('name');
       this.chatServer = convo.get('server');
       this.channelId = convo.get('channelId');
+      this.isPublic = !!convo.cachedProps.isPublic;
+      this.convo = convo;
 
       this.$el.focus();
       this.render();
@@ -45,14 +47,56 @@
       this.remove();
     },
     submit(pubkeys) {
-      window.sendGroupInvitations(
-        {
-          address: this.chatServer,
-          name: this.chatName,
-          channelId: this.channelId,
-        },
-        pubkeys
-      );
+      // public group chats
+      if (this.isPublic) {
+        window.sendGroupInvitations(
+          {
+            address: this.chatServer,
+            name: this.chatName,
+            channelId: this.channelId,
+          },
+          pubkeys
+        );
+      } else {
+        // private group chats
+        const ourPK = window.textsecure.storage.user.getNumber();
+        let existingMembers = this.convo.get('members') || [];
+        // at least make sure it's an array
+        if (!Array.isArray(existingMembers)) {
+          existingMembers = [];
+        }
+        existingMembers = existingMembers.filter(d => !!d);
+        const newMembers = pubkeys.filter(d => !existingMembers.includes(d));
+
+        if (newMembers.length > 0) {
+          // Do not trigger an update if there is too many members
+          if (
+            newMembers.length + existingMembers.length >
+            window.SMALL_GROUP_SIZE_LIMIT
+          ) {
+            const msg = `${window.i18n('maxGroupMembersError')} ${
+              window.SMALL_GROUP_SIZE_LIMIT
+            }`;
+
+            window.pushToast({
+              title: msg,
+              type: 'error',
+              id: 'tooManyMembers',
+            });
+            return;
+          }
+
+          const allMembers = window.Lodash.concat(existingMembers, newMembers, [
+            ourPK,
+          ]);
+          const uniqMembers = _.uniq(allMembers, true, d => d);
+
+          const groupId = this.convo.get('id');
+          const groupName = this.convo.get('name');
+
+          window.doUpdateGroup(groupId, groupName, uniqMembers);
+        }
+      }
     },
   });
 })();

stylesheets/_session.scss

@@ -802,6 +802,15 @@ label {
   }
 }
 
+.create-group-dialog .session-modal__body {
+  display: flex;
+  flex-direction: column;
+
+  .friend-selection-list {
+    width: unset;
+  }
+}
+
 .session-confirm {
   &-wrapper {
     .session-modal__body .session-modal__centered {