[WO-179] show pgp fingerprint in writer

src/js/controller/write.js

@@ -6,15 +6,19 @@ define(function(require) {
         aes = require('cryptoLib/aes-cbc'),
         util = require('cryptoLib/util'),
         str = require('js/app-config').string,
-        emailDao;
+        crypto, emailDao;
 
     //
     // Controller
     //
 
     var WriteCtrl = function($scope, $filter) {
+        crypto = appController._crypto;
         emailDao = appController._emailDao;
 
+        // set default value so that the popover height is correct on init
+        $scope.fingerprint = 'XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX';
+
         //
         // Init
         //
@@ -125,6 +129,20 @@ define(function(require) {
             });
         };
 
+        $scope.getFingerprint = function(recipient) {
+            $scope.fingerprint = 'Fingerprint cannot be displayed. Public key not found for that user.';
+
+            if (!recipient.key) {
+                return;
+            }
+
+            var fpr = crypto.getFingerprint(recipient.key.publicKey);
+            var formatted = fpr.slice(0, 4) + ' ' + fpr.slice(4, 8) + ' ' + fpr.slice(8, 12) + ' ' + fpr.slice(12, 16) + ' ' + fpr.slice(16, 20) + ' ' + fpr.slice(20, 24) + ' ' + fpr.slice(24, 28) + ' ' + fpr.slice(28, 32) + ' ' + fpr.slice(32, 36) + ' ' + fpr.slice(36);
+
+            $scope.fingerprint = formatted;
+            $scope.$apply();
+        };
+
         /**
          * Check if it is ok to send an email depending on the invitation state of the addresses
          */

src/sass/components/_popover.scss

@@ -7,7 +7,7 @@
     top: -9999px;
     left: -9999px;
     display: block;
-    z-index: 1010;
+    z-index: 9000;
     max-width: 276px;
     padding: 1px;
     text-align: left;

src/tpl/write.html

@@ -10,13 +10,13 @@
         <p field="to">
           <span>To:</span>
           <span ng-repeat="recipient in to track by $index">
-            <input id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" ng-class="{'label': recipient.secure === true, 'label label-primary': recipient.secure === false && recipient.valid !== true}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" focus-me="state.writer.open && writerTitle !== 'Reply'">
+            <input id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" ng-class="{'label': recipient.secure === true, 'label label-primary': recipient.secure === false && recipient.valid !== true}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" ng-mouseover="getFingerprint(recipient)" popover="#fingerprint-writer" focus-me="state.writer.open && writerTitle !== 'Reply'">
           </span>
         </p>
         <p field="cc">
           <span>Cc:</span>
           <span ng-repeat="recipient in cc track by $index">
-            <input id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" ng-class="{'label': recipient.secure === true, 'label label-primary': recipient.secure === false && recipient.valid !== true}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1">
+            <input id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" ng-class="{'label': recipient.secure === true, 'label label-primary': recipient.secure === false && recipient.valid !== true}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1" ng-mouseover="getFingerprint(recipient)" popover="#fingerprint-writer">
           </span>
         </p>
       </div><!--/.address-headers-->
@@ -44,4 +44,11 @@
     </div><!--/.write-view-->
 
   </div><!--/.content-->
+
+  <!-- popovers -->
+  <div id="fingerprint-writer" class="popover right" ng-controller="PopoverCtrl">
+    <div class="arrow"></div>
+    <div class="popover-title"><b>PGP Fingerprint</b></div>
+    <div class="popover-content">{{fingerprint}}</div>
+  </div><!--/.popover-->
 </div><!--/.lightbox-body-->