CODEWITHSUNDEEP
angularjsng-show
Aaron Manill
Aaron Manill

Reputation: 51

How do i render a failed login message on wrong login credentials

I am trying to render a message notifying the user that they have entered invalid credentials on their login attempt

I tried using a div with an ng-show that gets set when the res.status== 401, the variable gets set properly according to a console log after I set the variable, but the message is not being shown.

HTML code

<div class="" ng-show="badLogin">
 <span>Bad Login</span>
</div>
<form  class="text-center dash-spacing" name="loginForm" ng-hide="loggedin">
 User Email:<input autocomplete="email" type="text" ng-model="user.email" required minlength="8" placeholder="Enter email Here.">
 Password:<input autocomplete="password" type="password" ng-model="user.password" placeholder="Enter password Here.">
 <button id='login' ng-click="login(user)">Login</button>
</form>

AngularJS Controller

$scope.login = function(login){
 console.log('login function called');
 DashFactory.login(login).then(function(res){
   console.log('res', res);
   if(res.status == 200){
     $scope.userIn = res.data.user
     userService.setUser($scope.userIn)
     authService.authenticated = true;
   } else if (res.status == 401) {
     $scope.badLogin = true;
     console.log('badLogin?', $scope.badLogin);
     $scope.userIn = null;
   }
 })
}

Angular Factory:

  factory.login = function(user, callback){
    console.log('factory login');
    return $http({
      url: '/login',
      method: 'POST',
      data: user
    }).then(function(res){
      console.log('line 28', res);
      if(res.data.token){
        localStorage.setItem('user', res.data.user);
        localStorage.setItem('JWT', res.data.token);
        $http.defaults.headers.common.Authorization = res.data.token;
        console.log("login success DashFactory line 25!", res.data);
        var data = res.data
        console.log('data', data);
        return res
      }
    }, function(res){
      console.log('we have err', res);
      return res

    }
  )
  }

Node Server Controller:

login: function(req, res){
    console.log('logging', req.body);
    User.findOne({email: req.body.email}, function(err, user){
        if(err){
            res.status(400).send("Could not login user.");
        }
        else{
            console.log('attempting bcrypt');
            console.log(user);
            if(bcrypt.compareSync(req.body.password, user.password)){
                const payload = {
                    name: user.name,
                    admin: user.access
                };
                        var token = jwt.sign(payload, app.get('superSecret'), {
                            expiresIn: 86400 // expires in 24 hours
                        });
                        console.log('token', token);

                        // return the information including token as JSON
                        res.json({
                            success: true,
                            user: user.name,
                            message: 'Enjoy your token!',
                            token: token,
                            userid: user._id
                        });
                    console.log('res.json', res.json);
                    console.log('payload', payload);
            }
    else{
      console.log('invalid password');
      res.json(401, {message: "invalid username/password"})
    }
        }
    })
return false
},

I would expect when a user gives bad credentials the server would send the 401 status(this works), and angularJS should set the badLogin variable to true, the console log on the line after says it does, and then the ng-show on the HTML should be triggered to show the Bad Login span(this is NOT happening).

Upvotes: 0

Views: 596

Answers (2)

Aaron Manill
Aaron Manill

Reputation: 51

Issue was due to an $httpProvider.interceptors and not with the actual listed code, problem has been resolved by removing a redirect in the interceptor.

Thanks for pointers Michael Lynch

Upvotes: 0

Michael Lynch
Michael Lynch

Reputation: 1743

On your DashFactory.login promise, you can look for failed responses by using .catch(fn). 

DashFactory.login(login).then(function(res){
    // Success
    $scope.badLogin = false;
    $scope.userIn = res.data.user
    userService.setUser($scope.userIn)
    authService.authenticated = true;
}).catch(function(res){
    // Failure
    $scope.badLogin = true;
    console.log('badLogin?', $scope.badLogin);
    $scope.userIn = null;
}});

AngularJS Docs: The Promise API

I wrote a simple angularJS application on Plunker to demonstrate that not authorized requests hit the failure callback: https://next.plnkr.co/edit/cfItfc7U9GSjuGyx

Upvotes: 0

Related Questions