Saturday, 8 April 2017

Changing State of React Component in NodeJs Controller

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