Merge pull request #352 from appirio-tech/feature/validation-error-styling-login-reg

SUP-1792, [Registration] Apply mobile design

Author: vikasrohit

app/account/register/register.jade

@@ -34,8 +34,8 @@
         minlength="1"
       )
 
-      .form-errors
-        p.form-error(ng-show="vm.registerForm.country.$error.required") Please choose a country from the list
+      .form-input-error(ng-show="vm.registerForm.country.$dirty && vm.registerForm.country.$invalid", ng-messages="vm.registerForm.country.$error")
+        p.form-error(ng-message="required") Please choose a country from the list
 
     .section-break
       hr
@@ -53,10 +53,13 @@
 
         p It can contain letters, numbers, and these characters: -_.{}[]
 
-    .form-errors
-      p.form-error(ng-show="vm.registerForm.username.$dirty && vm.registerForm.username.$error.usernameIsFree", ng-bind="vm.usernameErrorMessage")
+    .form-input-error(ng-if="vm.registerForm.username.$dirty && vm.registerForm.username.$invalid", ng-messages="vm.registerForm.username.$error")
+      p.form-error(ng-message="required") Please enter a username.
+      p.form-error(ng-message="usernameIsFree") {{vm.usernameErrorMessage}}
 
-      p.form-error(ng-show="vm.registerForm.username.$dirty && (vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength)") That username is not the correct length or format.
+      p.form-error(ng-message="minlength") That username is not the correct length or format.
+
+      p.form-error(ng-message="maxlength") That username is not the correct length or format.
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.email.$dirty && vm.registerForm.email.$invalid), 'success-bar': (vm.registerForm.email.$valid) }")
       input-sticky-placeholder(sticky-placeholder="Email", ng-model="vm.email")
@@ -69,10 +72,12 @@
 
         p We'll occasionally send you emails related to your activities or interests.
 
-    .form-errors
-      p.form-error(ng-show="vm.registerForm.email.$dirty && (vm.registerForm.email.$error.emailIsAvailable || vm.registerForm.email.$error.validEmail)", ng-bind="vm.emailErrorMessage")
+    .form-input-error(ng-show="vm.registerForm.email.$dirty && vm.registerForm.email.$invalid", ng-messages="vm.registerForm.email.$error")
+      p.form-error(ng-message="emailIsAvailable") {{vm.emailErrorMessage}}
+
+      p.form-error(ng-message="validEmail") {{vm.emailErrorMessage}}
 
-      p.form-error(ng-show="vm.registerForm.email.$dirty && vm.registerForm.email.$error.required") Please enter an email address.
+      p.form-error(ng-message="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/index.jade

@@ -107,6 +107,7 @@ html
     script(src='../bower_components/intro.js/intro.js')
     script(src='../bower_components/angular-intro.js/src/angular-intro.js')
     script(src='../bower_components/angular-jwt/dist/angular-jwt.js')
+    script(src='../bower_components/angular-messages/angular-messages.js')
     script(src='../bower_components/angular-sanitize/angular-sanitize.js')
     script(src='../bower_components/angular-ui-router/release/angular-ui-router.js')
     script(src='../bower_components/x2js/xml2json.min.js')

app/topcoder.module.js

@@ -28,7 +28,8 @@
     'CONSTANTS',
     'dcbImgFallback',
     'toaster',
-    'angular-intro'
+    'angular-intro',
+    'ngMessages'
   ];
 
   angular.module('topcoder', dependencies).run(appRun);

bower.json

@@ -32,6 +32,7 @@
     "angular-img-fallback": "~0.1.3",
     "angular-intro.js": "~1.3.0",
     "angular-jwt": "~0.0.9",
+    "angular-messages": "~1.4.7",
     "angular-sanitize": "1.4.x",
     "angular-ui-router": "~0.2.15",
     "angular-xml": "~2.1.1",