Login.js

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
import fav from './favicon.ico';
import axios from 'axios';
import swal from 'sweetalert';
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
//import { Redirect, Route, Switch,  } from 'react-router-dom';
class Login extends Component {
   constructor (props) {
    super(props);
    this.state = {
      email :"",
      password:""
    }
   this.handleClick =this.handleClick.bind(this);
   // this.handleredirect =this.handleredirect.bind(this);
  }
     handleClick(event){
    event.preventDefault();
    var payload={
      "email":this.state.email,
	    "password":this.state.password
    }
    axios({
          method: 'post',
          url: '/app/login/',
          data: payload,
          withCredentials: true,
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
          }
        })
   // axios.post('/app/login/', payload)
   .then(function (response) {
     console.log(response);
     if(response.data.code == 200){
       console.log("success")
     this.props.history.push("/dashboard") 

     }
     else if(response.data.code == 204){
       swal("Erreur !", "Vérifiez vos champs SVP !", "error");
       //alert(response.data.success)
     }
     else{
       swal("Erreur !", "Username inexistant !", "error");
       //alert("Username does not exist");
     }
   })
  }
  handleredirect(){
    this.props.history.push("/register");
    }
  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                    <Form>
                     <div style ={{textAlign:"center"}}> <img src={fav} /></div><br/>
                      
                      <h2 style ={{textAlign:"center"}}>Se connecter</h2><br/>
                      <InputGroup className="mb-3">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="fa fa-user"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="email" placeholder="Email" autoComplete="username" value={this.state.email} onChange={e => this.setState({email: e.target.value })} required/>
                      </InputGroup>
                      <InputGroup className="mb-4">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="fa fa-lock"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="password" value={this.state.password} placeholder="Password" onChange={e => this.setState({password: e.target.value })} autoComplete="current-password"   required/>
                      </InputGroup>
                      <Row>
                        <Col xs="6">
                          <Button type="button" color="primary" className="px-4" onClick={(event) => this.handleClick(event)}>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><br/><br/><br/>
                      <h2 style ={{textAlign:"center"}}>S'inscrire</h2><br/>
                      <p>Vous n'avez pas de compte <strong>BRILLO</strong> ? <br/><br/>
                      Créez le !</p>
                      <Button color="primary" className="mt-3" active onClick={() => this.handleredirect()}>Créer compte</Button>
                    </div>
                  </CardBody>
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Login;