app/nextjs/components/organisms/Register.js

import React, {Fragment} from 'react';
import { connect } from "react-redux";
import Validator from "validator";
import {FormLabel, FormHelperText,InputLabel, Input,TextField, FormGroup, FormControlLabel, Checkbox, Button, Typography, Link } from '@material-ui/core';

import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';
import FormControl from '@material-ui/core/FormControl';
import { withStyles } from '@material-ui/core/styles';
import { registerUserRequest, subscribeToNewsletterRequest } from "../../actions/user"

const styles = theme => ({
    container: {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
    },
    textField: {
        width: '100%'
    },
    form: {
        display: 'flex',
        flexDirection: 'column',
    },
    input50: {
        width: '50%',
    },
    checkboxError:{
        color:'red'
    }

});

class Register extends React.Component {
    state = {
        data: {
            prenom: '',
            nom: '',
            email: '',
            password: '',
            checkNewsletter: false,
            checkCGU: false,
        },
        errors: {},
        loading: false,
        showPassword:false
    }

    validate = data => {
        const errors = {};
        if (!Validator.isEmail(data.email)) errors.email = "Email invalide";
        if (!!!data.password) errors.password = "Requis";
        if (!!!data.prenom) errors.prenom = "Requis";
        if (!!!data.nom) errors.nom = "Requis";
        if (!data.checkCGU) errors.checkCGU = "Requis";

        return errors;
    };

    onRegister = e => {
        e.preventDefault();
        const errors = this.validate(this.state.data);
        console.log('onSubmit')
        console.log(errors)
        this.setState({ errors: errors });

        if (Object.keys(errors).length === 0) {
            this.setState({ loading: true });

            this.props.registerUserRequest(this.state.data)

            if (this.state.data.checkNewsletter)
                this.props.subscribeToNewsletterRequest({ email: this.state.data.email })
        }

    };

    componentWillReceiveProps(nextProps) {
        this.setState({
            errors: nextProps.errors,
            loading: nextProps.loading
        })
    }
    onChange = e =>
        this.setState({
            data: { ...this.state.data, [e.target.name]: e.target.value }
        });
    handleCheckBoxChange = name => event => {
        this.setState({data:{ ...this.state.data, [name]: event.target.checked }});
    };

    handleChangePasswordVisibility = prop => event => {
        this.setState({ [prop]: event.target.value });
    };

    handleClickShowPassword = () => {
        this.setState({ showPassword: !this.state.showPassword });
    };

    render() {
        const { classes } = this.props;
        const { data, errors } = this.state;
        console.log('render errors');
        console.log(errors);
        console.log(this.state);

        return (
            <div className={classes.container}>

                <form className={classes.form}>
                    <FormGroup row>
                        <TextField
                            value={data.prenom}
                            className={classes.input50}
                            onChange={this.onChange}
                            id="prenom"
                            name="prenom"
                            label="Prénom"
                            margin="normal"
                            required
                            error={!!errors.prenom}
                        />
                        <TextField
                            value={data.nom}
                            className={classes.input50}
                            onChange={this.onChange}
                            id="nom"
                            name="nom"
                            label="Nom"
                            margin="normal"
                            required
                            error={!!errors.nom}
                        />
                    </FormGroup>

                    <TextField
                        value={data.email}
                        onChange={this.onChange}
                        id="emailRegister"
                        name="email"
                        label="Email"
                        margin="normal"
                        type="email"
                        required
                        error={!!errors.email}
                        autoComplete="username email"
                    />
                    <FormControl>
                        <InputLabel htmlFor="adornment-password">Password *</InputLabel>
                        <Input
                            name="password"
                            id="adornment-password"
                            type={this.state.showPassword ? 'text' : 'password'}
                            value={this.state.password}
                            onChange={this.onChange}
                            endAdornment={
                                <InputAdornment position="end">
                                    <IconButton aria-label="Toggle password visibility" onClick={this.handleClickShowPassword}>
                                        {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
                                    </IconButton>
                                </InputAdornment>
                            }
                            autoComplete="current-password"
                            error={!!errors.password}
                        />
                    </FormControl>

                    <FormControlLabel
                        control={
                            <Checkbox value={data.checkNewsletter}
                                onChange={this.handleCheckBoxChange('checkNewsletter')}
                            />
                        }
                        label="Je souhaite recevoir la newsletter de Talents Tube"
                        
                    />

                    <FormControlLabel
                        name="checkCGU"
                        className={!!errors.checkCGU&&classes.checkboxError}
                        control={
                                <Checkbox
                            error={!!errors.checkCGU }
                                value={data.checkCGU}
                                onChange={this.handleCheckBoxChange('checkCGU')}
                            />
                           
                        }
                        label="Je déclare avoir pris connaissance et accepte les termes et les CGU*"
                        required
                    />
                    <Button type="submit" variant="outlined" color="primary" onClick={this.onRegister}>
                        S'inscrire
                    </Button>

                    <Typography
                        paragraph={true}
                        align="center"
                    >Ou</Typography>

                </form>
                <Button variant="outlined" color="primary" onClick={this.props.linkedInAuth}>
                    Connexion avec Linkedin
                    </Button>
                <Button variant="outlined" color="primary" onClick={this.props.facebookAuth}>
                    Connexion avec Facebook
                    </Button>
                <div className={classes.form}>
                    <Typography
                        paragraph={true}
                        align="center"
                    >Je possède un compte Talents Tube ?
                         <Link href={"/Login"} className={classes.link}>
                            Se connecter
                        </Link>
                    </Typography>

                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        loading: !!state.user.loading,
        errors: state.user.errors
    };
}

export default withStyles(styles)(connect(mapStateToProps, { registerUserRequest, subscribeToNewsletterRequest })(Register));