from flask import Flask, jsonify, make_response, request, session
from flask_cors import CORS
from flask_jwt_extended import (
    JWTManager, jwt_required, create_access_token, get_jwt_identity
)

app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = 'example_secret'
app.secret_key = 'example_secret'
jwt = JWTManager(app)
CORS(app)


@app.route('/')
def welcome():
    session['access_token'] = "example"
    resp = make_response('Welcome! ' + session.get('access_token'))
    return resp


@app.route('/login', methods=['POST'])
def login():
    if not request.is_json:
        return jsonify({"msg": "Missing JSON in request"}), 400

    username = request.json.get('username', None)
    password = request.json.get('password', None)
    if not username:
        return jsonify({"msg": "Missing username parameter"}), 400
    if not password:
        return jsonify({"msg": "Missing password parameter"}), 400

    access_token = create_access_token(identity=username)

    # This approach does not seem to work when called
    # from the React frontend via a POST request
    session['access_token'] = access_token

    # ref: https://stackoverflow.com/a/26588078/1167750
    result = jsonify(access_token=access_token)
    # This approach also does not seem to work when called
    # from the React frontend via a POST request
    result.set_cookie('access_token', access_token)
    return result


@app.route('/dashboard', methods=['GET'])
@jwt_required
def dashboard():
    current_user = get_jwt_identity()
    return jsonify(logged_in_as=current_user), 200


if __name__ == '__main__':
    app.run()

import axios from 'axios';
import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Link,
  Redirect,
  Route,
  withRouter
} from 'react-router-dom';
import './App.css';

class App extends Component {
  state = {
    todos: []
  };

  async componentDidMount() {
  }

  render() {
    const { todos } = this.state
    return (
      <Router>
        <Root>
          <Sidebar>
            <div>
              <LoginForm />
            </div>
          </Sidebar>
          <Main>
            <Route exact={true} path='/' render={() => (
              <h2>Welcome</h2>
            )}/>
          </Main>
        </Root>
      </Router>
    );
  }
}

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };

    // ref: https://gist.github.com/joelgriffith/43a4a8195c9fd237a222fe84c2b2e2b4
    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleUsernameChange(event) {
    this.setState({username: event.target.value});
  }

  handlePasswordChange(event) {
    this.setState({password: event.target.value});
  }

  handleSubmit(event) {
    alert('login submitted: ' + this.state.username);
    event.preventDefault();

    // ref: https://blog.stvmlbrn.com/2017/04/07/submitting-form-data-with-react.html
    const { username, password } = this.state;

    axios.post('http://127.0.0.1:5000/login', {
        username: username,
        password: password
      })
      .then(function(response) {
        console.log(response);
        alert(response.data.access_token);
      })
      .catch(function(error) {
        console.log(error);
      })
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
        </label>
        <label>
          Password:
          <input type="password" value={this.state.password} onChange={this.handlePasswordChange} />
        </label>
        <input type="submit" value="Login" />
      </form>
    )
  }
}