login.js

import React from 'react';
import Footer from '../Footer';
import axios from 'axios';
import { withRouter } from 'react-router';
import './style.css'

class Login extends React.Component {

	state = {
		email: '',
		password: '',
		loginSuccess: false,
		loginError: false
	}

	_login = (e) => {
		e.preventDefault();
		let { email, password } = this.state;
		axios.post('/', {
			email: email,
			password: password
		})
		.then((response) => { 
			localStorage.setItem('email', response.email );
			localStorage.setItem('token', response.token );
			localStorage.setItem('apiKey', response.apiKey );
			this.setState((state, props) => ({
				loginSuccess: true
			}));
		})
		.catch((error) => {
			this.setState((state, props) => ({
				loginError: true
			}));
		});
	}

	_handleChange = (name, e) => {
	    let change = {};
	    change[name] = e.target.value;
		this.setState((state, props) => (change));
	}

	render() {
		let { loginSuccess } = this.state;
		return (
			<div style={{position: 'relative', margin: '6.5%'}} className="text-center">
		      	<div style={{width: '33%', margin: 'auto', padding: '2%', backgroundColor: 'black'}} className="container text-center">
			        <h3 style={{fontWeight: '400', marginBottom: '20px'}} > Login </h3>
			        <div style={{margin: '4% 3% 3% 0', padding: '3%', backgroundColor:'#333'}} className="container">
				        {Boolean(loginSuccess) ? (<div style={{margin:'15px'}} className="alert alert-success alert-dismissible fade show" role="alert"> {/* ERROR: something went wrong with axios operation. */}
														  <button type="button" className="close" data-dismiss="alert" aria-label="Close">
														    <span aria-hidden="true">&times;</span>
														  </button>
														  <strong>Success!</strong> A confirmation email has been sent to {this.state.email}
														</div>) : ''}
				        <form style={{marginTop: '20px'}} onSubmit={(e) => this._login(e)}>
						  <div className="form-group row">
						      <label className="col-sm-2 col-form-label col-form-label-sm">Email</label>
						      <div className="col-sm-10">
						        <input type="email" value={this.state.email} onChange={(e) => this._handleChange('email', e)} className="form-control form-control-sm" id="lgFormGroupInput" placeholder="you@example.com"/>
						      </div>
						    </div>
						    <div className="form-group row">
						      <label className="col-sm-2 col-form-label col-form-label-sm">Password</label>
						      <div className="col-sm-10">
						        <input type="password" value={this.state.password} onChange={(e) => this._handleChange('password', e)} className="form-control form-control-sm" id="lgFormGroupInput" placeholder="Please choose a strong password."/>
						      </div>
						    </div>
						  
						  <button type="submit" className="btn btn-primary">Login</button>
						</form>
					</div>
				</div>
				<Footer />
		    </div>	
		)
	}
}

export default withRouter(Login)