zaza

import React, { Component } from 'react';
import Form from './Children/Form'
import axios from 'axios'

class Registration extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      email: '',
      password: '',
      confirm_password: '',
      error: null,
      errorMSG: ''
    }

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

  }

  handleInputChange(e) {

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

  }

  handleSubmit(e) {
    e.preventDefault();

    if (this.state.username.trim().length < 6) {
      this.setState({
        error: true,
        errorMSG: 'მომხმარებლის სახელის სიგრძე მინიმუმ 6 უნდა იყოს'
      })
      return false
    }

    if (this.state.email.trim().length < 1) {
      this.setState({
        error: true,
        errorMSG: 'გთხოთ შეავსეთ Email-ის ველი'
      })
      return false

    }

    if (this.state.password.trim().length < 8) {
      this.setState({
        error: true,
        errorMSG: 'password character length must be at least 8 character'
      })
      return false

    }

    if (/\d/.test(this.state.password) === false) {
      this.setState({
        error: true,
        errorMSG: 'პაროლი უნდა შეიცავდეს ერთ ციფრს მაინც'
      })
      return false
    }

    if (this.state.password !== this.state.confirm_password) {
      this.setState({
        error: true,
        errorMSG: 'პაროლები არ ემთხვევა'
      })
      return false
    }


    axios.post('/api/signup', {
      username: this.state.username,
      email: this.state.email,
      password: this.state.password,
      confirm_password: this.state.confirm_password
    })
      .then(res => res.data)
      .then(data => {
        window.location.replace(data.location)
      })
      .catch(error => {
        if (error.response) {
          this.setState({
            error: true,
            errorMSG: error.response.data.message
          })
        }
        else if (error.request) {
          console.log(error.request);
        } else {
          console.log('Error', error.message);
        }

      })




  }



  render() {
    return (
      <div>
        <Form>
          <form id="formId" className='fc' onSubmit={this.handleSubmit}>
            <input type="text" value={this.state.username} placeholder="username" autoComplete="off" name="username" onChange={this.handleInputChange} /><br />
            <input type="email" placeholder="email" value={this.state.email} autoComplete="off" name="email" onChange={this.handleInputChange} /><br />
            <input type="password" placeholder="password" value={this.state.password} autoComplete="off" name="password" onChange={this.handleInputChange} /><br />
            <input type="password" placeholder="confirm passowrd" autoComplete="off" value={this.state.confirm_password} name="confirm_password" onChange={this.handleInputChange} /><br />
            <button type="submit">Submit</button>
            {this.state.error ? this.state.errorMSG : null}
          </form>
        </Form>
      </div>
    );
  }
}
export default Registration;