erroer

import React from 'react';
import PropTypes from 'prop-types';

import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon,
  Form, Grid, Header, Message, Segment} from 'reactstrap';
import Validator from 'validator';

import InlineError from '../../../components/messages/InlineError';
import Clock from '../../../components/timeRuns/Clock';



class Login extends React.Component {
 //Run Clock =================
    constructor(props){
      super(props);
      this.state={
          deadline:'June 30, 2018',
          newDeadline:''
        }
    }

    changeDeadline(){
        this.setState({deadline: this.state.newDeadline});
    }
  //================


state = {
  data: {
      email:"",
      password:""
  },
  loading: false,
  errors: {}
}
onChange = e => this.setState({
  data: { ...this.state.data, [e.target.name]: e.target.value }
});

onSubmit = () => {
  const errors = this.validate(this.state.data);
  this.setState({ errors });
  if (Object.keys(errors).length === 0) {
    this.setState({ loading: true });
    this.props
      .submit(this.state.data)
      .catch(err =>
        this.setState({ errors: err.response.data.errors, loading: false })
      );
  }
};

validate = data => {
  const errors = {};
  if (!Validator.isEmail(data.email)) errors.email = "Invalid email";
  if (!data.password) errors.password = "Can't be blank";
  return errors;
};
//=======================




  render() {
    //Login validator 2
    const { data, errors, loading } = this.state;
    //=================
    return (
      <div className="app flex-row align-items-center login-form">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>

                <Card className="p-4">
                  <CardBody>
                    <h1>Login</h1>
                    <p className="text-muted">Sign In to your account</p>
                    <Form size='large' onSubmit={this.onSubmit} loading={loading}>
                        {errors.global && (
                        <Message negative>
                            <Message.Header>Something went wrong</Message.Header>
                            <p>{errors.global}</p>
                        </Message>
                        )}
                        <Segment stacked>
                          <InputGroup className="mb-3">
                            <InputGroupAddon><i className="fa fa-envelope-o"></i></InputGroupAddon>
                            <Form.Input error={!!errors.email}
                              fluid
                              type="text"
                              placeholder="example@example.com"
                              id="email"
                              name="email"
                              value={data.email}
                              onChange={this.onChange}
                              />
                              {errors.email && <InlineError text={errors.email} />}
                          </InputGroup>
                          <InputGroup className="mb-4">
                            <InputGroupAddon><i className="icon-lock"></i></InputGroupAddon>
                            <Form.Input error={!!errors.password}
                              fluid
                              placeholder='Password'
                              type='password'
                              id="password"
                              name="password"
                              value={data.password}
                              onChange={this.onChange}
                              maxLength="8"
                              minLength="6"
                              />
                              {errors.password && <InlineError text={errors.password} />}
                          </InputGroup>
                        </Segment>

                        <Row>
                          <Col xs="6">
                            <Button color="primary" fluid className="px-4">Login</Button>
                          </Col>
                          <Col xs="6" className="text-right">
                            {/* <Button color="link" className="px-0">Forgot password?</Button> */}
                          </Col>
                        </Row>
                    </Form>
                  </CardBody>
                </Card>

                <Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: 44 + '%' }}>
                  <CardBody className="text-center">
                    <div>
                      Informasi
                      <h4>Countdown to </h4>
                      <p>{this.state.deadline}</p>
                      <div className="Appc-title">
                      <Clock deadline={this.state.deadline} />
                      </div>
                      {/* <h2>Informasi</h2>
                      <p>App ini untuk memperoleh ....</p>
                      <Button color="primary" className="mt-3" active>Register Now!</Button> */}
                    </div>
                  </CardBody>
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}


Login.propTypes = {
  submit: PropTypes.func.isRequired
};
export default Login;