Show call to action on group member list when verifying

FREEBIE

_locales/en/messages.json

@@ -53,6 +53,10 @@
         }
       }
     },
+    "membersNeedingVerification": {
+      "message": "Your safety numbers with these group members have changed since you last verified. Click a group member to see your new safety number with them.",
+      "description": "When there are multiple previously-verified group members with safety number changes, a banner will be shown. The list of contacts with safety number changes is shown, and this text introduces that list."
+    },
     "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"

background.html

@@ -331,7 +331,9 @@
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='group-member-list'>
-    <div class='container'></div>
+    <div class='container'>
+      {{ #summary }} <div class='summary'>{{ summary }}</div>{{ /summary }}
+    </div>
   </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
     <div class='container'>

js/views/conversation_view.js

@@ -208,8 +208,7 @@
                 return;
             }
 
-            // TODO: need to be able to specify string to override group list header
+            this.showMembers(null, unverified, {needVerify: true});
-            this.showMembers(null, unverified);
         },
 
         onVerifiedChange: function() {
@@ -578,13 +577,17 @@
             }
         },
 
-        showMembers: function(e, members) {
+        showMembers: function(e, members, options) {
+            options = options || {};
+            _.defaults(options, {needVerify: false});
+
             members = members || this.model.contactCollection;
 
             var view = new Whisper.GroupMemberList({
                 model: members,
                 // we pass this in to allow nested panels
-                listenBack: this.listenBack.bind(this)
+                listenBack: this.listenBack.bind(this),
+                needVerify: options.needVerify
             });
 
             this.listenBack(view);

js/views/group_member_list_view.js

@@ -10,6 +10,8 @@
         className: 'group-member-list panel',
         templateName: 'group-member-list',
         initialize: function(options) {
+            this.needVerify = options.needVerify;
+
             this.render();
 
             this.member_list_view = new Whisper.ContactListView({
@@ -23,8 +25,16 @@
 
             this.$('.container').append(this.member_list_view.el);
         },
-        render_attributes: {
+        render_attributes: function() {
-            members: i18n('groupMembers')
+            var summary;
+            if (this.needVerify) {
+                summary = i18n('membersNeedingVerification');
+            }
+
+            return {
+                members: i18n('groupMembers'),
+                summary: summary
+            };
         }
     });
 })();

test/index.html

@@ -317,7 +317,9 @@
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='group-member-list'>
-    <div class='container'></div>
+    <div class='container'>
+      {{ #summary }} <div class='summary'>{{ summary }}</div>{{ /summary }}
+    </div>
   </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
     <div class='container'>