Fixes: U4-5717 Member email validation does not allow valid domains (Umbraco 7.1.4)

src/Umbraco.Web.UI.Client/src/common/directives/validation/valemail.directive.js

@@ -0,0 +1,44 @@
+/**
+    * @ngdoc directive
+    * @name umbraco.directives.directive:valEmail
+    * @restrict A
+    * @description A custom directive to validate an email address string, this is required because angular's default validator is incorrect.
+    **/
+function valEmail(valEmailExpression) {
+   
+    return {
+        require: 'ngModel',
+        restrict: "A",
+        link: function (scope, elm, attrs, ctrl) {
+            
+            var patternValidator = function (viewValue) {
+                //NOTE: we don't validate on empty values, use required validator for that
+                if (!viewValue || valEmailExpression.EMAIL_REGEXP.test(viewValue)) {
+                    // it is valid
+                    ctrl.$setValidity('valEmail', true);
+                    //assign a message to the validator
+                    ctrl.errorMsg = "";
+                    return viewValue;
+                }
+                else {
+                    // it is invalid, return undefined (no model update)
+                    ctrl.$setValidity('valEmail', false);
+                    //assign a message to the validator
+                    ctrl.errorMsg = "Invalid email";
+                    return undefined;
+                }
+            };
+
+            ctrl.$formatters.push(patternValidator);
+            ctrl.$parsers.push(patternValidator);
+        }
+    };
+}
+
+angular.module('umbraco.directives')
+    .directive("valEmail", valEmail)
+    .factory('valEmailExpression', function() {
+        return {
+            EMAIL_REGEXP: /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i
+        };
+    });

src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.html

@@ -1,13 +1,14 @@
 <div>
 
-    <input type="email" name="textbox"
+    <input type="text" name="textbox"
            ng-model="model.value"
            id="{{model.alias}}"
            class="umb-editor umb-textstring textstring"
+           val-email
            ng-required="model.config.IsRequired || model.validation.mandatory"
            val-server="value" />
     
     <span class="help-inline" val-msg-for="textbox" val-toggle-msg="required">Required</span>
-    <span class="help-inline" val-msg-for="textbox" val-toggle-msg="email">Invalid email</span>
+    <span class="help-inline" val-msg-for="textbox" val-toggle-msg="valEmail">Invalid email</span>
     <span class="help-inline" val-msg-for="textbox" val-toggle-msg="valServer"></span>
 </div>

src/Umbraco.Web.UI.Client/test/unit/common/directives/val-email.spec.js

@@ -0,0 +1,34 @@
+describe('valEmail directive tests', function() {
+
+    var valEmailExpression;
+
+    beforeEach(module('umbraco'));
+
+    beforeEach(inject(function ($injector) {
+        //TODO: I have no idea why this doesn't work!!?? it freakin should
+        //valEmailExpression = $injector.get('valEmailExpression');
+
+        //in the meantime, i've had to hard code the regex statement here
+        valEmailExpression = {
+            EMAIL_REGEXP: /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i
+        };
+
+    }));
+
+    describe('EMAIL_REGEXP', function () {
+        /* global EMAIL_REGEXP: false */
+        it('should validate email', function () {
+            expect(valEmailExpression.EMAIL_REGEXP.test('a@b.com')).toBe(true);
+            expect(valEmailExpression.EMAIL_REGEXP.test('a@b.museum')).toBe(true);
+            expect(valEmailExpression.EMAIL_REGEXP.test('a@B.c')).toBe(true);
+            expect(valEmailExpression.EMAIL_REGEXP.test('a@.b.c')).toBe(false);
+            expect(valEmailExpression.EMAIL_REGEXP.test('a@-b.c')).toBe(false);
+            expect(valEmailExpression.EMAIL_REGEXP.test('a@b-.c')).toBe(false);
+            expect(valEmailExpression.EMAIL_REGEXP.test('a@3b.c')).toBe(true);
+            expect(valEmailExpression.EMAIL_REGEXP.test('a@b')).toBe(true);
+            expect(valEmailExpression.EMAIL_REGEXP.test('abc@xyz.financial')).toBe(true);
+            
+        });
+    });
+
+});