I'm new to the MEAN stack, trying basic apps with tutorials. Getting user input from a registration form using Angular. Password getting encrypted using bcrypt. When I log the user object that is being sent from the registration form, in the front-end the object has all the appropriate data. Posting using $http.post() method. Once the object is received in the back-end controller, all the fields say 'undefined'.
I saw that a couple of people have previously discussed this same error and the only conclusion that everyone arrived at, was that the bcrypt.hashSync() function wasn't receiving the password or receiving it as undefined. How do I solve the problem of the function receiving it as "undefined"? Please help.
backend app.js file -
require('./api/data/db.js');
var express = require('express');
var app = express();
var path = require('path');
var bodyParser = require('body-parser');
var routes = require('./api/routes');
app.set('port',3000); //Defining port
app.use(function(req, res, next){
console.log(req.method, req.url);
next();
});
app.use(express.static(path.join(__dirname, 'public'))); // Delivering static files from public folder
app.use('/node_modules', express.static(__dirname+'/node_modules'));
app.use(bodyParser.urlencoded({ extended : false }));
app.use('/api',routes);
//Setting the port to listen to requests
var server = app.listen(app.get('port'), function(){
var port = server.address().port; //Extract port number fromserver object
console.log("App running. Port number - " + port);
});
register controller function (node.js backend) -
module.exports.register = function(req, res){
console.log("Registering Users");
console.log(req.body.email);
console.log(req.body.fname);
console.log(req.body.lname);
console.log(req.body.password);
var email = req.body.email;
var fname = req.body.fname;
var lname = req.body.lname;
var password = req.body.password;
User.create(
{
email: email,
fname: fname,
lname: lname,
password: bcrypt.hashSync(password, bcrypt.genSaltSync(10))
}, function(err, user){
if(err){
console.log(err);
res
.status(400)
.json(err);
} else {
console.log("User created", user);
res
.status(201)
.json(user);
}
}
);
};
register controller function (angular.js front-end) -
function RegisterController($http){
var vm = this;
vm.register = function(){
var user = {
email: vm.email,
fname: vm.fname,
lname: vm.lname,
password: vm.password
};
if(!vm.email || !vm.password){
vm.error = 'Please enter an email and password.';
} else {
if(vm.password !== vm.passwordRepeat){
vm.error = 'Please enter matching passwords.';
} else {
console.log(user);
$http.post('/api/users/register', user).then(function(result){
console.log(result);
console.log(user);
vm.message = 'Successful registration! Please login.';
vm.error= '';
}).catch(function(error){
console.log(error);
});
}
}
}
};
Node file with routing -
var express = require('express');
var router = express.Router();
var ctrlUsers = require('../controllers/users.controller.js');
router
.route('/users/register')
.post(ctrlUsers.register);
module.exports = router;
HTML -
<h1>Register</h1>
<div ng-if="vm.message" class="alert alert-success" role="alert">
<p>{{ vm.message }}</p>
</div>
<div ng-if="vm.error" class="alert alert-danger" role="alert">
<p>{{ vm.error }}</p>
</div>
<form ng-hide="vm.message" name="register" ng-submit="vm.register()">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" ng-model="vm.email" autocapitalize="none">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter password" ng-model="vm.password" autocapitalize="none">
</div>
...some more elements...
<button type="submit" class="btn btn-success">Register</button>
</form>
console:
GET /angular-app/app.js
GET /angular-app/register/register-controller.js
GET /angular-app/register/register.html
POST /api/users/register
Registering Users
undefined
undefined
undefined
undefined
Error: data and salt arguments required
