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

import React, { Component } from 'react';
import { connect } from 'react-redux';

class AuthMenu extends Component {
  constructor (props) {
    super(props)
    this.state = {
        where_in_auth_menu: "username",
        auth_menu_visible: props.auth_menu_visible,
    }
    this.handleSignUpRequest = this.handleSignUpRequest.bind(this)
    this.handleLogInAttempt = this.handleLogInAttempt.bind(this)
    this.handleAccountCreation = this.handleAccountCreation.bind(this)
    this.authMenu = this.authMenu.bind(this)
  }

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

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

  authMenu() {
    if (!this.state.auth_menu_visible) {
        return null;
    }
    switch(this.state.where_in_auth_menu) {
      case 'username':
        return (
          <div className="ui menu dropdown" style={{display: "inline"}}>
            <div className="ui left icon input">
              <input type="text" placeholder="Username">
              </input>
              <i className="users icon"></i>
            </div>
            <div className="fluid ui buttons">
              <button onClick={this.handleSignUpRequest} className="ui button">Sign Up</button>
              <div className="or"></div>
              <button className="ui positive button">Sign In</button>
            </div>
          </div>
        )
      case 'password':
        return (
          <div className="ui menu dropdown" style={{display: "inline"}}>
            <div className="ui left icon input">
              <input type="text" placeholder="Username">
              </input>
              <i className="users icon"></i>
            </div>
          </div>
        )
      default:
        return null;
    }
  }

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

export default (AuthMenu)