moparisthebest
/
mail
mirror of https://github.com/moparisthebest/mail
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #121 from whiteout-io/dev/WO-285 

Dev/wo 285
This commit is contained in:
Felix Hammerl 2014-09-16 12:14:18 +02:00
parent 221bbea17c a06d9b4d92
commit efdc78fc75
12 changed files with 314 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@ -8,7 +8,17 @@
"type": "git",
"url": "https://github.com/whiteout-io/mail-html5.git"
},
"keywords": ["email", "mail", "client", "app", "openpgp", "pgp", "gpg", "imap", "smtp"],
"keywords": [
"email",
"mail",
"client",
"app",
"openpgp",
"pgp",
"gpg",
"imap",
"smtp"
],
"engines": {
"node": ">=0.10"
},

6
src/js/app.js
View File

@ -27,7 +27,8 @@ requirejs([
'fastclick',
'angularRoute',
'angularAnimate',
'ngInfiniteScroll'
'ngInfiniteScroll',
'ngTagsInput'
], function(
angular,
DialogCtrl,
@ -70,7 +71,8 @@ requirejs([
'login-new-device',
'privatekey-upload',
'popover',
'infinite-scroll'
'infinite-scroll',
'ngTagsInput'
]);
// set router paths

266
src/js/controller/write.js
View File

@ -14,14 +14,13 @@ define(function(require) {
// Controller
//
var WriteCtrl = function($scope, $filter) {
var WriteCtrl = function($scope, $filter, $q) {
pgp = appController._pgp;
auth = appController._auth;
emailDao = appController._emailDao;
outbox = appController._outboxBo;
keychainDao = appController._keychain;
// set default value so that the popover height is correct on init
$scope.keyId = 'XXXXXXXX';
@ -55,21 +54,16 @@ define(function(require) {
function resetFields() {
$scope.writerTitle = 'New email';
$scope.to = [{
address: ''
}];
$scope.to = [];
$scope.showCC = false;
$scope.cc = [{
address: ''
}];
$scope.cc = [];
$scope.showBCC = false;
$scope.bcc = [{
address: ''
}];
$scope.bcc = [];
$scope.subject = '';
$scope.body = '';
$scope.ciphertextPreview = '';
$scope.attachments = [];
$scope.addressBookCache = undefined;
}
function reportBug() {
@ -218,17 +212,13 @@ define(function(require) {
//
/**
* This event is fired when editing the email address headers. It checks is space is pressed and if so, creates a new address field.
*/
$scope.onAddressUpdate = function(field, index) {
var recipient = field[index];
$scope.verify(recipient);
};
/**
* Verify and email address and fetch its public key
* Verify email address and fetch its public key
*/
$scope.verify = function(recipient) {
if (!recipient) {
return;
}
// set display to insecure while fetching keys
recipient.key = undefined;
recipient.secure = false;
@ -241,42 +231,32 @@ define(function(require) {
return;
}
// check if to address is contained in known public keys
// when we write an email, we always need to work with the latest keys available
keychainDao.refreshKeyForUserId(recipient.address, function(err, key) {
if (err) {
$scope.onError(err);
return;
}
if (key) {
// compare again since model could have changed during the roundtrip
var matchingUserId = _.findWhere(key.userIds, {
emailAddress: recipient.address
});
// compare either primary userId or (if available) multiple IDs
if (key.userId === recipient.address || matchingUserId) {
recipient.key = key;
recipient.secure = true;
// keychainDao is undefined in local dev environment
if (keychainDao) {
// check if to address is contained in known public keys
// when we write an email, we always need to work with the latest keys available
keychainDao.refreshKeyForUserId(recipient.address, function(err, key) {
if (err) {
$scope.onError(err);
return;
}
}
$scope.checkSendStatus();
$scope.$digest();
});
};
if (key) {
// compare again since model could have changed during the roundtrip
var matchingUserId = _.findWhere(key.userIds, {
emailAddress: recipient.address
});
// compare either primary userId or (if available) multiple IDs
if (key.userId === recipient.address || matchingUserId) {
recipient.key = key;
recipient.secure = true;
}
}
$scope.getKeyId = function(recipient) {
$scope.keyId = 'Key not found for that user.';
if (!recipient.key) {
return;
$scope.checkSendStatus();
$scope.$digest();
});
}
var fpr = pgp.getFingerprint(recipient.key.publicKey);
var formatted = fpr.slice(32);
$scope.keyId = formatted;
};
/**
@ -418,6 +398,52 @@ define(function(require) {
};
//
// Tag input & Autocomplete
//
$scope.tagStyle = function(recipient) {
var classes = ['label'];
if (recipient.secure === false) {
classes.push('label-primary');
}
return classes;
};
$scope.lookupAddressBook = function(query) {
var deferred = $q.defer();
if (!$scope.addressBookCache) {
// populate address book cache
keychainDao.listLocalPublicKeys(function(err, keys) {
if (err) {
$scope.onError(err);
return;
}
$scope.addressBookCache = keys.map(function(key) {
return {
address: key.userId
};
});
filter();
});
} else {
filter();
}
// query address book cache
function filter() {
var addresses = $scope.addressBookCache.filter(function(i) {
return i.address.indexOf(query) !== -1;
});
deferred.resolve(addresses);
}
return deferred.promise;
};
//
// Helpers
//
@ -489,138 +515,28 @@ define(function(require) {
};
});
ngModule.directive('autoSize', function($parse) {
ngModule.directive('focusInput', function($timeout, $parse) {
return {
require: 'ngModel',
link: function(scope, elm, attrs) {
// resize text input depending on value length
var model = $parse(attrs.autoSize);
scope.$watch(model, function(value) {
var width;
if (!value || value.length < 12) {
width = (14 * 8) + 'px';
} else {
width = ((value.length + 2) * 8) + 'px';
}
elm.css('width', width);
});
}
};
});
function addInput(field, scope) {
scope.$apply(function() {
field.push({
address: ''
});
});
}
function removeInput(field, index, scope) {
scope.$apply(function() {
field.splice(index, 1);
});
}
function checkForEmptyInput(field) {
var emptyFieldExists = false;
field.forEach(function(recipient) {
if (!recipient.address) {
emptyFieldExists = true;
}
});
return emptyFieldExists;
}
function cleanupEmptyInputs(field, scope) {
scope.$apply(function() {
for (var i = field.length - 2; i >= 0; i--) {
if (!field[i].address) {
field.splice(i, 1);
}
}
});
}
function focusInput(fieldName, index) {
var fieldId = fieldName + (index);
var fieldEl = document.getElementById(fieldId);
if (fieldEl) {
fieldEl.focus();
}
}
ngModule.directive('field', function() {
return {
scope: true,
//scope: true, // optionally create a child scope
link: function(scope, element, attrs) {
element.on('click', function(e) {
if (e.target.nodeName === 'INPUT') {
return;
var model = $parse(attrs.focusInput);
scope.$watch(model, function(value) {
if (value === true) {
$timeout(function() {
element.find('input').first().focus();
}, 100);
}
var fieldName = attrs.field;
var field = scope[fieldName];
if (!checkForEmptyInput(field)) {
// create new field input if no empy one exists
addInput(field, scope);
}
// focus on last input when clicking on field
focusInput(fieldName, field.length - 1);
});
}
};
});
ngModule.directive('addressInput', function() {
ngModule.directive('focusInputOnClick', function() {
return {
scope: true,
link: function(scope, elm, attrs) {
// get prefix for id
var fieldName = attrs.addressInput;
var field = scope[fieldName];
var index = parseInt(attrs.id.replace(fieldName, ''), 10);
elm.on('blur', function() {
if (!checkForEmptyInput(field)) {
// create new field input
addInput(field, scope);
}
cleanupEmptyInputs(field, scope);
});
elm.on('keydown', function(e) {
var code = e.keyCode;
var address = elm[0].value;
if (code === 32 || code === 188 || code === 186) {
// catch space, comma, semicolon
e.preventDefault();
// add next field only if current input is not empty
if (address) {
// create new field input
addInput(field, scope);
// find next input and focus
focusInput(fieldName, index + 1);
}
} else if ((code === 8 || code === 46) && !address && field.length > 1) {
// backspace, delete on empty input
// remove input
e.preventDefault();
removeInput(field, index, scope);
// focus on previous id
focusInput(fieldName, index - 1);
}
//scope: true, // optionally create a child scope
link: function(scope, element) {
element.on('click', function() {
element.find('input').first().focus();
});
}
};

5
src/lib/ngtagsinput/ng-tags-input.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

5
src/require-config.js
View File

@ -16,6 +16,7 @@
angularRoute: 'angular/angular-route.min',
angularAnimate: 'angular/angular-animate.min',
ngInfiniteScroll: 'ng-infinite-scroll.min',
ngTagsInput: 'ngtagsinput/ng-tags-input.min',
uuid: 'uuid/uuid',
forge: 'forge/forge.min',
punycode: 'punycode.min',
@ -45,6 +46,10 @@
exports: 'angular',
deps: ['jquery', 'angular']
},
ngTagsInput: {
exports: 'angular',
deps: ['angular']
},
lawnchair: {
exports: 'Lawnchair'
},

5
src/sass/_variables.scss
View File

@ -14,9 +14,10 @@ $line-height-base: 20 / 16;
// Colors
// -------------------------------------------
$color-blue: #00c6ff;
$color-black: #000;
$color-white: #fff;
$color-blue: #00c6ff;
$color-red: #ff878d;
$color-grey: #666;
$color-grey-input: #949494;
$color-grey-dark: #333;
@ -73,7 +74,7 @@ $label-font-size: $font-size-small;
$label-padding-horizontal: 0.8em;
$label-padding-vertical: 0.3em;
$label-primary-back-color: #ff878d;
$label-primary-back-color: $color-red;
$label-primary-color: #fff;
$label-light-back-color: #fff;

1
src/sass/all.scss
View File

@ -28,6 +28,7 @@
@import "components/mail-addresses";
@import "components/spinner";
@import "components/scrollbars";
@import "components/tags-input";
// Views
@import "views/shared";

1
src/sass/components/_mail-addresses.scss
View File

@ -1,7 +1,6 @@
.mail-addresses {
p {
margin: 0.4em 0 0.2em;
cursor: text;
}
.label {

87
src/sass/components/_tags-input.scss Normal file
View File

@ -0,0 +1,87 @@
// Styling for ngTagsInput
.tags-input {
.host {
position: relative;
&:active {
outline: none;
}
}
.tags {
overflow: hidden;
word-wrap: break-word;
cursor: text;
}
.tag-list {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
.tag-item {
cursor: default;
.remove-button {
font-weight: bold;
font-size: 1.2em;
vertical-align: middle;
line-height: 0.5em;
cursor: pointer;
}
}
.tags .input {
border: 0;
outline: none;
margin: 2px;
padding: 0;
padding-left: 5px;
float: left;
min-width: 10em;
&.invalid-tag {
color: $color-red;
}
&::-ms-clear {
display: none;
}
}
li.ng-animate {
transition: none;
}
.autocomplete {
margin-top: 5px;
position: absolute;
z-index: 999;
width: 100%;
background-color: white;
border: 1px solid $color-grey-lighter;
box-shadow: 2px 2px 5px rgba($color-black, 0.2);
.suggestion-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.suggestion-item {
padding: 5px 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $color-black;
background-color: $color-white;
em {
font-weight: bold;
font-style: normal;
}
&.selected {
color: white;
background-color: $color-blue;
}
}
}
}

53
src/sass/views/_write.scss
View File

@ -20,27 +20,44 @@
.mail-addresses {
flex-shrink: 0;
margin-top: 10px;
}
.mail-addresses-more {
float: right;
margin: 0.4em 0;
p {
position: relative;
padding-left: 3em;
}
label {
position: absolute;
top: 0;
left: 0;
width: 3em;
}
button {
display: inline-block;
background: none;
padding: 0 0.5em;
margin: 0;
text-decoration: none;
color: $color-black;
transition: color 0.3s;
border: 0;
outline: 0;
.mail-addresses-more {
position: relative;
float: right;
margin: 0.4em 0;
z-index: 1;
&:hover,
&:focus {
color: $color-blue;
text-decoration: underline;
button {
display: inline-block;
background: none;
padding: 0 0.5em;
margin: 0;
text-decoration: none;
color: $color-black;
transition: color 0.3s;
border: 0;
outline: 0;
&:hover,
&:focus {
color: $color-blue;
text-decoration: underline;
}
&.ng-animate {
transition: none;
}
}
}
}

38
src/tpl/write.html
View File

@ -10,23 +10,37 @@
<button wo-touch="showCC = true;" ng-hide="showCC">Cc</button>
<button wo-touch="showBCC = true;" ng-hide="showBCC">Bcc</button>
</div>
<p field="to">
<p focus-input="state.lightbox === 'write' && writerTitle !== 'Reply'"
focus-input-on-click>
<label>To:</label>
<span ng-repeat="recipient in to track by $index">
<input type="email" id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" ng-mouseover="getKeyId(recipient)" focus-me="$index === 0 && state.lightbox === 'write' && writerTitle !== 'Reply'">
</span>
<tags-input class="tags-input" ng-model="to" type="email" tabindex="1" add-on-space="true" add-on-enter="true" enable-editing-last-tag="true"
tag-style="tagStyle" display-property="address" on-tag-added="verify($tag)" on-tag-removed="checkSendStatus()"
allowed-tags-pattern='^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
placeholder="add recipient">
<auto-complete source="lookupAddressBook($query)" min-length="1"></auto-complete>
</tags-input>
</p>
<p field="cc" ng-show="showCC === true">
<p ng-show="showCC === true"
focus-input="state.lightbox === 'write' && writerTitle !== 'Reply'"
focus-input-on-click>
<label>Cc:</label>
<span ng-repeat="recipient in cc track by $index">
<input type="email" id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1" ng-mouseover="getKeyId(recipient)">
</span>
<tags-input class="tags-input" ng-model="cc" type="email" tabindex="1" add-on-space="true" add-on-enter="true" enable-editing-last-tag="true"
tag-style="tagStyle" display-property="address" on-tag-added="verify($tag)" on-tag-removed="checkSendStatus()"
allowed-tags-pattern='^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
placeholder="add cc">
<auto-complete source="lookupAddressBook($query)" min-length="1"></auto-complete>
</tags-input>
</p>
<p field="bcc" ng-show="showBCC === true">
<p ng-show="showBCC === true"
focus-input="state.lightbox === 'write' && writerTitle !== 'Reply'"
focus-input-on-click>
<label>Bcc:</label>
<span ng-repeat="recipient in bcc track by $index">
<input type="email" id="bcc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(bcc, $index)" address-input="bcc" tabindex="1" ng-mouseover="getKeyId(recipient)">
</span>
<tags-input class="tags-input" ng-model="bcc" type="email" tabindex="1" add-on-space="true" add-on-enter="true" enable-editing-last-tag="true"
tag-style="tagStyle" display-property="address" on-tag-added="verify($tag)" on-tag-removed="checkSendStatus()"
allowed-tags-pattern='^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
placeholder="add bcc">
<auto-complete source="lookupAddressBook($query)" min-length="1"></auto-complete>
</tags-input>
</p>
</div><!--/.mail-addresses-->

78
test/unit/write-ctrl-test.js
View File

@ -63,10 +63,11 @@ define(function(require) {
expect(scope.state.writer.write).to.exist;
expect(scope.state.writer.close).to.exist;
expect(scope.verify).to.exist;
expect(scope.onAddressUpdate).to.exist;
expect(scope.checkSendStatus).to.exist;
expect(scope.updatePreview).to.exist;
expect(scope.sendToOutbox).to.exist;
expect(scope.tagStyle).to.exist;
expect(scope.lookupAddressBook).to.exist;
});
});
@ -87,9 +88,7 @@ define(function(require) {
scope.state.writer.write();
expect(scope.writerTitle).to.equal('New email');
expect(scope.to).to.deep.equal([{
address: ''
}]);
expect(scope.to).to.deep.equal([]);
expect(scope.subject).to.equal('');
expect(scope.body).to.equal('');
expect(scope.ciphertextPreview).to.equal(undefined);
@ -121,8 +120,6 @@ define(function(require) {
expect(scope.writerTitle).to.equal('Reply');
expect(scope.to).to.deep.equal([{
address: address,
}, {
address: ''
}]);
expect(scope.subject).to.equal('Re: ' + subject);
expect(scope.body).to.contain(body);
@ -156,9 +153,7 @@ define(function(require) {
scope.state.writer.write(re, null, true);
expect(scope.writerTitle).to.equal('Forward');
expect(scope.to).to.deep.equal([{
address: ''
}]);
expect(scope.to).to.deep.equal([]);
expect(scope.subject).to.equal('Fwd: ' + subject);
expect(scope.body).to.contain(body);
expect(scope.ciphertextPreview).to.be.undefined;
@ -171,29 +166,6 @@ define(function(require) {
});
describe('onAddressUpdate', function() {
var verifyMock;
beforeEach(function() {
verifyMock = sinon.stub(scope, 'verify');
});
afterEach(function() {
scope.verify.restore();
});
it('should do nothing for normal address', function() {
var to = [{
address: 'asdf@asdf.de'
}];
scope.onAddressUpdate(to, 0);
expect(to.length).to.equal(1);
expect(to[0].address).to.equal('asdf@asdf.de');
expect(verifyMock.calledOnce).to.be.true;
});
});
describe('verify', function() {
var checkSendStatusMock;
@ -205,6 +177,10 @@ define(function(require) {
scope.checkSendStatus.restore();
});
it('should do nothing if recipient is not provided', function() {
scope.verify(undefined);
});
it('should not work for invalid email addresses', function() {
var recipient = {
address: ''
@ -387,5 +363,43 @@ define(function(require) {
expect(scope.replyTo.answered).to.be.true;
});
});
describe('lookupAddressBook', function() {
it('should work', function(done) {
keychainMock.listLocalPublicKeys.yields(null, [{
userId: 'test@asdf.com',
publicKey: 'KEY'
}]);
var result = scope.lookupAddressBook('test');
result.then(function(response) {
expect(response).to.deep.equal([{
address: 'test@asdf.com'
}]);
done();
});
scope.$digest();
});
it('should work with cache', function(done) {
scope.addressBookCache = [{
address: 'test@asdf.com'
}, {
address: 'tes@asdf.com'
}];
var result = scope.lookupAddressBook('test');
result.then(function(response) {
expect(response).to.deep.equal([{
address: 'test@asdf.com'
}]);
done();
});
scope.$digest();
});
});
});
});