Confirmaton on send, banner when 'unverified'

Not yet using the new APIs, but ready to. Still to do:
- Send sync messages on trust decisions
- Respond to received trust decision sync messages
- Show trust decisions in the conversation history
- In that rare situation where a sent message ends up with a key error
  make it easy to retry the send.

FREEBIE

_locales/en/messages.json

@@ -33,6 +33,52 @@
         }
       }
     },
+    "changedSinceVerifiedMultiple": {
+      "message": "Your safety numbers with multiple group members have changed since you last verified.",
+      "description": "Shown on confirmation dialog when user attempts to send a message"
+    },
+    "changedSinceVerified": {
+      "message": "Your safety number with $name$ has changed since you last verified.",
+      "description": "Shown on confirmation dialog when user attempts to send a message",
+      "placeholders": {
+        "name": {
+          "content": "$1",
+          "example": "Bob"
+        }
+      }
+    },
+    "changedRecentlyMultiple": {
+      "message": "Your safety numbers with multiple group members have changed in the last five seconds.",
+      "description": "Shown on confirmation dialog when user attempts to send a message"
+    },
+    "changedRecently": {
+      "message": "Your safety number with $name$ has changed in the last five seconds.",
+      "description": "Shown on confirmation dialog when user attempts to send a message",
+      "placeholders": {
+        "name": {
+          "content": "$1",
+          "example": "Bob"
+        }
+      }
+    },
+    "sendAnyway": {
+      "message": "Send Anyway",
+      "description": "Used on a warning dialog to specifiy "
+    },
+    "noLongerVerified": {
+      "message": "$name$ is no longer verified. Click to verify.",
+      "description": "Shown in converation banner when user's safety number has changed, but they were previously verified.",
+      "placeholders": {
+        "name": {
+          "content": "$1",
+          "example": "Bob"
+        }
+      }
+    },
+    "multipleNoLongerVerified": {
+      "message": "More than one member of this group is no longer verified. Click to verify.",
+      "description": "Shown in conversation banner when more than one group member's safety number has changed, but they were previously verified."
+    },
     "debugLogExplanation": {
       "message": "This log will be posted publicly online for contributors to view. You may examine and edit it before submitting."
     },

background.html

@@ -60,6 +60,12 @@
     </a>
     {{ expiredWarning }}
   </script>
+  <script type='text/x-tmpl-mustache' id='banner'>
+    <div class='body'>
+      {{ message }}
+      <img class='dismiss' src='/images/x.svg' />
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='toast'>
     {{ toastMessage }}
   </script>
@@ -656,6 +662,7 @@
   <script type='text/javascript' src='js/views/identicon_svg_view.js'></script>
   <script type='text/javascript' src='js/views/settings_view.js'></script>
   <script type="text/javascript" src="js/views/install_view.js"></script>
+  <script type="text/javascript" src="js/views/banner_view.js"></script>
 
   <script type='text/javascript' src='js/wall_clock_listener.js'></script>
   <script type='text/javascript' src='js/rotate_signed_prekey_listener.js'></script>

js/models/conversations.js

@@ -38,6 +38,12 @@
 
     initialize: function() {
         this.ourNumber = textsecure.storage.user.getNumber();
+        // this.verifiedEnum = textsecure.storage.protocol.VerifiedStatus;
+        this.verifiedEnum = {
+            DEFAULT: 0,
+            VERIFIED: 1,
+            UNVERIFIED: 2,
+        };
 
         this.contactCollection = new Backbone.Collection();
         this.messageCollection = new Whisper.MessageCollection([], {
@@ -51,36 +57,71 @@
     },
 
     updateVerified: function() {
-        // TODO: replace this with the real call
+        function checkTrustStore(value) {
-        function checkTrustStore() {
+            return Promise.resolve(value);
-            return Promise.resolve('default');
         }
 
         if (this.isPrivate()) {
             return Promise.all([
-                checkTrustStore(this.id),
+                //textsecure.storage.protocol.getVerified(this.id),
+                checkTrustStore(this.verifiedEnum.UNVERIFIED),
                 this.fetch()
             ]).then(function(results) {
                 var trust = results[0];
                 return this.save({verified: trust});
-            });
+            }.bind(this));
         } else {
             return this.fetchContacts().then(function() {
                 return Promise.all(this.contactCollection.map(function(contact) {
-                    if (contact.id !== this.myNumber) {
+                    if (contact.id !== this.ourNumber) {
                         return contact.updateVerified();
                     }
                 }.bind(this)));
-            }.bind(this));
+            }.bind(this)).then(this.onMemberVerifiedChange.bind(this));
         }
     },
