Form error messages

app/account/register/register.jade

@@ -13,10 +13,6 @@
 
       input(right-placeholder, focused-placeholder="Last", ng-model="vm.lastname", maxlength="64", name="lastname", placeholder="Last Name", type="text", required)
 
-    //- Show errors for first and last names once we know whether we can handle accents, other languages, and not symbols/numbers
-    //- .form-errors
-    //-   p.form-error(ng-show="vm.registerForm.firstname.$dirty && vm.registerForm.firstname.$error.pattern") Names must not contain symbols or numbers.
-
     .country-dropdown
       angucomplete-alt(
         input-name="country",
@@ -32,7 +28,7 @@
       )
 
       .form-errors
-        p.form-error(ng-show="vm.registerForm.country.$error.required") Please enter a valid country.
+        p.form-error(ng-show="vm.registerForm.country.$error.required") Please choose a country from the list.
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.username.$error.usernameIsFree || vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength), 'success-bar': (vm.registerForm.username.$valid && !vm.registerForm.username.$error.usernameIsFree) }")
       input(right-placeholder, focused-placeholder="Username", ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
@@ -67,7 +63,7 @@
       p.form-error(ng-show="vm.registerForm.email.$dirty && vm.registerForm.email.$invalid") Please enter a valid email address.
 
     .validation-bar(ng-class="{ 'success-bar': (vm.registerForm.password.$valid) }")
-      toggle-password(ng-if="!vm.isSocialRegistration")
+      toggle-password-with-tips(ng-if="!vm.isSocialRegistration")
 
       .tips.password-tips(ng-show="vm.passwordFocus")
         h3 Password Tips:
@@ -76,14 +72,12 @@
 
         p(ng-class="{ 'has-letter': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasLetter) }") At least one letter
 
-        p(ng-class="{ 'has-symbol': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasSymbol) }") At least one symbol
-
-        p(ng-class="{ 'has-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasNumber) }") At least one number
+        p(ng-class="{ 'has-symbol-or-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
 
-    button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join Now
+    button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join
 
   section.terms
-    p By clicking "JOIN NOW" I agree to Topcoder's
+    p By clicking "JOIN" I agree to Topcoder's
 
     p #[a(href="http://www.topcoder.com/community/how-it-works/terms/", target="_blank") Terms of Service] and #[a(href="http://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank") Privacy Policy]
 

app/account/reset-password/reset-password.jade

@@ -36,7 +36,7 @@
   form.reset-form(name='vm.resetPasswordForm', role="form", ng-submit="vm.resetPasswordForm.$valid && vm.resetPassword()", novalidate)
 
     .validation-bar(ng-class="{ 'success-bar': (vm.resetPasswordForm.password.$valid) }")
-      toggle-password
+      toggle-password-with-tips
 
       .tips.password-tips(ng-show="vm.passwordFocus")
         h3 Password Tips:
@@ -45,9 +45,7 @@
 
         p(ng-class="{ 'has-letter': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasLetter) }") At least one letter
 
-        p(ng-class="{ 'has-symbol': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasSymbol) }") At least one symbol
-
-        p(ng-class="{ 'has-number': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasNumber) }") At least one number
+        p(ng-class="{ 'has-symbol-or-number': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
 
     .form-errors
       p.form-error(ng-show="vm.resetFailed") We were unable to reset your password. Please request another reset link. If you continue to have trouble, please contact 

app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js

@@ -0,0 +1,64 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('togglePasswordWithTips', togglePasswordWithTips);
+
+  function togglePasswordWithTips() {
+    return {
+      restrict: 'E',
+      require: '^form',
+      templateUrl: 'directives/account/toggle-password-with-tips/toggle-password-with-tips.html',
+      link: function(scope, element, attrs, formController) {
+        var vm = scope.vm;
+        vm.passwordField = formController.password;
+        vm.placeholder = vm.defaultPlaceholder;
+        vm.password = '';
+
+        var passwordInput = element.children()[0];
+
+        element.bind('click', function(event) {
+          passwordInput.focus();
+        });
+
+        element.bind('keyup', function(event) {
+          if (event.keyCode === 13) {
+            passwordInput.blur();
+          }
+        });
+
+        vm.onFocus = function(event) {
+          vm.passwordFocus = true;
+          vm.placeholder = '';
+        }
+
+        vm.onBlur = function(event) {
+          var relatedTarget = angular.element(event.relatedTarget);
+
+          // If you are blurring from the password input and clicking the checkbox
+          if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'passwordCheckbox') {
+            vm.passwordFocus = true;
+            vm.placeholder = '';
+          } else {
+            // If you are blurring from the password input and clicking anywhere but the checkbox
+            vm.passwordFocus = false;
+
+            if (vm.password === '' || vm.password === undefined) {
+              vm.placeholder = vm.defaultPlaceholder;
+              formController.password.$setPristine();
+            }
+          }
+        };
+
+        vm.toggleInputType = function() {
+          var $passwordInput = angular.element(passwordInput);
+
+          if ($passwordInput.attr('type') === 'text') {
+            $passwordInput.attr('type', 'password');
+          } else {
+            $passwordInput.attr('type', 'text');
+          }
+        }
+      }
+    };
+  }
+})();

