Login React

Login.css

.alert
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items: center;
    height: 50px;
    margin-top:40px;
}
.hidden
{
    display:none;
}

.show
{
    display:block;
}
.g-form-container
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items: center;
    height: 600px;
    width:100%;

}
.g-form
{
    box-sizing: border-box;
    width:350px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2); 
     border-radius: 3px;   
}

.g-form-titulo
{
    height: 100px;
    width: 100%;
    font-size: 18px;
    background: #18aa8d;
    color: white;
    line-height: 300%;
    font-size: xx-large;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
}

.g-form-titulo1
{
    height: 50px;
    width: 100%;
    font-size: 18px;
    background: #18aa8d;
    color: white;   
    border-radius: 3px 3px 0 0;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
}

Login.js

import React, {Component} from 'react';
import './Login.css';
import store from '../store'



class Login extends Component
{
constructor(props)
{
    super(props);    
    this.state={
        usuario:{
            email:"",
            pass:"",
            nick:"", 
            foto:"",
            role:"" 
       },            
       validado:[], 
       classInfo:"alert alert-info show",
       classSuccess:"alert alert-info hidden",
       classError:"alert alert-danger hidden"
       
       
    }   
    this.login=this.login.bind(this);
    this.handleChange=this.handleChange.bind(this);
    
    
}
//send to redux file
log()
{
    store.dispatch({
        type:"LOG_DIRECTOR",
        usuario:this.state.usuario
    })
}

handleChange(e)
{
            let nombre=e.target.name
            let value=e.target.value
            this.setState(prevState=>({
                    usuario:{
                        ...prevState.usuario,[nombre]:value
                    }
            }))         
 } 
       
        
 login()
    { 
    fetch('http://localhost/aprendo/loginweb.php',
    {          
    method:'POST',
    headers: {'Content-Type':'application/json'},
    body:JSON.stringify(this.state.usuario)
     } ) 
     .then(response=>{     
        return response.json();
        }) 
        .then(responsejson=>{
            this.setState({
                validado:responsejson                
            },()=>{
                this.isValidado()
                console.log(this.state.validado)
                
                
                })                                 
             
           this.log()            
        })        
} 

isValidado()
{
   
  if(this.state.validado.usuario)
  {
    localStorage.setItem("usuario", this.state.validado.usuario)
    localStorage.setItem("foto", this.state.validado.foto) 
    localStorage.setItem("nick", this.state.validado.nick)
    localStorage.setItem("role", this.state.validado.role)
    localStorage.setItem("colegio", this.state.validado.colegio)
    this.setState({classSuccess:"alert alert-success show"})
    this.setState({classInfo:"alert alert-success hidden"})
    this.setState({classError:"alert alert-success hidden"})  
    this.setState({usuario:{
        email:this.state.validado.usuario,
        pass:"",
        nick: this.state.validado.nick, 
        foto:this.state.validado.foto,
        role:"1"
                }
        })

  } 
  else
  {
    localStorage.removeItem("usuario")
    localStorage.removeItem("foto") 
    localStorage.removeItem("nick")
    localStorage.removeItem("role")
    localStorage.removeItem("colegio")
    this.setState({classSuccess:"alert alert-success hidden"})
    this.setState({classInfo:"alert alert-success hidden"})
    this.setState({classError:"alert alert-danger show"})   
  } 
}
   
    render()
    {
        return(
           <div>
           <div className="alert">
           <div className={this.state.classSuccess}>
          <p> <strong>  Inicio de Sesion Correctamente.</strong></p>
           </div>
           <div className={this.state.classInfo}>
          <p> <strong> Digita tu Correo y Contraseña.</strong></p>
           </div>
           <div className={this.state.classError}>
          <p> <strong> Error de Usuario o Contraseña.</strong></p>
           </div>
           </div>
            <div className="g-form-container">
            
            <div className="g-form">
            <div className="g-form-titulo">
            <p>Login</p>
             </div>           
                    <input type="email"  onChange={this.handleChange.bind(this)} placeholder="Digita Tu Correo Electronico" id="email" name="email" aria-label="Usuario" />
                    <input type="password" onChange={this.handleChange.bind(this)} placeholder="Digita Tu Contraseña" id="pass" name="pass" aria-label="Password" />
                    <button onClick={this.login}>Enviar</button>
                                                 
            </div>
            </div>
            </div>
        );
    }
}
export default Login;

Login.php

<?php
error_reporting(E_ERROR | E_WARNING | E_PARSE);

header("Access-Control-Allow-Origin: *");header("Content-Type: application/json; charset=UTF-8");

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

include ("connect.php");
$postdata=file_get_contents("php://input");

$request=json_decode($postdata);
$nick_usuario=$request->email;
$password=$request->pass;

$clave=sha1($password);
if($stmt = $con->prepare("select correo_usuario,foto_user,nick_usuario,role,colegio from usuarios where correo_usuario=? and password=?"))
{  
    $stmt->bind_param('ss', trim($nick_usuario),trim($clave));  
    $stmt->execute();
    $stmt->store_result(); 
$stmt->bind_result($usuario,$foto_user,$nick,$role,$colegio);

    $num_of_rows = $stmt->num_rows;
}


$data=array();

while($stmt->fetch())
{

$data["usuario"]=$usuario;
$data["foto"]=$foto_user;
$data["nick"]=$nick;
$data["role"]=$role;
$data["colegio"]=$colegio;

}
$json=json_encode($data);
echo $json;