Login.js

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import axios from 'axios';
import UploadScreen from './UploadScreen';
import { login } from './util/Auth';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import logo from './caesar.svg'
class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:''
        }
    }
    render() {

        return (
            <div className="App">

                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h2>Welcome to Caesar</h2>
                </div>
                <div className={"App-map"} align={'center'}>

                    <Map google={this.props.google} zoom={12} style={mapStyle}
                         initialCenter={{lat: 35.7847, lng: -78.6821}} >

                        <Marker onClick={this.onMarkerClick}
                                name={'Current location'} />

                        <InfoWindow onClose={this.onInfoWindowClose}>
                            <div id="table">
                                <table>
                                    <tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>
                                    <tr><td>Address:</td> <td><input type='text' id='address'/> </td> </tr>
                                    <tr><td>Type:</td> <td><select id='type'> +
                                        <option value='bar' SELECTED>bar</option>
                                        <option value='restaurant'>restaurant</option>
                                    </select> </td></tr>
                                    <tr><td></td><td><input type='button' value='Save' onclick='saveData()'/></td></tr>
                                </table>
                            </div>
                        </InfoWindow>
                    </Map>
                </div>


                <div>


                </div>
                <div >
                    <button label="Submit" primary={true}  onClick={(event) => this.handleClick(event)}/>
                </div>
            </div>



        );
    }


    handleClick(event){
//        var apiBaseUrl = "http://localhost:8000/api/";
//        var self = this;
//        var payload={
//            params: {
//                username:this.state.username,
//                password:this.state.password
//            }
//        }
//        axios.get(apiBaseUrl+'users', payload)
        login(this.state.username, this.state.password)
//            .then(function (response) {
//                console.log(response);
//                if(response.status === 200){
//                    console.log("Login successfull");
//                    alert(`Logged in as ${response.data.username}.`)
//                    var uploadScreen=[];
//                    uploadScreen.push(<UploadScreen appContext={self.props.appContext}/>)
//                    self.props.appContext.setState({loginPage:[],uploadScreen:uploadScreen})
//                }
//                else if(response.status == 204){
//                    console.log("Username password do not match");
//                    alert("username password do not match")
//                }
//                else{
//                    console.log("Username does not exists");
//                    alert("Username does not exist");
//                }
//            })
//            .catch(function (error) {
//                console.log(error);
//            });
    }
}
const style = {
    margin: 15,

};

const mapStyle = {
    width : '50%',
    height: '50%',
    position: 'right'


}

export default GoogleApiWrapper({
    apiKey: ('AIzaSyDDdJsVn90d6GjHW_Z6mZiWXlyCfnee5b8')
})(Login)