app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade

@@ -0,0 +1,21 @@
+input#password-input(
+  ng-model="vm.password",
+  ng-model-options="{allowInvalid: true}",
+
+  ng-hide="vm.isSocialRegistration",
+  focus-on="focusOnInput",
+
+  ng-focus="vm.onFocus($event)",
+  ng-blur="vm.onBlur($event)",
+
+  name="password",
+  type="password",
+  placeholder="{{vm.placeholder}}",
+
+  ng-minlength="8",
+  ng-maxlength="64",
+  has-letter,
+  has-symbol-or-number,
+  required)
+
+label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", id="passwordCheckbox", ng-model="focusOnInput", ng-change="vm.toggleInputType()")] Show

app/directives/account/toggle-password-with-tips/toggle-password-with-tips.spec.js

@@ -0,0 +1,15 @@
+/* jshint -W117, -W030 */
+describe('Toggle Password With Tips Directive', function() {
+  var scope;
+  var element;
+  // var challenge = mockData.getMockChallengeWithUserDetails();
+  // var spotlightChallenge = mockData.getMockSpotlightChallenges()[0];
+
+  beforeEach(function() {
+    bard.appModule('topcoder');
+    bard.inject(this, '$compile', '$rootScope');
+    scope = $rootScope.$new();
+  });
+
+  bard.verifyNoOutstandingHttpRequests();
+});

app/directives/account/toggle-password/toggle-password.directive.js

