register.js

import React, {Component} from 'react';
import { Redirect } from 'react-router-dom'
import toastr from 'toastr';
import validator from 'validator';
import {SignupForm} from '../components/SignupForm'
import {postRegisterData} from "../api/authenticationApi";

class Register extends Component {
    constructor() {
        super();
        this.state = {
            isLoading: false,
            isRegistered: false,
            firstname: {value: '', isValid: true, message: ''},
            lastname: {value: '', isValid: true, message: ''},
            email: {value: '', isValid: true, message: ''},
            password: {value: '', isValid: true, message: ''},
            confirmPassword: {value: '', isValid: true, message: ''},
            acceptedTerms: {value: false, message: ''}
        };
    }

    onChange = (e) => {
        let state = this.state;
        state[e.target.name].value = e.target.value;
        this.setState(state);
       // console.log(this.state);
    };

    onAcceptTerms = () => {
        this.setState((prevState, props) => ({
            acceptedTerms: {
                value: !prevState.acceptedTerms.value,
                message: prevState.acceptedTerms.value
            }
        }))
    };

    onRegisterFormSubmit = (e) => {
        e.preventDefault();
        this.resetValidationStates();
        if (this.formIsValid()) {
            this.setState({isLoading: true});
            let userData = {
                firstname: this.state.firstname.value,
                lastname: this.state.lastname.value,
                email: this.state.email.value,
                password: this.state.password.value,
                confirmPassword: this.state.confirmPassword.value,
                acceptedTerms: this.state.acceptedTerms.value
            };

            postRegisterData(userData).then(() =>{
                toastr.success('Udało Ci sie założyć konto!', 'Dobra robota!');
                this.setState({isRegistered: true, isLoading: false});
                })
                .catch( ()  => {
                    this.setState({isLoading: false});
                    toastr.error('Konto o podanym adresie istnieje!', 'Ups!')
                    }
                )
        }
    };

    resetValidationStates = () => {
        let state = this.state;

        Object.keys(state).map(key => {
            if (state[key].hasOwnProperty('isValid')) {
                state[key].isValid = true;
                state[key].message = '';
            }
            return true;
        });
        this.setState(state);
    };

    formIsValid = () => {
        let state = this.state;

        if (validator.isEmpty(state.firstname.value)) {
            state.firstname.isValid = false;
            state.firstname.message = 'Podaj swoje imię';

            this.setState(state);
            return false;
        }
        if (validator.isEmpty(state.lastname.value)) {
            state.lastname.isValid = false;
            state.lastname.message = 'Podaj swoje nazwisko';

            this.setState(state);
            return false;
        }

        if (!validator.isEmail(state.email.value)) {
            state.email.isValid = false;
            state.email.message = 'Podaj poprawny adres email';

            this.setState(state);
            return false;
        }

        if (state.password.value.length < 6) {
            state.password.isValid = false;
            state.password.message = 'Hasło musi mieć conajmniej 6 znaków';

            this.setState(state);
            return false;
        }

        if (state.password.value.length > 25) {
            state.password.isValid = false;
            state.password.message = 'Hasło może mieć maksymalnie 25 znaków';

            this.setState(state);
            return false;
        }

        if (state.password.value.search(/\d/) === -1) {
            state.password.isValid = false;
            state.password.message = 'Hasło musi zawierać conajmniej 1 liczbę';

            this.setState(state);
            return false;
        }

        if (state.password.value.search(/[A-Z]/) === -1) {
            state.password.isValid = false;
            state.password.message = 'Hasło musi zawierać conajmniej 1 dużą literę';

            this.setState(state);
            return false;
        }

        /*eslint no-useless-escape:0*/
        if (state.password.value.search(/[!@#$%^&*)(+=._-]/) === -1) {
            state.password.isValid = false;
            state.password.message = 'Hasło musi zawierać conajmniej 1 znak specjalny';

            this.setState(state);
            return false;
        }

        if (state.password.value !== state.confirmPassword.value) {
            state.confirmPassword.isValid = false;
            state.confirmPassword.message = 'Hasła muszą być identyczne';

            this.setState(state);
            return false;
        }

        if (!state.acceptedTerms.value) {
            state.acceptedTerms.message = 'Musisz zaakceptować warunki korzystania z portalu!';

            this.setState(state);
            return false;
        }

        return true;
    };

    render() {
        let {firstname, lastname, email, password, confirmPassword, acceptedTerms, isLoading} = this.state;
        if(this.state.isRegistered) {
            return (
                <Redirect to='/login'/>
            );
        }
        return (
            <SignupForm
                firstname={firstname}
                lastname={lastname}
                email={email}
                password={password}
                confirmPassword={confirmPassword}
                acceptedTerms={acceptedTerms}
                onAcceptTerms={this.onAcceptTerms.bind(this)}
                onChange={this.onChange.bind(this)}
                onRegisterFormSubmit={this.onRegisterFormSubmit.bind(this)}
                isLoading = {isLoading}
            />
        )
    }
}

export default Register;