Merge pull request #17 from appirio-tech/login-validation

Add error bar to username field and check username after clicking login

Author: nlitwin

app/account/login/login.controller.js

@@ -3,12 +3,12 @@
 
   angular.module('tc.account').controller('LoginController', LoginController);
 
-  LoginController.$inject = ['$log', '$state', '$stateParams', 'tcAuth', 'authtoken'];
+  LoginController.$inject = ['$log', '$state', '$stateParams', 'tcAuth', 'authtoken', 'UserService'];
 
-  function LoginController($log, $state, $stateParams, tcAuth, authtoken) {
+  function LoginController($log, $state, $stateParams, tcAuth, authtoken, UserService) {
     var vm = this;
     vm.passwordReset = false;
-
+    vm.usernameExists = true;
 
     var redirect = function() {
       // check if the user is already logged in
@@ -50,20 +50,30 @@
       );
     }
 
-    vm.doLogin = function() {
-      // TODO placeholder, validate form etc
-      tcAuth.login(vm.username, vm.password).then(
-        function(data) {
-          // success
-          $log.debug('logged in');
-          redirect(true);
-        },
-        function(err) {
-          // handle error
-          vm.wrongPassword = true;
-          vm.password = '';
-        }
-      );
+    vm.login = function() {
+      UserService.validateUserHandle(vm.username)
+      .then(function() {
+        // User does not exist
+        vm.usernameExists = false;
+      })
+      .catch(function() {
+        // User exists
+        vm.usernameExists = true;
+        tcAuth.login(vm.username, vm.password).then(
+          function(data) {
+            // success
+            $log.debug('logged in');
+            redirect(true);
+          },
+          function(err) {
+            // handle error
+            vm.wrongPassword = true;
+            vm.password = '';
+          }
+        );
+      });
+
+
     };
 
     vm.socialLogin = function(backend) {

app/account/login/login.jade

@@ -1,19 +1,20 @@
 .login-container
   h1 Login
 
-  form(name="loginForm", role="form", ng-submit="loginForm.$valid && vm.doLogin()", novalidate)
+  form(name="loginForm", role="form", ng-submit="loginForm.$valid && vm.login()", novalidate)
     .form-errors
 
-      p.login-error(ng-show="loginForm.username.$error.usernameExists") This user does not exist.
+      p.login-error(ng-hide="vm.usernameExists") This user does not exist.
 
-      p.login-error(ng-if="vm.wrongPassword") That password doesn't match the one we have on file. Please try again.
+      p.login-error(ng-show="vm.wrongPassword") That password doesn't match the one we have on file. Please try again.
 
-      p.login-error(ng-if="vm.socialLoginError === 401") User with that profile is not registered.
+      p.login-error(ng-show="vm.socialLoginError === 401") User with that profile is not registered.
 
-      div(ng-if="loginForm.$submitted")
-        p.login-error(ng-if="loginForm.username.$error.required") Please enter your username or email.
+      div(ng-show="loginForm.$submitted")
+        p.login-error(ng-show="loginForm.username.$error.required") Please enter your username or email.
 
-    input(ng-model="vm.username", ng-model-options="{debounce: {'default': 500}}", name="username", placeholder="Username or Email", type="text", required, username-exists)
+    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.password", name="password", placeholder="Password", type="password", required)
 

assets/css/account/account.scss

@@ -34,7 +34,7 @@ body, .view-container {
   input {
     height: 40px;
     width: 290px;
-    padding-left: 10px;
+    padding-left: 15px;
     border: 0;
     @include source-sans;
     font-size: 16px;

assets/css/account/login.scss

@@ -13,8 +13,31 @@
     justify-content: space-between;
   }
 
-  .form-errors p {
-    margin-bottom: 10px;
+  .form-errors {
+    width: 300px;
+
+    p {
+      margin-bottom: 10px;
+    }
+  }
+
+  .validation-bar {
+    position: relative;
+
+    &:before {
+      content: '';
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 42px;
+      width: 5px;
+      background-color: red;
+    }
+
+    &.error-bar:before {
+      display: block;
+    }
   }
 
   .forgot-password {