add lock icon to encrypted items in mail list, show key ID instead of fingerprints in reader, hide popover in writer

This commit is contained in:
Tankred Hase 2014-02-20 19:20:24 +01:00
parent 47de4ed5d0
commit bf9602fcbb
7 changed files with 41 additions and 20 deletions

View File

@ -395,6 +395,7 @@ define(function(require) {
this.sentDate = new Date('Thu Sep 19 2013 20:41:23 GMT+0200 (CEST)');
this.subject = 'Getting started'; // Subject line
this.body = 'Here are a few pointers to help you get started with Whiteout Mail.\n\n# Write encrypted message\n- You can compose a message by clicking on the compose button on the upper right (keyboard shortcut is "n" for a new message or "r" to reply).\n- When typing the recipient\'s email address, secure recipients are marked with a blue label and insecure recipients are red.\n- When sending an email to insecure recipients, the default behavior for Whiteout Mail is to invite them to the service and only send the message content in an encrypted form, once they have joined.\n\n# Advanced features\n- To verify a recipient\'s PGP key, you can hover over the blue label containing their email address and their key fingerprint will be displayed.\n- To view your own key fingerprint, open the account view in the navigation bar on the left. You can compare these with your correspondants over a second channel such as a phonecall.\n\nWe hope this helped you to get started with Whiteout Mail.\n\nYour Whiteout Networks team'; // plaintext body
this.encrypted = true;
};
var dummys = [new Email(true, true), new Email(true, false, true, true), new Email(false, true, true), new Email(false, true), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false)];

View File

@ -17,7 +17,7 @@ define(function(require) {
keychain = appController._keychain;
// set default value so that the popover height is correct on init
$scope.fingerprint = 'XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX';
$scope.keyId = 'XXXXXXXX';
$scope.state.read = {
open: false,
@ -30,18 +30,22 @@ define(function(require) {
return line.replace(/>/g, '').trim().length === 0;
};
$scope.getFingerprint = function(address) {
$scope.fingerprint = 'Fingerprint cannot be displayed. Public key not found for that user.';
$scope.getKeyId = function(address) {
$scope.keyId = 'Key not found for that user.';
keychain.getReceiverPublicKey(address, function(err, pubkey) {
if (err) {
$scope.onError(err);
return;
}
var fpr = crypto.getFingerprint(pubkey.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);
if (!pubkey) {
return;
}
$scope.fingerprint = formatted;
var fpr = crypto.getFingerprint(pubkey.publicKey);
var formatted = fpr.slice(32);
$scope.keyId = formatted;
$scope.$apply();
});
};

View File

@ -17,7 +17,7 @@ define(function(require) {
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';
$scope.keyId = 'XXXXXXXX';
//
// Init
@ -130,17 +130,17 @@ define(function(require) {
});
};
$scope.getFingerprint = function(recipient) {
$scope.fingerprint = 'Fingerprint cannot be displayed. Public key not found for that user.';
$scope.getKeyId = function(recipient) {
$scope.keyId = '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);
var formatted = fpr.slice(32);
$scope.fingerprint = formatted;
$scope.keyId = formatted;
};
/**

View File

@ -11,6 +11,7 @@
}
li {
position: relative;
display: block;
margin-bottom: 7px;
padding: $padding-vertical $padding-horizontal;
@ -26,10 +27,20 @@
font-weight: normal;
margin: 0;
}
.encrypted {
position: absolute;
color: $color-grey-medium;
line-height: 30px;
top: $padding-vertical;
right: $padding-vertical;
}
p {
font-size: $font-size-small;
margin: 0;
}
.head {
position: relative;
padding-right: 6.5em;
@ -64,6 +75,7 @@
margin-left: -1.3em;
}
}
.body {
color: $color-grey;
height: 2.5em;
@ -122,6 +134,9 @@
h3 {
color: $color-white;
}
.encrypted {
color: $color-white;
}
.head {
.subject {
color: $color-white;

View File

@ -12,6 +12,7 @@
<ul class="mail-list">
<li ng-class="{'mail-list-active': email === state.mailList.selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': !email.unread && email.answered}" ng-click="select(email)" ng-repeat="email in (filteredMessages = (state.nav.currentFolder.messages | orderBy:'uid':true | filter:searchText))">
<h3>{{email.from[0].name || email.from[0].address}}</h3>
<div class="encrypted" data-icon="{{email.encrypted ? '&#xe009;' : ''}}"></div>
<div class="head">
<div class="flag" data-icon="{{(!email.unread && email.answered) ? '&#xe002;' : ''}}" ng-click="toggleUnread(email); $event.stopPropagation()"></div>
<p class="subject">{{email.subject || 'No subject'}}</p>

View File

@ -9,14 +9,14 @@
<p class="subject" ng-click="state.read.toggle(false)">{{(state.mailList.selected.subject) ? state.mailList.selected.subject + ((!state.mailList.selected.encrypted) ? ' (not encrypted)' : '') : 'No subject'}}</p>
<p class="date">{{state.mailList.selected.sentDate | date:'EEEE, MMM d, yyyy h:mm a'}}</p>
<p class="address">
From: <span ng-repeat="u in state.mailList.selected.from" class="label" ng-class="{'label-primary': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : (u.secure === true) ? '&#xe009;' : ''}}" ng-mouseover="getFingerprint(u.address)" popover="#fingerprint-info">{{u.name || u.address}}</span>
From: <span ng-repeat="u in state.mailList.selected.from" class="label" ng-class="{'label-primary': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" popover="#fingerprint-info">{{u.name || u.address}}</span>
</p>
<p class="address">
To: <span ng-repeat="u in state.mailList.selected.to" class="label" ng-class="{'label-primary': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : (u.secure === true) ? '&#xe009;' : ''}}" ng-mouseover="getFingerprint(u.address)" popover="#fingerprint-info">{{u.name || u.address}}</span>
To: <span ng-repeat="u in state.mailList.selected.to" class="label" ng-class="{'label-primary': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" popover="#fingerprint-info">{{u.name || u.address}}</span>
</p>
<div ng-switch="state.mailList.selected.cc !== undefined">
<p class="address" ng-switch-when="true">
Cc: <span ng-repeat="u in state.mailList.selected.cc" class="label" ng-class="{'label-primary': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : (u.secure === true) ? '&#xe009;' : ''}}" ng-mouseover="getFingerprint(u.address)" popover="#fingerprint-info">{{u.name || u.address}}</span>
Cc: <span ng-repeat="u in state.mailList.selected.cc" class="label" ng-class="{'label-primary': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" popover="#fingerprint-info">{{u.name || u.address}}</span>
</p>
</div>
</div><!--/.headers-->
@ -49,7 +49,7 @@
<!-- popovers -->
<div id="fingerprint-info" 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 class="popover-title"><b>PGP key ID</b></div>
<div class="popover-content">{{keyId}}</div>
</div><!--/.popover-->
</div><!--/.view-read-->

View File

@ -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" ng-mouseover="getFingerprint(recipient)" popover="#fingerprint-writer" 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="getKeyId(recipient)" 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" ng-mouseover="getFingerprint(recipient)" popover="#fingerprint-writer">
<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="getKeyId(recipient)">
</span>
</p>
</div><!--/.address-headers-->
@ -61,7 +61,7 @@
<!-- 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 class="popover-title"><b>PGP key ID</b></div>
<div class="popover-content">{{keyId}}</div>
</div><!--/.popover-->
</div><!--/.lightbox-body-->