Try to rip out the auth menu

src/components/AuthMenu.js

@@ -0,0 +1,85 @@
+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: true,
+    }
+    this.handleSignUpRequest = this.handleSignUpRequest.bind(this)
+    this.handleLogInAttempt = this.handleLogInAttempt.bind(this)
+    this.handleAccountCreation = this.handleAccountCreation.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,
+    }));
+  }
+
+  render() {
+    return (
+      <div>
+        {(() => {
+          switch(this.state.auth_location) {
+            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;
+          }
+        })()}
+      </div>
+    )
+  }
+}
+
+
+
+const mapStateToProps = (state) => {
+    return {
+        where_in_auth_menu: state.where_in_auth_menu,
+    };
+}
+
+export default connect(
+    mapStateToProps,
+)(AuthMenu);

src/components/NavBar.js

@@ -1,32 +1,7 @@
 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
 import { connect } from 'react-redux';
-
-function AuthMenu(props) {
-  if (!props.showMenu) {
-    return null;
-  }
-
-  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="ui left icon input">
-        <input type="text" placeholder="Password">
-        </input>
-        <i className="lock icon"></i>
-      </div>
-      <div className="fluid ui buttons">
-        <button className="ui button">Sign Up</button>
-        <div className="or"></div>
-        <button className="ui positive button">Sign In</button>
-      </div>
-    </div>
-    )
-}
+import AuthMenu from './AuthMenu';
 
 class NavBar extends Component {
   constructor (props) {
@@ -34,14 +9,14 @@ class NavBar extends Component {
     this.state = {
         logged_in: false,
         auth_menu_visible: false,
-        where_in_auth_menu: false,
+        where_in_auth_menu: "username",
     }
     this.handleLoginDropdown = this.handleLoginDropdown.bind(this)
   }
 
   handleLoginDropdown() {
     this.setState(state => ({
-      auth_menu_visible: !state.auth_menu_visible
+      auth_menu_visible: true
     }));
   }
 
@@ -55,7 +30,7 @@ class NavBar extends Component {
          <div onClick={this.handleLoginDropdown} className='item ui button dropdown'>
            Login
            <i className="dropdown icon"></i>
-           <AuthMenu showMenu={this.state.auth_menu_visible}></AuthMenu>
+           <AuthMenu showMenu={this.state.auth_menu_visible} auth_location={this.state.where_in_auth_menu}></AuthMenu>
          </div>
        </div>
      </div>