Add verified state summary to top of safety number screen

FREEBIE

_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"
     },

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 }}

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
             };
         }
     });

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 {

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;

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; }

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 }}