I am doing a simple form in reactjs which is working on a nodejs server. I want to change the state of my form component to hidden once my server verifies that the informations is correct.
Here is the form component:
import React from 'react'
class Login extends React.Component {
constructor(props){
super(props);
this.state = {
showForm: true,
email: '',
password: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
const target = event.target;
const name = target.name;
const value = target.value;
this.setState({
[name]: value
});
}
handleSubmit(event){
event.preventDefault();
fetch('http://localhost:3000/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: this.state.email,
password :this.state.password,
})
});
this.setState({showForm:false});
}
render() {
return (
<div>{this.state.showForm ?
<form>
<label>
email
<input
type="text"
name="email"
onChange={this.handleInputChange} />
</label>
<br />
<label>
password
<input
type="password"
name="password"
onChange={this.handleInputChange} />
</label>
<input type="submit" value="Valider" onClick={this.handleSubmit}/>
</form> : null}
</div>
);
}
}
export default Login;
Here, once I submit, my form posts the information on localhost:3000/login and my server verifies the information with my database thanks to the nodejs controller down there:
var User = require('../database/Models/User');
var Users = {
login : function(req, res){
var formEmail = req.body.email;
var formPassword = req.body.password;
User.findOne({ where: {email: formEmail} }).then(function(user) {
if(user){
if (user.password == formPassword){
console.log('User connected');
}else{
console.log('Password incorrect');
}
}else{
console.log('Login incorrect');
}
})
}
};
module.exports = Users;
I want that when my controller verified that the information of the form is correct (where i console.log('user connected');) then change the state of the component (normally with setState({showForm:true}) ). But I can't do the import of the component in my controller (to use LoginComponent.setState({showForm:true}) because import is using es6 syntax and nodejs doesn't implement it.
Thanks for the help!
via Aria Groult
No comments:
Post a Comment