I have one question. I am developing login and registration page using MERN development. I am stuck at one point please anyone help me out. My problem is that on Database only token value is store form data like name, email, password etc… not store in database.
here is my back end code
Controller.js file
const userAdd = async (req,res)=>{
let {name,email,password,cpassword} = req.body;
let data = new users({name,email,password,cpassword});
let response = await data.save();
let myToken = await data.getAuthToken();
res.status(200).json({message: 'User added sucessfully', data:response, token:myToken});
}
the above code is my controller file
users.js
const mongoose = require('mongoose');
var bcrypt = require('bcryptjs');
var jwt = require('jsonwebtoken');
const connection = require('../config/db');
var userSchema = new mongoose.Schema({
name: String,
email: String,
password: {
type: String,
select: true
},
tokens: [
{
token:{
type: String,
required: true,
}
}
]
},{
timestamps: true
})
userSchema.pre ('save',function(next){
var salt = bcrypt.genSaltSync(10);
if(this.password && this.isModified('password')){
this.password = bcrypt.hashSync(this.password, salt);
}
next()
})
userSchema.methods.getAuthToken = async function(data){
let params = {
id: this._id,
name: this.name,
email: this.email,
}
var tokenValue = jwt.sign(params, process.env.SECRETKEY,{expiresIn:'300000s'});
this.tokens = this.tokens.concat({token:tokenValue})
await this.save();
return tokenValue;
}
let users = connection.model("users",userSchema);
module.exports = users;
the above code is my model file
Now come to my front-end part
const Register = () => {
const [inputField, setInputField] = useState({
name: '',
email: '',
password: '',
cpassword: ''
})
const [errorField, setErrorField] = useState({
nameErr: '',
emailErr: '',
passwordErr: '',
cpasswordErr: ''
})
const inputHandler = (e) =>{
setInputField({...inputField, [e.target.name] : e.target.value})
}
const submitButton = async () =>{
if(validForm()){
let url = 'http://localhost:8080/users/add'
let options={
method: "POST",
url: url,
headers:{
},
data: inputField
}
try{
let res = await axios(options)
console.log("res",options);
if(res.status == 200){
toast.success("Added Sucessfully");
}
}
catch(e){
toast.error("Something went wrong..!");
}
}else{
toast.error("Form Invalid..!");
}
}
const validForm = () =>{
let formIsValid = true;
const regexEmail = RegExp(/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
setErrorField({
nameErr: '',
emailErr: '',
passwordErr: '',
cpasswordErr: ''
})
if(inputField.name == ''){
formIsValid = false;
setErrorField(prevState=>({
...prevState,nameErr : "Please enter name"
}))
}
if(inputField.email == ''){
formIsValid = false;
setErrorField(prevState=>({
...prevState,emailErr : "Please enter email"
}))
}
if(inputField.email != '' && !regexEmail.test(inputField.email)){
formIsValid = false;
setErrorField(prevState=>({
...prevState,emailErr : "Please enter valid email"
}))
}
if(inputField.password == ''){
formIsValid = false;
setErrorField(prevState=>({
...prevState,passwordErr : "Please enter password"
}))
}
if(inputField.cpassword == ''){
formIsValid = false;
setErrorField(prevState=>({
...prevState,cpasswordErr : "Please enter confirm password"
}))
}
if(inputField.cpassword != '' && inputField.password != inputField.cpassword){
formIsValid = false;
setErrorField(prevState=>({
...prevState,cpasswordErr : "Password does not match"
}))
}
return formIsValid;
}
return (
<>
<div className='register__header section__padding'>
<div className='register__header-content'>
<span className='register-suptitle'>Register</span>
<h1>Register to get started</h1>
<p>Consectetur numquam poro nemo veniam <br/> eligendi rem adipisci quo modi.</p>
<div className="register-page__input">
<Link to="/login" className='register-page-menu-button-1'>
<span className='register-page-menu-icon-1'>
<img src={left_icon} alt='left-icon'/>
</span>
<span>Back to login page</span>
</Link>
</div>
</div>
<div className='register__message'>
<div className='register__message-data'>
<div className='contact-image'>
<div className='circle-1'></div>
<div className='circle-2'></div>
<div className='circle-3'></div>
</div>
<div className='register-contact-form'>
<div className='register-main-content'>
<h3>Register to get started</h3>
<ToastContainer/>
<form method="post" autoComplete='off' action='/'>
<div className='register-group_input'>
<input type="text" name="name"
required placeholder='Username' value={inputField.name}
onChange={inputHandler}/>
{
errorField.nameErr.length > 0 && <div className='error-class'> <span className='error'>{errorField.nameErr}</span></div>
}
</div>
<div className='register-group_input'>
<input type="email" name="email"
required placeholder='Email' value={inputField.email}
onChange={inputHandler} />
{
errorField.emailErr.length > 0 && <div className='error-class'> <span className='error'>{errorField.emailErr}</span></div>
}
</div>
<div className='register-group_input'>
<input type="password" name="password"
required placeholder='Password' value={inputField.password}
onChange={inputHandler}/>
{
errorField.passwordErr.length > 0 && <div className='error-class'> <span className='error'>{errorField.passwordErr}</span></div>
}
</div>
<div className='register-group_input'>
<input type="password" name="cpassword"
required placeholder='Confirm Password' value={inputField.cpassword}
onChange={inputHandler}/>
{
errorField.cpasswordErr.length > 0 && <div className='error-class'> <span className='error'>{errorField.cpasswordErr}</span></div>
}
</div>
<button type="button" className='register-send_btn' onClick={submitButton}>
<span className='register-send_icon'>
<img src={send_icon} alt='send_icon'/>
</span>
<span>Register</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Register;
This is my Register.jsx file.