sudoscientist-js-frontend/src/components/AuthMenu.js

import React, { Component } from 'react';
import Cookies from 'universal-cookie';

import { connect } from 'react-redux';
import { userLogin, userSignup, loadCookieToState } from '../actions';

class AuthMenu extends Component {
  constructor (props) {
    super(props)

    const cookies = new Cookies();
    const datacookie = cookies.get('DataCookie');

    if (datacookie)  {
        const data = JSON.parse(atob(datacookie.split('.')[1]))
        if (data.exp > Math.floor(Date.now() / 1000)) {
          this.state = {
              user_authed: true,
              where_in_auth_menu: "loggedIn",
              username: data.username,
              admin: data.admin,
              verified: data.verified,
              exp: data.exp,
          }
        }
        else {
          this.state = {
              user_authed: false,
              where_in_auth_menu: "requestUsername",
              username: "",
              password: "",
              email: "",
              exp: null,
          }
        }
    } else {
      this.state = {
          user_authed: false,
          where_in_auth_menu: "requestUsername",
          username: "",
          password: "",
          email: "",
          exp: null
      }
    }

    this.props.loadCookieToState(this.state)

    this.handleInputChange = this.handleInputChange.bind(this)

    this.handleEmailRequestForAccountCreation = this.handleEmailRequestForAccountCreation.bind(this)

    this.handlePasswordForLogin = this.handlePasswordForLogin.bind(this)
    this.handlePasswordForAccountCreation = this.handlePasswordForAccountCreation.bind(this)

    this.handleLogin = this.handleLogin.bind(this)
    this.handleCreateAccount = this.handleCreateAccount.bind(this)

    this.authMenu = this.authMenu.bind(this)
  }


  handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleEmailRequestForAccountCreation() {
    this.setState(state => ({
      where_in_auth_menu: "requestEmail",
      auth_menu_visible: true,
    }));
  }

  handlePasswordForLogin() {
    this.setState(state => ({
      where_in_auth_menu: "requestPasswordForLogin",
      auth_menu_visible: true,
    }));
  }

  handlePasswordForAccountCreation() {
    this.setState(state => ({
      where_in_auth_menu: "requestPasswordForCreation",
      auth_menu_visible: true,
    }));
  }

  handleLogin() {
      this.props.userLogin(this.state.username, this.state.password)
      .then(res => {
        this.setState(state => ({
          auth_menu_visible: false,
          where_in_auth_menu: "loggedIn"
        }))
        this.props.close()
      }
      )
      .catch(err => {
        console.log(err);
      })
  }

  handleCreateAccount() {
      this.props.userSignup(this.state.username, this.state.password, this.state.email)
      .then(res => {
        this.setState(state => ({
          where_in_auth_menu: "requestUsername",
          auth_menu_visible: false,
        }))
        this.props.close()
      }
      )
      .catch(err => {
          console.log(err);
      })
  }

  authMenu() {
    if (!this.props.auth_menu_visible) {
        return null;
    }
    const { username, password, email } = this.state;
    switch(this.state.where_in_auth_menu) {
      case 'requestUsername':
        return (
          <div className="ui menu dropdown" style={{display: "inline"}}>
            <div className="ui left icon input">
              <input
                type="text"
                placeholder="Username"
                name="username"
                value={username}
                onChange={this.handleInputChange}
            ></input>
              <i className="users icon"></i>
            </div>
            <div className="fluid ui buttons">
              <button onClick={this.handleEmailRequestForAccountCreation} className="blue ui button">Sign Up</button>
              <div className="or"></div>
              <button onClick={this.handlePasswordForLogin} className="ui teal button">Sign In</button>
            </div>
          </div>
       )
      case 'requestPasswordForLogin':
        return (
          <div className="ui menu dropdown" style={{display: "inline"}}>
            <div className="ui left icon input">
              <input
                type={"password"}
                placeholder="Password"
                name="password"
                value={password}
                onChange={this.handleInputChange}
              ></input>
              <i className="lock icon"></i>
            </div>
            <button onClick={this.handleLogin} className="fluid ui positive button">Log In</button>
          </div>
        )
      case 'requestEmail':
        return (
          <div className="ui menu dropdown" style={{display: "inline"}}>
            <div className="ui left icon input">
              <input
                type="text"
                placeholder="email@address.tld"
                name="email"
                value={email}
                onChange={this.handleInputChange}
              ></input>
              <i className="mail icon"></i>
            </div>
            <button onClick={this.handlePasswordForAccountCreation} className="fluid ui teal button">Next</button>
          </div>
        )
      case 'requestPasswordForCreation':
        return (
          <div className="ui menu dropdown" style={{display: "inline"}}>
            <div className="ui left icon input">
              <input
                type={"password"}
                placeholder="Password"
                name="password"
                value={password}
                onChange={this.handleInputChange}
              ></input>
              <i className="lock icon"></i>
            </div>
            <button onClick={this.handleCreateAccount} className="fluid ui positive button">Create Account!</button>
          </div>
        )
      case 'loggedIn':
        return (
          <div className="ui menu dropdown" style={{display: "inline"}}>
            { this.state.admin &&
            <div className="ui left icon input">
              <i className="edit icon"></i>
            <button onClick={() => { document.location.href = "/newpost/"; }} className="fluid ui positive button">Create Post!</button>
            </div>
            }
            <div className="ui left icon input">
              <i className="sign-out icon"></i>
            <button onClick={() => {
                var cookies = new Cookies();
                cookies.remove('DataCookie', { path: '/', domain: process.env.REACT_APP_API_DOMAIN });
                window.location.reload();
            }} className="fluid ui negative button">Sign Out</button>
            </div>

          </div>
        )
      default:
        return null;
    }
  }

  render() {
    return (
      this.authMenu(this.state.auth_menu_visible)
    )
  }
}

export default connect(
    null,
    { userLogin, userSignup, loadCookieToState }
)(AuthMenu);