import React, { PropTypes } from 'react';
import { Redirect } from "react-router-dom";
import "./Login.css";

class Login extends React.Component {
  constructor(props){
   super(props);
   this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event){
   event.preventDefault();
   fetch('http://localhost:5000/api/login', {
   method: 'post',
   headers: {'Content-Type':'application/json'},
   body: JSON.stringify({
     "email": document.getElementById("email").value,
     "password": document.getElementById("pwd").value
   })
   })
     .then(response => response.json())
     .then(res => {
       console.log(res);
       if(res.isLoggedIn){
         alert("Signed in");
         this.props.history.push("/hueprint");
       }
       else{
         alert("Invalid user or password");
       }
     })
     .catch(err => console.log(err));
  };

  render () {
    return(
      <div>
        <div className="row burbujas" style={{height: "100vh", display: "flex", flexFlow: "row wrap", justifyContent: "center", alignItems: "center"}}>
          <div className="loginForm">
            <h2>Sign in</h2><br/>
              <form onSubmit={this.handleSubmit}>
                <div className="form-group">
                  <label htmlFor="email">Email address:</label>
                  <input type="email" className="form-control" id="email" name="email"/>
                </div>
                <div className="form-group">
                  <label htmlFor="pwd">Password:</label>
                  <input type="password" className="form-control" id="pwd" name="password"/>
                </div>
                <center><button type="submit" className="btn btn-default">Submit</button></center>
              </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Login;