Argthtjtr

import React, { Component } from 'react';

import { Link } from 'react-router-dom';



class SignUpForm extends Component {

    constructor() {

        super();



        this.state = {

            email: '',

            password: '',

            username: '',

            hasAgreed: false,

            formErrors: {email: '', password: ''},

            emailValid: false,

            passwordValid: false,

            formValid: false

        };



        this.handleChange = this.handleChange.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this);

    }



    handleChange(e) {

        let target = e.target;

        let value = target.type === 'checkbox' ? target.checked : target.value;

        let name = target.name;



        this.setState({[name]: value});

    }



    handleSubmit(e) {

        e.preventDefault();



        console.log('The form was submitted with the following data:');



        console.log([this.state.email, cryptr.encrypt(this.state.password), this.state.username, this.state.hasAgreed]);



       //I want to send my above data to node server



    }



    render() {

        return (

            <div className="FormCenter">

                <form onSubmit={this.handleSubmit} className="FormFields" method="POST" action="/register">

                    <div className="FormField">

                        <label htmlFor="name">Username</label>

                        <input type="text" id="name" placeholder="Enter your username" name="username" value={this.state.username} onChange={this.handleChange} />

                    </div>

                    <div className="FormField">

                        <label htmlFor="password">Password</label>

                        <input type="password" id="password" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />

                    <div className="FormField">

                        <label htmlFor="email">E-Mail Address</label>

                        <input type="email" id="email" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />

                    </div>

                    </div>



                    <div className="FormField">

                        <label>

                            <input type="checkbox" name="hasAgreed" value={this.state.hasAgreed} onChange={this.handleChange} /> I agree all statements in <a href="google.com">terms of service</a>

                        </label>

                    </div>

                </form>

            </div>

        );

    }

}



export default SignUpForm;

const express = require("express");

const bodyParser = require("body-parser");

const path = require("path");



const app = express();



app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static(path.join(__dirname, "src/containers/user")));



//the request in which I expect input data

app.post('/register', (req, res) => {

    if (!req.body) return res.sendStatus(400);

    console.log(req.body, "body");

    res.send('welcome, ' + req.body.username)

});



app.listen(5000, () => {

    console.log("is listening on port 5000");

});