Show all email errors at the appropriate time and fix constant validation

Author: Nick Litwin

app/account/register/register.jade

@@ -50,7 +50,7 @@
       p.form-error(ng-show="vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength") Username must be between 2 and 15 characters.
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.email.$dirty && vm.registerForm.email.$invalid), 'success-bar': (vm.registerForm.email.$valid) }")
-      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
+      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
         h3 Email Tips:
@@ -60,7 +60,9 @@
         p We will occasionally send you emails related to your account or interests.
 
     .form-errors
-      p.form-error(ng-show="vm.registerForm.email.$dirty && vm.registerForm.email.$invalid") Please enter a valid email address.
+      p.form-error(ng-show="vm.registerForm.email.$dirty && (vm.registerForm.email.$error.emailIsAvailable || vm.registerForm.email.$error.validEmail)", ng-bind="vm.emailErrorMessage")
+
+      p.form-error(ng-show="vm.registerForm.email.$dirty && vm.registerForm.email.$error.required") Please enter an email address.
 
     .validation-bar(ng-class="{ 'success-bar': (vm.registerForm.password.$valid) }")
       toggle-password-with-tips(ng-if="!vm.isSocialRegistration")

app/directives/account/validate-email.directive.js

@@ -1,20 +1,25 @@
 (function() {
   'use strict';
 
-  angular.module('tcUIComponents')
-    .directive('validEmail', validEmail);
-    
+  angular.module('tcUIComponents').directive('validEmail', validEmail);
+
   function validEmail() {
     return {
       require: 'ngModel',
       link: function(scope, element, attrs, ctrl) {
         ctrl.$validators.validEmail = function(modelValue, viewValue) {
+          if (ctrl.$isEmpty(modelValue)) {
+            return true;
+          }
+
           if (/.+@.+\..+/.test(viewValue)) {
             return true;
           }
+
+          scope.vm.emailErrorMessage = 'Please enter a valid email address.';
           return false;
         };
       }
     };
   }
-})();
+})();

app/directives/account/validate-register.directive.js

@@ -50,7 +50,6 @@
     };
   }
 
-
   usernameIsFree.$inject = ['UserService', '$log', '$q'];
 
   function usernameIsFree(UserService, $log, $q) {
@@ -60,21 +59,19 @@
         ctrl.$asyncValidators.usernameIsFree = function(modelValue, viewValue) {
           $log.info('Validating username: ' + modelValue);
 
-          // Check if the username exists
           var defer = $q.defer();
-          UserService.validateUserHandle(modelValue).then(
-            function(data) {
-              if (data.valid) {
-                // username is free
-                return defer.resolve();
-              } else {
-                return defer.reject(data.reasonCode);
-              }
-            }
-          ).catch(function(resp) {
-              // call failed - assuming username is free, register call will fail anyways
+
+          UserService.validateUserHandle(modelValue).then(function(res) {
+            if (res.valid) {
               return defer.resolve();
+            } else {
+              return defer.reject(res.reasonCode);
+            }
+          }).catch(function(err) {
+            // call failed - assuming username is free, register call will fail anyways
+            return defer.resolve();
           });
+
           return defer.promise;
         };
       }
@@ -90,21 +87,34 @@
         ctrl.$asyncValidators.emailIsAvailable = function(modelValue, viewValue) {
           $log.info('Validating email: ' + modelValue);
 
-          // Check if the username exists
           var defer = $q.defer();
-          UserService.validateUserEmail(modelValue).then(
-            function(data) {
-              if (data.valid) {
-                // email is available
-                return defer.resolve();
-              } else {
-                return defer.reject(data.reasonCode);
+
+          UserService.validateUserEmail(modelValue).then(function(res) {
+            if (res.valid) {
+              return defer.resolve();
+            } else {
+              switch (res.reasonCode) {
+                case 'ALREADY_TAKEN':
+                  scope.vm.emailErrorMessage = 'That email address is already taken.';
+                  break;
+                case 'INVALID_EMAIL':
+                  scope.vm.emailErrorMessage = 'Please enter a valid email address.';
+                  break;
+                case 'INVALID_LENGTH':
+                  scope.vm.emailErrorMessage = 'Email address should be 100 characters or less.';
+                  break;
+                default:
+                  scope.vm.emailErrorMessage = 'Please enter a valid email address.';
               }
+
+              return defer.reject(res.reasonCode);
             }
-          ).catch(function(resp) {
-              // call failed - assuming available is free, register call will fail anyways
-              return defer.resolve();
+          }).
+          catch(function(err) {
+            // call failed - assuming available is free, register call will fail anyways
+            return defer.resolve();
           });
+
           return defer.promise;
         };
       }