Make recipients_input more intelligent and enable tokenize on space #492

- Address can now be just email ou canonical emails(User
  <user@example.com>)
- Trigger tokenize addresses emails when type space

2 files changed, 32 insertions, 5 deletions

diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients_input.js b/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
index 012d7fb9..4c70e180 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
@@ -33,7 +33,8 @@ define([
           186: 'semicolon',
           188: 'comma',
           13: 'enter',
-          27: 'esc'
+          27: 'esc',
+          32: 'space'
         },
         EVENT_FOR = {
           8: events.ui.recipients.deleteLast,
@@ -108,7 +109,8 @@ define([
       this.recipientSelected = function (event, data) {
         var value = (data && data.value) || this.$node.val();
         var that = this;
-        _.each(value.split(/[,;]/), function(address) {
+        var addresses = this.extractAdresses(value);
+        _.each(addresses, function(address) {
             if (!_.isEmpty(address.trim())) {
                 that.trigger(that.$node, events.ui.recipients.entered, { name: that.attr.name, address: address.trim() });
             }
@@ -116,6 +118,13 @@ define([
         reset(this.$node);
       };
 
+      this.extractAdresses = function(rawAddresses){
+        var simpleAddressMatch = /[^<\w,;]?([^\s<;,]+@[^\s>;,]+)/;
+        var canonicalAddressMatch = /([^,;\s][^,;]+<[^\s;,]+@[^\s;,]+>)/;
+        var addressMatch = new RegExp([simpleAddressMatch.source, '|', canonicalAddressMatch.source].join(''), 'g');
+        return rawAddresses.match(addressMatch);
+      };
+
       this.init = function () {
         this.$node.typeahead({
           hint: true,
diff --git a/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js b/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js
index 24d57953..90acf85f 100644
--- a/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js
+++ b/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js
@@ -89,7 +89,7 @@ describeComponent('mail_view/ui/recipients/recipients_input',function () {
     });
 
     describe('when space is pressed', function () {
-      it('address input should not finish', function () {
+      it('should tokenize email address', function () {
         var addressEnteredEvent = spyOnEvent(this.$node, Pixelated.events.ui.recipients.entered);
 
         var spaceKeyPressEvent = $.Event('keydown', { which: 32});
@@ -98,8 +98,8 @@ describeComponent('mail_view/ui/recipients/recipients_input',function () {
         this.$node.val('a@b.c');
         this.$node.trigger(spaceKeyPressEvent);
 
-        expect(spaceKeyPressEvent.preventDefault).not.toHaveBeenCalled();
-        expect(addressEnteredEvent).not.toHaveBeenTriggeredOnAndWith(this, { name: 'to', address: 'a@b.c' });
+        expect(spaceKeyPressEvent.preventDefault).toHaveBeenCalled();
+        expect(addressEnteredEvent).toHaveBeenTriggeredOnAndWith(this, { name: 'to', address: 'a@b.c' });
       });
     });
   });
@@ -140,5 +140,23 @@ describeComponent('mail_view/ui/recipients/recipients_input',function () {
       expect(addressEnteredEvent.calls[1].data).toEqual({name: 'to', address: 'Friend <friend@domain.com>'});
       expect(addressEnteredEvent.calls[2].data).toEqual({name: 'to', address: 'd@e.f'});
     });
+
+    it('tokenizes and sanitize adresses separated by space, comma and semicolon', function() {
+      var addressEnteredEvent = spyOnEvent(this.$node, Pixelated.events.ui.recipients.entered);
+      var blurEvent = $.Event('blur');
+      spyOn(blurEvent, 'preventDefault');
+
+      this.$node.val('a@b.c Friend <friend@domain.com>, d@e.f; g@h.i');
+      this.$node.trigger(blurEvent);
+
+      expect(blurEvent.preventDefault).toHaveBeenCalled();
+      expect(addressEnteredEvent.callCount).toEqual(4);
+
+      expect(addressEnteredEvent.calls[0].data).toEqual({name: 'to', address: 'a@b.c'});
+      expect(addressEnteredEvent.calls[1].data).toEqual({name: 'to', address: 'Friend <friend@domain.com>'});
+      expect(addressEnteredEvent.calls[2].data).toEqual({name: 'to', address: 'd@e.f'});
+      expect(addressEnteredEvent.calls[3].data).toEqual({name: 'to', address: 'g@h.i'});
+    });
+
   });
 });