import React from 'react'
import {
    BrowserRouter as Router,
    Route
} from 'react-router-dom'

import Login from './views/Login'
import Index from './views/Index'
import Home from './views/Home'

const App = () => {
    return(
        <Router>
            <div>
              <Route exact path="/" component={Index}/>
              <Route path="/login" component={Login}/>
              <Route path="/home" component={Home}/>
            </div>
        </Router>
    )
}

export default App

import React from 'react'
import Login from './Login'
import Home from './Home'

const Index = () => {
    if (localStorage.getItem("username")) {
        return(
            <Home/>
        );
    } else {
        return (
            <Login/>
        )
    }
}

export default Index

import React from 'react'

const Login = () => {
    let user, pass

    const login = e => {
        e.preventDefault();
        fetch("http://localhost:3000/api/login", {
            method: "GET",
            headers: {
                "user": user.value,
                "pass": pass.value
            }
        })
            .then(response => response.json())
            .then(function(data) {
                if (data.user) {
                    localStorage.setItem("username", data.user)
                    this.props.history.push("/");
                } else {
                    console.log("Failed to get user")
                }
            })
    }
    return(
      <div>
        <h1>Login</h1>
        <form onSubmit={login}>
          <label> Username:
            <input type="text" className="form-control col-md-12" ref = {node => user = node}/>
          </label>
          <label> Password:
            <input type="password" className="form-control col-md-12" ref = {node => pass = node}/>
          </label>
          <br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }

export default Login

import React from 'react'
import { withRouter } from 'react-router-dom'

const Login = (props) => {
    let user, pass

    const login = e => {
        e.preventDefault();
        fetch("http://localhost:3000/api/login", {
            method: "GET",
            headers: {
                "user": user.value,
                "pass": pass.value
            }
        })
            .then(response => response.json())
            .then(function(data) {
                if (data.user) {
                    localStorage.setItem("username", data.user)
                    props.history.push("/");
                } else {
                    console.log("Failed to get user")
                }
            })
    }
    return(
      <div>
        <h1>Login</h1>
        <form onSubmit={login}>
          <label> Username:
            <input type="text" className="form-control col-md-12" ref = {node => user = node}/>
          </label>
          <label> Password:
            <input type="password" className="form-control col-md-12" ref = {node => pass = node}/>
          </label>
          <br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }

export default withRouter(Login)