Saturday 29 April 2017

Logging in User express angular with jwt

I have an app that USED to work and broke at some point and I need help fixing it please. When I submit the register form, and there is an existing user, it doesn't show the message. It also doesn't show the login success message for successful user, but it does add the user to the database.

My page login-register.html that shows two forms. Login:

<h3><i class="fa fa-sign-in"></i>  Login</h3>
            <hr />
                <div ng-if="vm.message" class="alert alert-success" role="alert">
                  <p></p>
                </div>
                <div ng-if="vm.error" class="alert alert-danger" role="alert">
                  
                </div>

                <form ng-if="!vm.isLoggedIn()" role="login" ng-submit="vm.login()">
                  <div class="form-group" ng-class="{'has-error': vm.error}">
                    <label for="username">Email</label>
                    <input type="text" class="form-control input-sm" placeholder="Username" ng-model="vm.username" autocapitalize="none">
                  </div>
                  <div class="form-group" ng-class="{'has-error': vm.error}">
                    <label for="username">Password</label>
                    <input type="password" class="form-control input-sm" placeholder="Password" ng-model="vm.password" autocapitalize="none">
                  </div>
                  <button type="submit" class="btn btn-sm btn-success">Login</button>
                </form>

and Register:

<h3><i class="fa fa-users"></i>  Register</h3>
                <hr />
                <div ng-if="vm.registerMessage" class="alert alert-success" role="alert">
                  <p></p>
                </div>
                <div ng-if="vm.registerError" class="alert alert-danger" role="alert">
                  
                </div>
                <form ng-hide="vm.message" name="register" ng-submit="vm.register()">
                  <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name" placeholder="Name" ng-model="vm.name" autocapitalize="none">
                  </div>
                  <div class="form-group">
                    <label for="phone">Phone</label>
                    <input type="text" class="form-control" id="phone" placeholder="555-867-5309" ng-model="vm.phone" autocapitalize="none">
                  </div>
                  <div class="form-group">
                    <label for="username">Email</label>
                    <input type="username" class="form-control" id="username" placeholder="Email Address" name="username" ng-model="vm.username" autocapitalize="none">
                  </div>
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" ng-model="vm.password" autocapitalize="none">
                  </div>
                  <div class="form-group">
                    <label for="password-repeat">Repeat Password</label>
                    <input type="password" class="form-control" id="password-repeat" placeholder="Password" ng-model="vm.passwordRepeat" autocapitalize="none">
                  </div>
                  <button type="submit" class="btn btn-success">Register</button>
                </form>

My login-controller.js (angular side):

 vm.register = function() {
        //check that passwords match
      if(vm.password != vm.passwordRepeat) {
        vm.registerError = "Passwords must match.";
        return;
      } else {
        console.log("Valid form.  Checking for existing user.");
        //check if user exists
        $http.get('/api/users/userExists', vm.username).then(function(response){
          console.log(response);
          if(response.message == true) {
            vm.registerError = "A user with that email address already exists.";
            return;
          } else if(response.message == false) {
            //create user object to send to server
            var user = {
              username: vm.username,
              password: vm.password,
              name: vm.name,
              phone: vm.phone
            };
            $http.post('/api/users/register', user)
            //success message
            .then(function(result){
              console.log(result);
              vm.registerMessage = "Registration success!  Please login.";
              vm.user = result.user;
              return;
            }, function(error){
              console.log(error);
              vm.registerError = [];
              for(var i=1; i<error.data.errors.length; i++){
                vm.registerError.push(error.data.errors[i]);
                return;
              }
            });
          }
        }, function(error){
          console.log(error);
          vm.registerError = error;
          return;
        });
      }
  };

My API users.controller.js (node side): CHECK IF USER EXISTS FUNCTION

module.exports.userExists = function(req, res) {
  var username = req.params.username;
  console.log('Check if ' + username + ' exists.');
  //see if user exists in db and return true or false
  User
    .findOne({username: username})
    .select('username')
    .exec(function(err, user) {
      console.log("find user result");
      if (err) {
        console.log("Server error",err);
        res.status(500).json({error: err});
      } else if(!user) {
        console.log("User not found in database", username);
        res.status(200).json({message: false});
      } else {
        // send TRUE for userExists
      res.status(200).json({message: true, user: user});
      }
    });
};

REGISTER FUNCTION

module.exports.register = function(req, res) {
  console.log('registering user');
  //create the user object with hashed pass
  var user = {
    username: req.body.user.username,
    name: req.body.user.name,
    phone: req.body.user.phone,
    password: bcrypt.hashSync(req.body.user.password, bcrypt.genSaltSync(10))
  };
  console.log("User",user); //log the hashed user info
  //save user to db
  User.create(user, function(err, user) {
    if (err) {
      console.log(err);
      //send error message back
      res.status(400).json({err: err, error: err.message});
    } else {
      //send user and success message back
      console.log('user created', user);
      res.status(201).json({user: user, message: "Registration success!  Please login."});
    }
  });
};

And, of course, my auth routes for the API:

//Authentication routes
router.route('/users/register').post(ctrlUsers.register);
router.route('/users/login').post(ctrlUsers.login);
router.route('/users/userExists').post(ctrlUsers.userExists);



via user3561890

No comments:

Post a Comment