+    setVerifiedDefault: function() {
+        function updateTrustStore() {
+            return Promise.resolve();
+        }
 
+        if (!this.isPrivate()) {
+            throw new Error('You cannot verify a group conversation. ' +
+                            'You must verify individual contacts.');
+        }
+        var DEFAULT = this.verifiedEnum.DEFAULT;
+
+        // return textsecure.storage.protocol.setVerified(this.id, DEFAULT).then(function() {
+        return updateTrustStore(this.id, DEFAULT).then(function() {
+            return this.save({verified: DEFAULT});
+        }.bind(this));
+    },
+    setVerified: function() {
+        function updateTrustStore() {
+            return Promise.resolve();
+        }
+        var VERIFIED = this.verifiedEnum.VERIFIED;
+
+        if (!this.isPrivate()) {
+            throw new Error('You cannot verify a group conversation. ' +
+                            'You must verify individual contacts.');
+        }
+
+        // return textsecure.storage.protocol.setVerified(this.id, VERIFIED).then(function() {
+        return updateTrustStore(this.id, VERIFIED).then(function() {
+            return this.save({verified: VERIFIED});
+        }.bind(this));
+    },
     isVerified: function() {
         if (this.isPrivate()) {
-            return this.get('verified') === 'verified';
+            return this.get('verified') === this.verifiedEnum.VERIFIED;
         } else {
+            if (!this.contactCollection.length) {
+                return false;
+            }
+
             return this.contactCollection.every(function(contact) {
-                if (contact.id === this.myNumber) {
+                if (contact.id === this.ourNumber) {
                     return true;
                 } else {
                     return contact.isVerified();
@@ -88,27 +129,93 @@
             }.bind(this));
         }
     },
-    isConflict: function() {
+    isUnverified: function() {
         if (this.isPrivate()) {
             var verified = this.get('verified');
-            return verified !== 'verified' && verified !== 'default';
+            return verified !== this.verifiedEnum.VERIFIED && verified !== this.verifiedEnum.DEFAULT;
         } else {
-            return Boolean(this.getConflicts().length);
+            if (!this.contactCollection.length) {
-        }
+                return true;
-    },
+            }
-    getConflicts: function() {
+
-        if (this.isPrivate()) {
+            return this.contactCollection.any(function(contact) {
-            return this.isConflict() ? [this] : [];
+                if (contact.id === this.ourNumber) {
-        } else {
-            return this.contactCollection.filter(function(contact) {
-                if (contact.id === this.myNumber) {
                     return false;
                 } else {
-                    return contact.isConflict();
+                    return contact.isUnverified();
                 }
             }.bind(this));
         }
     },
+    getUnverified: function() {
+        if (this.isPrivate()) {
+            return this.isUnverified() ? new Backbone.Collection([this]) : new Backbone.Collection();
+        } else {
+            return new Backbone.Collection(this.contactCollection.filter(function(contact) {
+                if (contact.id === this.ourNumber) {
+                    return false;
+                } else {
+                    return contact.isUnverified();
+                }
+            }.bind(this)));
+        }
+    },
+    isUntrusted: function() {
+        function getFromTrustStore() {
+            return Promise.resolve(true);
+        }
+
+        if (this.isPrivate()) {
+            // return textsecure.storage.protocol.isUntrusted(this.id);
+            return getFromTrustStore(this.id);
+        } else {
+            if (!this.contactCollection.length) {
+                return Promise.resolve(false);
+            }
+
+            return Promise.all(this.contactCollection.map(function(contact) {
+                if (contact.id === this.ourNumber) {
+                    return false;
+                } else {
+                    return contact.isUntrusted();
+                }
+            }.bind(this))).then(function(results) {
+                return _.any(results, function(result) {
+                    return result;
+                });
+            });
+        }
+    },
+    getUntrusted: function() {
+        // This is a bit ugly because isUntrusted() is async. Could do the work to cache
+        //   it locally, but we really only need it for this call.
+        if (this.isPrivate()) {
+            return this.isUntrusted().then(function(untrusted) {
+                if (untrusted) {
+                    return new Backbone.Collection([this]);
+                }
+
+                return new Backbone.Collection();
+            }.bind(this));
+        } else {
+            return Promise.all(this.contactCollection.map(function(contact) {
+                if (contact.id === this.ourNumber) {
+                    return [false, contact];
+                } else {
+                    return Promise.all([this.isUntrusted(), contact]);
+                }
+            }.bind(this))).then(function(results) {
+                results = _.filter(results, function(result) {
+                    var untrusted = result[0];
+                    return untrusted;
+                });
+                return new Backbone.Collection(_.map(results, function(result) {
+                    var contact = result[1];
+                    return contact;
+                }));
+            }.bind(this));
+        }
+    },
     onMemberVerifiedChange: function() {
         // If the verified state of a member changes, our aggregate state changes.
         // We trigger both events to replicate the behavior of Backbone.Model.set()
@@ -116,15 +223,10 @@
         this.trigger('change');
     },
     toggleVerified: function() {
-        if (!this.isPrivate()) {
-            throw new Error('You cannot verify a group conversation. ' +
-                            'You must verify individual contacts.');
-        }
-
         if (this.isVerified()) {
-            this.save({verified: 'default'});
+            return this.setVerifiedDefault();
         } else {
-            this.save({verified: 'verified'});
+            return this.setVerified();
         }
     },
 

js/views/banner_view.js

@@ -0,0 +1,36 @@
+/*
+ * vim: ts=4:sw=4:expandtab
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.BannerView = Whisper.View.extend({
+        className: 'banner',
+        templateName: 'banner',
+        events: {
+            'click .dismiss': 'onDismiss',
+            'click .body': 'onClick',
+        },
+        initialize: function(options) {
+            this.message = options.message;
+            this.callbacks = {
+                onDismiss: options.onDismiss,
+                onClick: options.onClick
+            };
+            this.render();
+        },
+        render_attributes: function() {
+            return {
+                message: this.message
+            };
+        },
+        onDismiss: function(e) {
+            this.callbacks.onDismiss();
+            e.stopPropagation();
+        },
+        onClick: function() {
+            this.callbacks.onClick();
+        }
+    });
+})();

js/views/confirmation_dialog_view.js

@@ -10,8 +10,13 @@
         templateName: 'confirmation-dialog',
         initialize: function(options) {
             this.message = options.message;
+
             this.resolve = options.resolve;
+            this.okText = options.okText || i18n('ok');
+
             this.reject = options.reject;
+            this.cancelText = options.cancelText || i18n('cancel');
+
             this.render();
         },
         events: {
@@ -21,8 +26,8 @@
         render_attributes: function() {
             return {
                 message: this.message,
-                cancel: i18n('cancel'),
+                cancel: this.cancelText,
-                ok: i18n('ok')
+                ok: this.okText
             };
         },
         ok: function() {

js/views/conversation_view.js

@@ -59,6 +59,9 @@
 
     Whisper.ConversationTitleView = Whisper.View.extend({
         templateName: 'conversation-title',
+        initialize: function() {
+            this.listenTo(this.model, 'change', this.render);
+        },
         render_attributes: function() {
             return {
                 verified: this.model.isVerified(),
@@ -93,9 +96,8 @@
         },
         initialize: function(options) {
             this.listenTo(this.model, 'destroy', this.stopListening);
-            this.listenTo(this.model, 'change', this.updateTitle);
+            this.listenTo(this.model, 'change:verified', this.onVerifiedChange);
             this.listenTo(this.model, 'change:color', this.updateColor);
-            this.listenTo(this.model, 'change:name', this.updateTitle);
             this.listenTo(this.model, 'newmessage', this.addMessage);
             this.listenTo(this.model, 'delivered', this.updateMessage);
             this.listenTo(this.model, 'opened', this.onOpened);
@@ -154,14 +156,14 @@
         },
 
         events: {
-            'submit .send': 'sendMessage',
+            'submit .send': 'checkUnverifiedSendMessage',
             'input .send-message': 'updateMessageFieldSize',
             'keydown .send-message': 'updateMessageFieldSize',
             'click .destroy': 'destroyMessages',
             'click .end-session': 'endSession',
             'click .leave-group': 'leaveGroup',
             'click .update-group': 'newGroupUpdate',
-            'click .show-identity': 'showIdentity',
+            'click .show-identity': 'showSafetyNumber',
             'click .show-members': 'showMembers',
             'click .conversation-menu .hamburger': 'toggleMenu',
             'click .openInbox' : 'openInbox',
@@ -185,9 +187,59 @@
             'show-identity': 'showIdentity'
         },
 
-        updateTitle: function() {
+
-            this.titleView.render();
+        markAllAsVerifiedDefault: function(unverified) {
+            return Promise.all(unverified.map(function(contact) {
+                return contact.setVerifiedDefault();
+            }));
         },
+
+        openSafetyNumberScreens: function(unverified) {
+            if (unverified.length === 1) {
+                this.showSafetyNumber(null, unverified.at(0));
+                return;
+            }
+
+            // TODO: need to be able to specify string to override group list header
+            this.showMembers(null, unverified);
+        },
+
+        onVerifiedChange: function() {
+            if (this.model.isUnverified()) {
+                var unverified = this.model.getUnverified();
+                var message;
+                if (unverified.length > 1) {
+                    message = i18n('multipleNoLongerVerified');
+                } else {
+                    message = i18n('noLongerVerified', unverified.at(0).getTitle());
+                }
+
+                // Need to re-add, since unverified set may have changed
+                if (this.banner) {
+                    this.banner.remove();
+                    this.banner = null;
+                }
+
+                this.banner = new Whisper.BannerView({
+                    message: message,
+                    onDismiss: function() {
+                        this.markAllAsVerifiedDefault(unverified);
+                    }.bind(this),
+                    onClick: function() {
+                        this.openSafetyNumberScreens(unverified);
+                    }.bind(this)
+                });
+
+                var container = this.$('.discussion-container');
+                container.append(this.banner.el);
+            } else if (this.banner) {
+                this.banner.remove();
+                this.banner = null;
+
+                // TODO: Is there anything else we should do here? make messages re-send-able?
+            }
+        },
+
         enableDisappearingMessages: function() {
             if (!this.model.get('expireTimer')) {
                 this.model.updateExpirationTimer(
@@ -257,6 +309,15 @@
             this.$el.trigger('force-resize');
             this.focusMessageField();
 
+            // TODO: do a fetch of all profiles to get the latest identity keys, then:
+            // We have a number of async things happening here:
+            //   1. we need to get contacts before we do anything with groups
+            //   2. we need to get profile information for each contact
+            //   3. we need to get all messages for conversation
+            //   4. we need to get updated verified information for each contact
+            //   5. we perhaps need to throw up the banner if in unverified state
+            this.model.updateVerified().then(this.onVerifiedChange.bind(this));
+
             if (this.inProgressFetch) {
                 this.inProgressFetch.then(this.updateUnread.bind(this));
             } else {
@@ -437,16 +498,6 @@
             this.model.messageCollection.add(message, {merge: true});
         },
 
-        showMembers: function() {
-            return this.model.fetchContacts().then(function() {
-                var view = new Whisper.GroupMemberList({
-                    model: this.model,
-                    listenBack: this.listenBack.bind(this)
-                });
-                this.listenBack(view);
-            }.bind(this));
-        },
-
         openInbox: function() {
             openInbox();
         },
@@ -517,7 +568,19 @@
             }
         },
 
-        showIdentity: function(ev, model) {
+        showMembers: function(e, members) {
+            members = members || this.model.contactCollection;
+
+            var view = new Whisper.GroupMemberList({
+                model: members,
+                // we pass this in to allow nexted panels
+                listenBack: this.listenBack.bind(this)
+            });
+
+            this.listenBack(view);
+        },
+
+        showSafetyNumber: function(e, model) {
             if (!model && this.model.isPrivate()) {
                 model = this.model;
             }
@@ -601,6 +664,68 @@
             this.$('.menu-list').hide();
         },
 
+        showSendConfirmationDialog: function(e, contacts) {
+            var message;
+            var isUnverified = this.model.isUnverified();
+
+            if (contacts.length > 1) {
+                if (isUnverified) {
+                    message = i18n('changedSinceVerifiedMultiple');
+                } else {
+                    message = i18n('changedRecentlyMultiple');
+                }
+            } else {
+                if (isUnverified) {
+                    message = i18n('changedSinceVerified', this.model.getTitle());
+                } else {
+                    message = i18n('changedRecently', this.model.getTitle());
+                }
+            }
+
+            var dialog = new Whisper.ConfirmationDialogView({
+                message: message,
+                okText: i18n('sendAnyway'),
+                resolve: function() {
+                    this.checkUnverifiedSendMessage(e, {force: true});
+                }.bind(this),
+                reject: function() {
+                    // do nothing
+                }
+            });
+            this.$el.prepend(dialog.el);
+        },
+
+        checkUnverifiedSendMessage: function(e, options) {
+            options = options || {};
+            _.defaults(options, {force: false});
+
+            var contacts = this.model.getUnverified();
+            if (!contacts.length) {
+                return this.checkUntrustedSendMessage(e, options);
+            }
+
+            if (options.force) {
+                return this.markAllAsVerifiedDefault(contacts).then(function() {
+                    this.checkUnverifiedSendMessage(e, options);
+                }.bind(this));
+            }
+
+            this.showSendConfirmationDialog(e, contacts);
+        },
+
+        checkUntrustedSendMessage: function(e, options) {
+            options = options || {};
+            _.defaults(options, {force: false});
+
+            this.model.getUntrusted().then(function(contacts) {
+                if (!contacts.length || options.force) {
+                    return this.sendMessage(e);
+                }
+
+                this.showSendConfirmationDialog(e, contacts);
+            }.bind(this));
+        },
+
         sendMessage: function(e) {
             this.removeLastSeenIndicator();
 

js/views/group_member_list_view.js

@@ -15,16 +15,16 @@
         templateName: 'group-member-list',
         initialize: function(options) {
             this.render();
-            console.log('GroupMemberList', options);
 
             this.member_list_view = new Whisper.ContactListView({
-                collection: this.model.contactCollection,
+                collection: this.model,
                 className: 'members',
                 toInclude: {
                     listenBack: options.listenBack
                 }
             });
             this.member_list_view.render();
+
             this.$('.container').append(this.member_list_view.el);
         },
         render_attributes: {

js/views/key_verification_view.js

@@ -75,7 +75,6 @@
             var yourSafetyNumberWith = i18n(
                 'yourSafetyNumberWith', this.model.getTitle()
             );
-            console.log('this.model',this.model);
             var verifyButton = this.model.isVerified() ? i18n('markAsNotVerified') : i18n('verify');
 
             return {

stylesheets/_global.scss

@@ -334,6 +334,35 @@ $avatar-size: 44px;
     display: none;
   }
 }
+
+.banner {
+  // maybe make the top offset smaller here, or smaller in the iOS theme?
+  // what's the right color?
+  background-color: orange;
+  color: black;
+
+  position: absolute;
+  top: 25px;
+  right: 30px;
+  left: 30px;
+
+  padding: 5px 25px 5px 10px;
+
+  text-align: center;
+  border-radius: 10px;
+
+  cursor: pointer;
+
+  .dismiss {
+    position: absolute;
+    right: 3px;
+    top: 3px;
+
+    height: 20px;
+    width: 20px;
+  }
+}
+
 .contact-details {
   $left-margin: 8px;
 

stylesheets/_ios.scss

@@ -29,6 +29,10 @@ $ios-border-color: rgba(0,0,0,0.1);
       }
     }
   }
+  .banner {
+    top: 15px;
+  }
+
   .tool-bar {
     float: left;
     padding: 15px;

stylesheets/manifest.css

@@ -327,6 +327,24 @@ button.hamburger {
   .contact:last-child::after {
     display: none; }
 
+.banner {
+  background-color: orange;
+  color: black;
+  position: absolute;
+  top: 25px;
+  right: 30px;
+  left: 30px;
+  padding: 5px 25px 5px 10px;
+  text-align: center;
+  border-radius: 10px;
+  cursor: pointer; }
+  .banner .dismiss {
+    position: absolute;
+    right: 3px;
+    top: 3px;
+    height: 20px;
+    width: 20px; }
+
 .contact-details {
   vertical-align: middle;
   display: inline-block;
@@ -1570,6 +1588,8 @@ li.entry .error-icon-container {
       color: white; }
       .ios .gutter .contact.selected .last-timestamp {
         color: white; }
+.ios .banner {
+  top: 15px; }
 .ios .tool-bar {
   float: left;
   padding: 15px; }

test/index.html

@@ -16,18 +16,6 @@
   </div>
   <div id="render-ios" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
   </div>
-  <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
-    <button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
-      <div class='icon'></div>
-    </button>
-  </script>
-  <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
-    <div class='bar'>
-      <div class='text'>
-        {{ unreadMessages }}
-      </div>
-    </div>
-  </script>
   <script type='text/x-tmpl-mustache' id='two-column'>
     <div class='gutter'>
         <div class='network-status-container'></div>
@@ -68,12 +56,30 @@
       </div>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
+    <button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
+      <div class='icon'></div>
+    </button>
+  </script>
+  <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
+    <div class='bar'>
+      <div class='text'>
+        {{ unreadMessages }}
+      </div>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='expired_alert'>
     <a target='_blank' href='https://chrome.google.com/webstore/detail/bikioccmkafdpakkkcpdbppfkghcmihk'>
       <button class='upgrade'>{{ upgrade }}</button>
     </a>
     {{ expiredWarning }}
   </script>
+  <script type='text/x-tmpl-mustache' id='banner'>
+    <div class='body'>
+      {{ message }}
+      <img class='dismiss' src='/images/x.svg' />
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='toast'>
     {{ toastMessage }}
   </script>
@@ -541,6 +547,7 @@
   <script type='text/javascript' src='../js/views/settings_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/last_seen_indicator_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/scroll_down_button_view.js' data-cover></script>
+  <script type='text/javascript' src='../js/views/banner_view.js' data-cover></script>
 
   <script type="text/javascript" src="views/whisper_view_test.js"></script>
   <script type="text/javascript" src="views/group_update_view_test.js"></script>