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

import React, { Component } from 'react';

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

    this.state = {
        where_in_auth_menu: "requestUsername",
        username: "",
        password: "",
        email: ""
    }

    this.handleAccountCreation = this.handleAccountCreation.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handlePasswordForLogin = this.handlePasswordForLogin.bind(this)
    this.handleEmailRequest = this.handleEmailRequest.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
    });
  }

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

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

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


  authMenu() {
    if (!this.props.auth_menu_visible) {
        return null;
    }
    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"
                onChange={this.handleInputChange}
            ></input>
              <i className="users icon"></i>
            </div>
            <div className="fluid ui buttons">
              <button onClick={this.handleEmailRequest} 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="text"
                placeholder="Password"
                name="password"
                onChange={this.handleInputChange}
              ></input>
              <i className="lock icon"></i>
            </div>
            <button onClick={this.handleLogInAttempt} 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">
                onChange={this.handleInputChange}
              ></input>
              <i className="mail icon"></i>
            </div>
            <button onClick={this.handleAccountCreation} 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="text"
                 placeholder="Password"
                 name="password"
              ></input>
              <i className="lock icon"></i>
            </div>
            <button onClick={this.handleLogInAttempt} className="fluid ui positive button">Create Account!</button>
          </div>
        )
      default:
        return null;
    }
  }

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

export default (AuthMenu)