Merge pull request #161 from appirio-tech/register-username-errors

Update content and fix username error messages in login and register

Author: nlitwin

app/account/login/login.controller.js

@@ -7,6 +7,7 @@
 
   function LoginController($log, $state, $stateParams, TcAuthService, AuthTokenService, UserService, NotificationService, Helpers) {
     var vm = this;
+    vm.$stateParams = $stateParams;
     vm.passwordReset = false;
     vm.usernameExists = true;
 
@@ -57,7 +58,11 @@
     }
 
     vm.login = function() {
+      vm.usernameExists = true;
+      vm.wrongPassword = false;
+
       if (Helpers.isEmail(vm.username)) {
+        vm.emailOrUsername = 'email';
         // ensure email exists
         UserService.validateUserEmail(vm.username).then(function(data) {
           if (data.valid) {
@@ -74,10 +79,11 @@
           _doLogin(vm.username, vm.password);
         });
       } else {
+        vm.emailOrUsername = 'username';
         // username - make sure it exists
         UserService.validateUserHandle(vm.username).then(function(data) {
           if (data.valid) {
-            // email doesn't exist
+            // username doesn't exist
             vm.usernameExists = false;
           } else {
             vm.usernameExists = true;
@@ -100,8 +106,6 @@
       callbackUrl = $state.href('login', params, {absolute: true});
       TcAuthService.socialLogin(backend, callbackUrl);
     };
-
-    vm.$stateParams = $stateParams;
   }
 
 })();

app/account/login/login.jade

@@ -1,36 +1,32 @@
 .login-container
   h1 Login
 
-  form(name="loginForm", role="form", ng-submit="loginForm.$valid && vm.login()", novalidate)
+  form(name="vm.loginForm", role="form", ng-submit="vm.loginForm.$valid && vm.login()", novalidate)
     .form-errors
+      p.form-error(ng-hide="vm.usernameExists") We couldn't find a member with that {{vm.emailOrUsername || "username"}}. Please check that you entered it correctly.
 
-      p.form-error(ng-hide="vm.usernameExists") This user does not exist.
-
-      p.form-error(ng-show="vm.wrongPassword") That password doesn't match the one we have on file. Please try again.
+      p.form-error(ng-show="vm.wrongPassword") That password is incorrect. Please check that you entered the right one.
 
       p.form-error(ng-show="vm.socialLoginError === 401") User with that profile is not registered.
 
-      div(ng-show="loginForm.$submitted")
-        p.form-error(ng-show="loginForm.username.$error.required") Please enter your username or email.
-
     div.validation-bar(ng-class="{'error-bar': !vm.usernameExists}")
-      input(ng-model="vm.username", ng-blur="vm.usernameExists = true", name="username", placeholder="Username or Email", type="text", required)
+      input(ng-model="vm.username", name="username", placeholder="Username or Email", type="text", required)
 
     input(ng-model="vm.password", name="password", placeholder="Password", type="password", required)
 
-    button(type="submit", ng-disabled="loginForm.$invalid", ng-class="{'enabled-button': loginForm.$valid}") Login
+    button(type="submit", ng-disabled="vm.loginForm.$invalid", ng-class="{'enabled-button': vm.loginForm.$valid}") Log In
 
   section.social
-    p log in with another account
+    p Log in with another account
 
     .social-icons
       i.fa.fa-github-square(ng-click="vm.socialLogin('github')")
       i.fa.fa-facebook-square(ng-click="vm.socialLogin('facebook')")
       i.fa.fa-google-plus-square(ng-click="vm.socialLogin('google-oauth2')")
       i.fa.fa-twitter-square(ng-click="vm.socialLogin('twitter')")
 
-  a.forgot-password(ui-sref="resetPassword") Forgot Password?
+  a.forgot-password(ui-sref="resetPassword") Forgot your password?
 
-  p.redirect Don't have an account? 
-    a(ui-sref="register(vm.$stateParams)") Join Now.
+  p.redirect Not a member yet? 
+    a(ui-sref="register(vm.$stateParams)") Join now.
 

app/account/register/register.jade

@@ -36,28 +36,26 @@
       .tips.username-tips(ng-show="vm.usernameTips")
         h3 Username Tips:
 
-        p This will be public to other members
+        p Your username will be public
 
-        p Between 2 and 15 characters
+        p Please choose one that is between 2 and 15 characters
 
-        p Can contain numbers and letters
-
-        p You can always change it later
+        p It can contain letters, numbers, and these characters: -_.{}[]
 
     .form-errors
-      p.form-error(ng-show="vm.registerForm.username.$error.usernameIsFree") This username already exists.
+      p.form-error(ng-show="vm.registerForm.username.$dirty && vm.registerForm.username.$error.usernameIsFree", ng-bind="vm.usernameErrorMessage")
 
-      p.form-error(ng-show="vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength") Username must be between 2 and 15 characters.
+      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.
 
     .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-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:
 
-        p This will be private and not shared with anyone.
+        p Your email address will be private and not shared with anyone.
 
-        p We will occasionally send you emails related to your account or interests.
+        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")
@@ -70,26 +68,28 @@
       .tips.password-tips(ng-show="vm.passwordFocus")
         h3 Password Tips:
 
-        p(ng-class="{ 'has-length-between-range': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.minlength && !vm.registerForm.password.$error.maxlength && !vm.registerForm.password.$error.required) }") Must be between 8 and 64 characters
+        p Your password must have:
+
+        p(ng-class="{ 'has-length-between-range': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.minlength && !vm.registerForm.password.$error.maxlength && !vm.registerForm.password.$error.required) }") At least 8 characters
 
         p(ng-class="{ 'has-letter': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasLetter) }") At least one letter
 
         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
+    button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join Now
 
   section.terms
-    p By clicking "JOIN" I agree to Topcoder's
+    p By clicking "JOIN NOW" you 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]
 
   section.social
-    p Register using another account.
+    p Use an existing account to register.
 
     .social-icons
       i.fa.fa-github-square(ng-click="vm.socialRegister('github')")
       i.fa.fa-facebook-square(ng-click="vm.socialRegister('facebook')")
       i.fa.fa-google-plus-square(ng-click="vm.socialRegister('google-oauth2')")
 
-  p.redirect Already have an account? 
-    a(ui-sref="login(vm.$stateParams)") Login.
+  p.redirect Already a member? 
+    a(ui-sref="login(vm.$stateParams)") Log in.

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

@@ -65,6 +65,23 @@
             if (res.valid) {
               return defer.resolve();
             } else {
+              switch (res.reasonCode) {
+                case 'INVALID_LENGTH':
+                  scope.vm.usernameErrorMessage = 'That username is not the correct length or format.';
+                  break;
+                case 'INVALID_FORMAT':
+                  scope.vm.usernameErrorMessage = 'That username is not the correct length or format.';
+                  break;
+                case 'INVALID_HANDLE':
+                  scope.vm.usernameErrorMessage = 'That username is not allowed.';
+                  break;
+                case 'ALREADY_TAKEN':
+                  scope.vm.usernameErrorMessage = 'That username is already taken.'
+                  break;
+                default:
+                  scope.vm.usernameErrorMessage = 'That username is not the correct length or format.';
+              }
+
               return defer.reject(res.reasonCode);
             }
           }).catch(function(err) {

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

@@ -128,7 +128,6 @@ html
     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")
     script(src="directives/badges/badge-tooltip.directive.js")
     script(src="directives/challenge-tiles/challenge-tile.directive.js")

app/index.jade

@@ -121,8 +121,6 @@ a {
 }
 
 .form-notice {
-  margin-top: 5px;
-  margin-bottom: 5px;
   font-size: 13px;
   color: #58595B;
 }