Show help text for unknown contact identity

Adds a new message string "theirIdentityUnknown".

Fixes #576

// FREEBIE

_locales/en/messages.json

@@ -104,6 +104,9 @@
     "yourIdentity": {
         "message": "Your identity (you read):"
     },
+    "theirIdentityUnknown": {
+        "message": "You haven't talked with this contact yet. Their identity will be received with their first message."
+    },
     "deleteMessages": {
         "message": "Delete messages"
     },

background.html

@@ -217,8 +217,12 @@
     </div>
     <div class='container'>
       <p> {{theirIdentity}} </p>
+      <div class='key placeholder'>
+        {{ #their_key_unknown }} <span>{{ their_key_unknown }}</span>{{ /their_key_unknown }}
+      </div>
       <div class='key'>
         {{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
+
       </div>
       <p> {{yourIdentity}} </p>
       <div class='key'>

js/views/key_verification_view.js

@@ -25,13 +25,18 @@
             return octets;
         },
         render_attributes: function() {
-            return {
+            var attributes = {
                 verifyIdentity: i18n('verifyIdentity'),
                 yourIdentity: i18n('yourIdentity'),
                 theirIdentity: i18n('theirIdentity'),
                 your_key: this.splitKey(this.model.your_key),
-                their_key: this.splitKey(this.model.their_key)
             };
+            if(this.model.their_key) {
+                attributes.their_key = this.splitKey(this.model.their_key);
+            } else {
+                attributes.their_key_unknown = i18n('theirIdentityUnknown');
+            }
+            return attributes;
         }
     });
 })();

stylesheets/_conversation.scss

@@ -54,6 +54,10 @@
     padding: 0 1em;
     -webkit-user-select: text;
   }
+  .key.placeholder {
+    font-family: inherit;
+    font-weight: bold;
+  }
   .container {
     height: calc(100% - (#{$header-height} + 5px + 1px + 4px));
   }

stylesheets/manifest.css

@@ -620,6 +620,9 @@ input.search {
     font-family: monospace;
     padding: 0 1em;
     -webkit-user-select: text; }
+  .key-verification .key.placeholder {
+    font-family: inherit;
+    font-weight: bold; }
   .key-verification .container {
     height: calc(100% - (36px + 5px + 1px + 4px)); }