mirror of https://github.com/moparisthebest/mail
Merge pull request #22 from whiteout-io/dev/encrypted-list-ui
Dev/encrypted list ui
This commit is contained in:
Felix Hammerl
commit
1e9e6a2b21
|
|
@ -67,9 +67,21 @@ define(function(require) {
|
|||
emailDao.getBody({
|
||||
folder: getFolder().path,
|
||||
message: email
|
||||
}, function(error) {
|
||||
}, function(err) {
|
||||
if (err) {
|
||||
$scope.onError(err);
|
||||
return;
|
||||
}
|
||||
|
||||
// display fetched body
|
||||
$scope.$apply();
|
||||
$scope.onError(error);
|
||||
|
||||
// automatically decrypt if it's the selected email
|
||||
if (email === $scope.state.mailList.selected) {
|
||||
emailDao.decryptMessageContent({
|
||||
message: email
|
||||
}, $scope.onError);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -83,19 +95,16 @@ define(function(require) {
|
|||
return;
|
||||
}
|
||||
|
||||
$scope.state.mailList.selected = email;
|
||||
$scope.state.read.toggle(true);
|
||||
|
||||
// if we're in the outbox, don't decrypt as usual
|
||||
if (getFolder().type !== 'Outbox') {
|
||||
emailDao.decryptMessageContent({
|
||||
message: email
|
||||
}, function(error) {
|
||||
$scope.$apply();
|
||||
$scope.onError(error);
|
||||
});
|
||||
}, $scope.onError);
|
||||
}
|
||||
|
||||
$scope.state.mailList.selected = email;
|
||||
$scope.state.read.toggle(true);
|
||||
|
||||
// if the email is unread, please sync the new state.
|
||||
// otherweise forget about it.
|
||||
if (!email.unread) {
|
||||
|
|
@ -121,7 +130,7 @@ define(function(require) {
|
|||
// if we're in the outbox, don't do an imap sync
|
||||
if (getFolder().type === 'Outbox') {
|
||||
updateStatus('Last update: ', new Date());
|
||||
displayEmails(outboxBo.pendingEmails);
|
||||
selectFirstMessage(outboxBo.pendingEmails);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -150,7 +159,7 @@ define(function(require) {
|
|||
}
|
||||
|
||||
// sort emails
|
||||
displayEmails(getFolder().messages);
|
||||
selectFirstMessage(getFolder().messages);
|
||||
// display last update
|
||||
updateStatus('Last update: ', new Date());
|
||||
$scope.$apply();
|
||||
|
|
@ -227,7 +236,7 @@ define(function(require) {
|
|||
if (!window.chrome || !chrome.identity) {
|
||||
updateStatus('Last update: ', new Date());
|
||||
getFolder().messages = createDummyMails();
|
||||
displayEmails(getFolder().messages);
|
||||
selectFirstMessage(getFolder().messages);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -236,11 +245,14 @@ define(function(require) {
|
|||
// if we're in the outbox, read directly from there.
|
||||
if (getFolder().type === 'Outbox') {
|
||||
updateStatus('Last update: ', new Date());
|
||||
displayEmails(outboxBo.pendingEmails);
|
||||
selectFirstMessage(outboxBo.pendingEmails);
|
||||
return;
|
||||
}
|
||||
|
||||
displayEmails(getFolder().messages);
|
||||
// unselect selection from old folder
|
||||
$scope.select();
|
||||
// display and select first
|
||||
selectFirstMessage(getFolder().messages);
|
||||
|
||||
$scope.synchronize();
|
||||
});
|
||||
|
|
@ -274,7 +286,7 @@ define(function(require) {
|
|||
$scope.lastUpdate = (time) ? time : '';
|
||||
}
|
||||
|
||||
function displayEmails(emails) {
|
||||
function selectFirstMessage(emails) {
|
||||
if (!emails || emails.length < 1) {
|
||||
$scope.select();
|
||||
return;
|
||||
|
|
@ -395,6 +407,8 @@ 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;
|
||||
this.decrypted = 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)];
|
||||
|
|
|
|||
|
|
@ -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 = 'unknown 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();
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ define(function() {
|
|||
er.attachHandler = function(scope) {
|
||||
scope.$root.onError = function(options) {
|
||||
if (!options) {
|
||||
scope.$apply();
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -85,6 +85,43 @@
|
|||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
.working {
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
width: 230px;
|
||||
display: table;
|
||||
|
||||
.container {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
animation: rotation .6s linear infinite;
|
||||
border-left: 5px solid $color-grey-light;
|
||||
border-right: 5px solid $color-grey-light;
|
||||
border-bottom: 5px solid $color-grey-light;
|
||||
border-top: 5px solid $color-grey;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding-left: 40px;
|
||||
line-height: 30px;
|
||||
color: $color-grey-input;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
word-wrap: break-word;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="content" ng-switch on="state.ui">
|
||||
|
||||
<div ng-switch-when="1">
|
||||
<p><b>Set passphrase.</b> The passphrase protects your keypair. If you forget your passphrase you will not be able to recover your messages.</p>
|
||||
<p><b>Set passphrase.</b> The passphrase protects your private key. If you forget your passphrase you will not be able to recover your messages.</p>
|
||||
<form>
|
||||
<div>
|
||||
<label class="input-error-message" ng-class="{'passphrase-label-ok': passphraseRating >= 2}">{{passphraseMsg}}</label><br>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<div class="popover-content">
|
||||
<p>A passphrase is like a password but longer.</p>
|
||||
<p>If your device is lost or stolen the passphrase protects the contents of your mailbox.</p>
|
||||
<p>The passphrase should consist of multiple words that are easy to remember.</p>
|
||||
<p>It must be at least 10 characters long and contain one special character or digit.</p>
|
||||
<p>You cannot change your passphrase at a later time.</p>
|
||||
</div>
|
||||
</div><!--/.popover-->
|
||||
|
|
@ -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 ? '' : ''}}"></div>
|
||||
<div class="head">
|
||||
<div class="flag" data-icon="{{(!email.unread && email.answered) ? '' : ''}}" ng-click="toggleUnread(email); $event.stopPropagation()"></div>
|
||||
<p class="subject">{{email.subject || 'No subject'}}</p>
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@
|
|||
|
||||
<div class="view-read" ng-controller="ReadCtrl">
|
||||
<div class="headers">
|
||||
<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="subject" ng-click="state.read.toggle(false)">{{(state.mailList.selected.subject) ? state.mailList.selected.subject : '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) ? '' : (u.secure === true) ? '' : ''}}" 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) ? '' : ''}}" 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) ? '' : (u.secure === true) ? '' : ''}}" 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) ? '' : ''}}" 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) ? '' : (u.secure === true) ? '' : ''}}" 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) ? '' : ''}}" ng-mouseover="getKeyId(u.address)" popover="#fingerprint-info">{{u.name || u.address}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div><!--/.headers-->
|
||||
|
|
@ -35,21 +35,25 @@
|
|||
</div>
|
||||
</div><!--/.ng-switch-->
|
||||
|
||||
|
||||
<div class="body" ng-switch="state.mailList.selected.encrypted === true && state.mailList.selected.decrypted === false">
|
||||
<div class="line">
|
||||
<div ng-switch-when="true">This message contains encrypted content.</div>
|
||||
<div ng-switch-default>
|
||||
<!-- Render lines of a text-email in divs for easier styling -->
|
||||
<div ng-repeat="line in state.mailList.selected.body.split('\n') track by $index" ng-class="{'empty-line': lineEmpty(line)}">{{line}}<br></div>
|
||||
</div>
|
||||
<div class="body" ng-switch="state.mailList.selected === undefined || state.mailList.selected.encrypted === false || (state.mailList.selected.encrypted === true && state.mailList.selected.decrypted === true)">
|
||||
<div ng-switch-when="true">
|
||||
<!-- Render lines of a text-email in divs for easier styling -->
|
||||
<div class="line" ng-repeat="line in state.mailList.selected.body.split('\n') track by $index" ng-class="{'empty-line': lineEmpty(line)}">{{line}}<br></div>
|
||||
</div>
|
||||
<div class="working" ng-switch-default>
|
||||
<div class="container">
|
||||
<div class="spinner"><div></div></div>
|
||||
<span ng-switch="state.mailList.selected.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null">
|
||||
<h1 ng-switch-when="true">Loading...</h1>
|
||||
<h1 ng-switch-default>Decrypting...</h1>
|
||||
</span>
|
||||
</div><!--/.container-->
|
||||
</div>
|
||||
</div><!--/.body-->
|
||||
|
||||
<!-- 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-content"><b>PGP key:</b> {{keyId}}</div>
|
||||
</div><!--/.popover-->
|
||||
</div><!--/.view-read-->
|
||||
|
|
|
|||
|
|
@ -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-->
|
||||
Loading…
Reference in New Issue