From 31bf05e14aee07cd94835bada16a5e2c14e3f152 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Fri, 16 Jun 2017 16:05:29 -0700
Subject: [PATCH] Add verified state summary to top of safety number screen

FREEBIE
---
 _locales/en/messages.json         | 22 +++++++++++++++++++++-
 background.html                   |  9 +++++++++
 js/views/key_verification_view.js | 11 +++++++----
 stylesheets/_conversation.scss    | 22 +++++++++++++++++++++-
 stylesheets/android-dark.scss     |  8 ++++++++
 stylesheets/manifest.css          | 24 ++++++++++++++++++++++++
 test/index.html                   |  9 +++++++++
 7 files changed, 99 insertions(+), 6 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 508baf3c1..4a88c0261 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -87,7 +87,7 @@
     },
     "sendAnyway": {
       "message": "Send Anyway",
-      "description": "Used on a warning dialog to specifiy "
+      "description": "Used on a warning dialog to make it clear that it might be risky to send the message."
     },
     "noLongerVerified": {
       "message": "$name$ is no longer verified. Click to show.",
@@ -136,6 +136,26 @@
     "verify": {
       "message": "Verify"
     },
+    "isVerified": {
+      "message": "$name$ is verified.",
+      "description": "Summary state shown at top of the safety number screen if user has verified contact.",
+      "placeholders": {
+        "name": {
+          "content": "$1",
+          "example": "Bob"
+        }
+      }
+    },
+    "isNotVerified": {
+      "message": "$name$ is not verified.",
+      "description": "Summary state shown at top of the safety number screen if user has not verified contact.",
+      "placeholders": {
+        "name": {
+          "content": "$1",
+          "example": "Bob"
+        }
+      }
+    },
     "verified": {
       "message": "Verified"
     },
diff --git a/background.html b/background.html
index 8acc6f9a8..e85ee750f 100644
--- a/background.html
+++ b/background.html
@@ -335,6 +335,15 @@
   </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
     <div class='container'>
+      <div class='summary'>
+        {{ #isVerified }}
+          <span class='icon verified'></span>
+        {{ /isVerified }}
+        {{ ^isVerified }}
+          <span class='icon shield'></span>
+        {{ /isVerified }}
+        {{ verifiedStatus }}
+      </div>
       {{ ^has_their_key }}
         <div class='placeholder'>{{ their_key_unknown }}</div>
       {{ /has_their_key }}
diff --git a/js/views/key_verification_view.js b/js/views/key_verification_view.js
index 9ea4cec3d..5f7fb4c39 100644
--- a/js/views/key_verification_view.js
+++ b/js/views/key_verification_view.js
@@ -72,10 +72,11 @@
             for (var i = 0; i < s.length; i += 5) {
                 chunks.push(s.substring(i, i+5));
             }
-            var yourSafetyNumberWith = i18n(
-                'yourSafetyNumberWith', this.model.getTitle()
-            );
-            var verifyButton = this.model.isVerified() ? i18n('markAsNotVerified') : i18n('verify');
+            var name = this.model.getTitle();
+            var yourSafetyNumberWith = i18n('yourSafetyNumberWith', name);
+            var isVerified = this.model.isVerified();
+            var verifyButton = isVerified ? i18n('markAsNotVerified') : i18n('verify');
+            var verifiedStatus = isVerified ? i18n('isVerified', name) : i18n('isNotVerified', name);
 
             return {
                 learnMore            : i18n('learnMore'),
@@ -85,6 +86,8 @@
                 verifyButton         : verifyButton,
                 has_their_key        : this.their_key !== undefined,
                 chunks               : chunks,
+                isVerified           : isVerified,
+                verifiedStatus       : verifiedStatus
             };
         }
     });
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index b04a96754..44e398be5 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -83,6 +83,25 @@
     font-size: $font-size-small;
   }
 
+  .summary {
+    margin: 10px 0;
+    text-align: center;
+  }
+
+  .icon {
+    height: 1.25em;
+    width: 1.25em;
+    vertical-align: text-bottom;
+    display: inline-block;
+
+    &.verified {
+      @include color-svg('/images/verified-check.svg', $grey_d);
+    }
+    &.shield {
+      @include color-svg('/images/shield.svg', $grey_d);
+    }
+  }
+
   .key, .placeholder {
     padding: 0 1em;
     -webkit-user-select: text;
@@ -124,6 +143,8 @@
     font-weight: bold;
     padding: 10px;
   }
+
+
 }
 
 .message-detail {
@@ -253,7 +274,6 @@ li.entry .error-icon-container {
   height: $error-icon-size;
   position: relative;
   @include color-svg('/images/warning.svg', red);
-
 }
 
 .group {
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index 98832a2dc..0ccde9275 100644
--- a/stylesheets/android-dark.scss
+++ b/stylesheets/android-dark.scss
@@ -45,6 +45,14 @@ $text-dark_l2: darken($text-dark, 30%);
     background-color: $grey-dark_l4;
     border-color: $grey-dark_l2;
   }
+  .key-verification .icon {
+    &.verified {
+      @include color-svg('/images/verified-check.svg', $text-dark);
+    }
+    &.shield {
+      @include color-svg('/images/shield.svg', $text-dark);
+    }
+  }
   .menu-list {
     background-color: $grey-dark_l2;
     color: $text-dark;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index be6610403..e5a09d1e6 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1084,6 +1084,22 @@ input.search {
   display: block;
   margin: 10px 0;
   font-size: 0.92857em; }
+.key-verification .summary {
+  margin: 10px 0;
+  text-align: center; }
+.key-verification .icon {
+  height: 1.25em;
+  width: 1.25em;
+  vertical-align: text-bottom;
+  display: inline-block; }
+  .key-verification .icon.verified {
+    -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #454545; }
+  .key-verification .icon.shield {
+    -webkit-mask: url("/images/shield.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #454545; }
 .key-verification .key, .key-verification .placeholder {
   padding: 0 1em;
   -webkit-user-select: text; }
@@ -2003,6 +2019,14 @@ li.entry .error-icon-container {
   .android-dark .key-verification .key {
     background-color: #030303;
     border-color: #292929; }
+  .android-dark .key-verification .icon.verified {
+    -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #CCCCCC; }
+  .android-dark .key-verification .icon.shield {
+    -webkit-mask: url("/images/shield.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #CCCCCC; }
   .android-dark .menu-list {
     background-color: #292929;
     color: #CCCCCC; }
diff --git a/test/index.html b/test/index.html
index 10528c611..763a727fa 100644
--- a/test/index.html
+++ b/test/index.html
@@ -321,6 +321,15 @@
   </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
     <div class='container'>
+      <div class='summary'>
+        {{ #isVerified }}
+          <span class='icon verified'></span>
+        {{ /isVerified }}
+        {{ ^isVerified }}
+          <span class='icon shield'></span>
+        {{ /isVerified }}
+        {{ verifiedStatus }}
+      </div>
       {{ ^has_their_key }}
         <div class='placeholder'>{{ their_key_unknown }}</div>
       {{ /has_their_key }}