I think i'm almost there
This commit is contained in:
parent
27a29d827a
commit
6e57686f8f
2 changed files with 39 additions and 35 deletions
|
@ -6,11 +6,12 @@ class AuthMenu extends Component {
|
|||
super(props)
|
||||
this.state = {
|
||||
where_in_auth_menu: "username",
|
||||
auth_menu_visible: true,
|
||||
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() {
|
||||
|
@ -33,41 +34,44 @@ class AuthMenu extends Component {
|
|||
}));
|
||||
}
|
||||
|
||||
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 (
|
||||
<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>
|
||||
this.authMenu(this.state.auth_menu_visible)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,7 +29,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 auth_menu_visible={this.state.auth_menu_visible}></AuthMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Reference in a new issue