@@ -10,52 +10,52 @@
       templateUrl: 'directives/account/toggle-password/toggle-password.html',
       link: function(scope, element, attrs, formController) {
         var vm = scope.vm;
-        vm.passwordField = formController.password;
-        vm.placeholder = vm.defaultPlaceholder;
-        vm.password = '';
+        vm.currentPasswordField = formController.currentPassword;
+        vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
+        vm.currentPassword = '';
 
-        var passwordInput = element.children()[0];
+        var currentPasswordInput = element.children()[0];
 
         element.bind('click', function(event) {
-          passwordInput.focus();
+          currentPasswordInput.focus();
         });
 
         element.bind('keyup', function(event) {
           if (event.keyCode === 13) {
-            passwordInput.blur();
+            currentPasswordInput.blur();
           }
         });
 
-        vm.onFocus = function(event) {
-          vm.passwordFocus = true;
-          vm.placeholder = '';
+        vm.onCPFocus = function(event) {
+          vm.currentPasswordFocus = true;
+          vm.currentPasswordPlaceholder = '';
         }
 
-        vm.onBlur = function(event) {
+        vm.onCPBlur = function(event) {
           var relatedTarget = angular.element(event.relatedTarget);
 
           // If you are blurring from the password input and clicking the checkbox
-          if (relatedTarget.attr('type') === 'checkbox') {
-            vm.passwordFocus = true;
-            vm.placeholder = '';
+          if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'currentPasswordCheckbox') {
+            vm.currentPasswordFocus = true;
+            vm.currentPasswordPlaceholder = '';
           } else {
             // If you are blurring from the password input and clicking anywhere but the checkbox
-            vm.passwordFocus = false;
+            vm.currentPasswordFocus = false;
 
-            if (vm.password === '' || vm.password === undefined) {
-              vm.placeholder = vm.defaultPlaceholder;
-              formController.password.$setPristine();
+            if (vm.currentPassword === '' || vm.currentPassword === undefined) {
+              vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
+              formController.currentPassword.$setPristine();
             }
           }
         };
 
-        vm.toggleInputType = function() {
-          var $passwordInput = angular.element(passwordInput);
+        vm.toggleTypeAttribute = function() {
+          var $currentPasswordInput = angular.element(currentPasswordInput);
 
-          if ($passwordInput.attr('type') === 'text') {
-            $passwordInput.attr('type', 'password');
+          if ($currentPasswordInput.attr('type') === 'text') {
+            $currentPasswordInput.attr('type', 'password');
           } else {
-            $passwordInput.attr('type', 'text');
+            $currentPasswordInput.attr('type', 'text');
           }
         }
       }

app/directives/account/toggle-password/toggle-password.jade

@@ -1,22 +1,17 @@
-input#password-input(
-  ng-model="vm.password",
+input#current-password-input(
+  ng-model="vm.currentPassword",
   ng-model-options="{allowInvalid: true}",
 
   ng-hide="vm.isSocialRegistration",
-  focus-on="refocus",
+  focus-on="focusOnCurrentPasswordInput",
 
-  ng-focus="vm.onFocus($event)",
-  ng-blur="vm.onBlur($event)",
+  ng-focus="vm.onCPFocus($event)",
+  ng-blur="vm.onCPBlur($event)",
 
-  name="password",
+  name="currentPassword",
   type="password",
-  placeholder="{{vm.placeholder}}",
+  placeholder="{{vm.currentPasswordPlaceholder}}",
 
-  ng-minlength="8",
-  ng-maxlength="64",
-  has-letter,
-  has-symbol,
-  has-number,
   required)
 
-label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", ng-model="refocus", ng-change="vm.toggleInputType()")] Show
+label(ng-show="vm.currentPasswordFocus || vm.currentPasswordField.$dirty") #[input(type="checkbox", id="currentPasswordCheckbox", ng-model="focusOnCurrentPasswordInput", ng-change="vm.toggleTypeAttribute()")] Show

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

@@ -3,7 +3,7 @@
 
   angular.module('tcUIComponents')
     .directive('hasLetter', hasLetter)
-    .directive('hasSymbol', hasSymbol)
+    .directive('hasSymbolOrNumber', hasSymbolOrNumber)
     .directive('hasNumber', hasNumber)
     .directive('usernameIsFree', usernameIsFree)
     .directive('emailIsAvailable', emailIsAvailable);
@@ -22,12 +22,12 @@
     };
   }
 
-  function hasSymbol() {
+  function hasSymbolOrNumber() {
     return {
       require: 'ngModel',
       link: function(scope, element, attrs, ctrl) {
-        ctrl.$validators.hasSymbol = function(modelValue, viewValue) {
-          if (/[-!$@#%^&*()_+|~=`{}\[\]:";'<>?,.\/]/.test(viewValue)) {
+        ctrl.$validators.hasSymbolOrNumber = function(modelValue, viewValue) {
+          if (/[-!$@#%^&*()_+|~=`{}\[\]:";'<>?,.\/]/.test(viewValue) || /[\d]/.test(viewValue)) {
             return true;
           }
           return false;

app/directives/focus-on.directive.js

@@ -3,11 +3,12 @@
 
   angular.module('tcUIComponents').directive('focusOn', focusOn);
 
-  focusOn.$inject = ['$timeout'];
+  focusOn.$inject = ['$timeout', '$parse'];
 
-  function focusOn($timeout) {
+  function focusOn($timeout, $parse) {
     return function(scope, element, attr) {
-      scope.$watch('refocus', function(newValue) {
+      var model = $parse(attr.focusOn);
+      scope.$watch(model, function(newValue) {
         $timeout(function() {
           if (newValue !== undefined) {
             element[0].focus();

app/index.jade

@@ -50,6 +50,7 @@ html
     link(rel="stylesheet", href="assets/css/member-dashboard/community-updates.css")
     link(rel="stylesheet", href="assets/css/layout/header.css")
     link(rel="stylesheet", href="assets/css/layout/footer.css")
+    link(rel="stylesheet", href="assets/css/directives/toggle-password-with-tips.css")
     link(rel="stylesheet", href="assets/css/directives/toggle-password.css")
     link(rel="stylesheet", href="assets/css/directives/tc-section.css")
     link(rel="stylesheet", href="assets/css/directives/tc-paginator.css")
@@ -125,6 +126,7 @@ html
     script(src="blocks/logger/logger.js")
     script(src="directives/tcui-components.module.js")
     script(src="directives/account/toggle-password/toggle-password.directive.js")
+    script(src="directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js")
     script(src="directives/account/validate-email.directive.js")
     script(src="directives/account/validate-login.directive.js")
     script(src="directives/account/validate-register.directive.js")

app/settings/account-info/account-info.jade

@@ -19,10 +19,10 @@
 
         .address-fields
           label *First name (Given name)
-            input(name="firstname", type="text", value="{{vm.userData.firstName}}", ng-model="vm.userData.firstName")
+            input(name="firstname", type="text", value="{{vm.userData.firstName}}", ng-model="vm.userData.firstName", maxlength="64", required)
 
           label *Last name (Surname)
-            input(name="lastname", type="text", value="{{vm.userData.lastName}}", ng-model="vm.userData.lastName")
+            input(name="lastname", type="text", value="{{vm.userData.lastName}}", ng-model="vm.userData.lastName", maxlength="64", required)
 
           label Address
             input(name="address", type="text", value="{{vm.homeAddress.streetAddr1}}", ng-model="vm.homeAddress.streetAddr1")
@@ -52,8 +52,8 @@
               minlength="1"
             )
 
-            .form-errors
-              p.form-error(ng-show="vm.updateAccountInfo.country.$error.required") Please enter a valid country.
+            .account-info-error
+              p.form-error(ng-show="vm.updateAccountInfo.country.$error.required") Please choose a country from the list.
 
 
         button(type="submit", ng-disabled="vm.updateAccountInfo.$invalid", ng-class="{'enabled-button': vm.updateAccountInfo.$valid}") Save

app/settings/edit-profile/edit-profile.jade

@@ -33,7 +33,7 @@
           )
 
         .form-errors
-          p.form-error(ng-show="vm.editProfile.location.$error.required") Please enter a valid country.
+          p.form-error(ng-show="vm.editProfile.location.$error.required") Please choose a country from the list.
 
       .field-section.description
         h4.field-title About Me

app/settings/update-password/update-password.controller.js

@@ -12,7 +12,8 @@
     activate();
 
     function activate() {
-      vm.defaultPlaceholder = 'Enter New Password';
+      vm.defaultPlaceholder = 'New Password';
+      vm.currentPasswordDefaultPlaceholder = 'Current Password';
       vm.username = userData.handle;
       vm.email    = userData.email;
     }
@@ -23,7 +24,9 @@
         vm.password = '';
         vm.currentPassword = '';
         vm.newPasswordForm.$setPristine();
+        vm.currentPasswordFocus = false;
         vm.placeholder = vm.defaultPlaceholder;
+        vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
 
         $log.info('Your password has been updated.');
       })