From 16433d661a55f2395326d1c40d15478b625c8d9e Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Fri, 16 Jun 2017 16:48:06 -0700
Subject: [PATCH] Show call to action on group member list when verifying

FREEBIE
---
 _locales/en/messages.json          |  4 ++++
 background.html                    |  4 +++-
 js/views/conversation_view.js      | 11 +++++++----
 js/views/group_member_list_view.js | 14 ++++++++++++--
 test/index.html                    |  4 +++-
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 4a88c02619..523a6cb426 100644
--- a/_locales/en/messages.json
+++ b/_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"
diff --git a/background.html b/background.html
index e85ee750f4..2c13db10aa 100644
--- a/background.html
+++ b/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'>
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 61c1d1c3fa..effe8a7e49 100644
--- a/js/views/conversation_view.js
+++ b/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);
+            this.showMembers(null, unverified, {needVerify: true});
         },
 
         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);
diff --git a/js/views/group_member_list_view.js b/js/views/group_member_list_view.js
index ff4337dc4e..dc2e7c194a 100644
--- a/js/views/group_member_list_view.js
+++ b/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: {
-            members: i18n('groupMembers')
+        render_attributes: function() {
+            var summary;
+            if (this.needVerify) {
+                summary = i18n('membersNeedingVerification');
+            }
+
+            return {
+                members: i18n('groupMembers'),
+                summary: summary
+            };
         }
     });
 })();
diff --git a/test/index.html b/test/index.html
index 763a727fa4..fa1dd9885a 100644
--- a/test/index.html
+++ b/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'>