2019-08-27 06:17:32 +00:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
|
|
|
class AuthMenu extends Component {
|
|
|
|
constructor (props) {
|
|
|
|
super(props)
|
2019-08-28 01:01:42 +00:00
|
|
|
|
2019-08-27 06:17:32 +00:00
|
|
|
this.state = {
|
2019-08-28 01:42:16 +00:00
|
|
|
where_in_auth_menu: "requestUsername",
|
2019-08-28 01:49:25 +00:00
|
|
|
username: "",
|
|
|
|
password: "",
|
|
|
|
email: ""
|
2019-08-27 06:17:32 +00:00
|
|
|
}
|
2019-08-28 01:01:42 +00:00
|
|
|
|
2019-08-28 01:42:16 +00:00
|
|
|
this.handlePasswordForLogin = this.handlePasswordForLogin.bind(this)
|
|
|
|
this.handleEmailRequest = this.handleEmailRequest.bind(this)
|
2019-08-27 06:17:32 +00:00
|
|
|
this.handleAccountCreation = this.handleAccountCreation.bind(this)
|
2019-08-28 00:53:20 +00:00
|
|
|
this.authMenu = this.authMenu.bind(this)
|
2019-08-28 01:01:42 +00:00
|
|
|
|
2019-08-27 06:17:32 +00:00
|
|
|
}
|
|
|
|
|
2019-08-28 01:42:16 +00:00
|
|
|
|
|
|
|
handlePasswordForLogin() {
|
2019-08-27 06:17:32 +00:00
|
|
|
this.setState(state => ({
|
2019-08-28 01:42:16 +00:00
|
|
|
where_in_auth_menu: "requestPasswordForLogin",
|
2019-08-27 06:17:32 +00:00
|
|
|
auth_menu_visible: true,
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2019-08-28 01:42:16 +00:00
|
|
|
handleEmailRequest() {
|
2019-08-27 06:17:32 +00:00
|
|
|
this.setState(state => ({
|
2019-08-28 01:42:16 +00:00
|
|
|
where_in_auth_menu: "requestEmail",
|
2019-08-27 06:17:32 +00:00
|
|
|
auth_menu_visible: true,
|
|
|
|
}));
|
|
|
|
}
|
2019-08-28 01:42:16 +00:00
|
|
|
|
2019-08-27 06:17:32 +00:00
|
|
|
handleAccountCreation() {
|
|
|
|
this.setState(state => ({
|
2019-08-28 01:42:16 +00:00
|
|
|
where_in_auth_menu: "requestPasswordForCreation",
|
2019-08-27 06:17:32 +00:00
|
|
|
auth_menu_visible: true,
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2019-08-28 01:42:16 +00:00
|
|
|
|
2019-08-28 00:53:20 +00:00
|
|
|
authMenu() {
|
2019-08-28 01:17:11 +00:00
|
|
|
if (!this.props.auth_menu_visible) {
|
2019-08-28 00:53:20 +00:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
switch(this.state.where_in_auth_menu) {
|
2019-08-28 01:42:16 +00:00
|
|
|
case 'requestUsername':
|
2019-08-28 00:53:20 +00:00
|
|
|
return (
|
|
|
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
|
|
|
<div className="ui left icon input">
|
2019-08-28 01:49:25 +00:00
|
|
|
<input type="text" placeholder="Username" name="username">
|
2019-08-28 00:53:20 +00:00
|
|
|
</input>
|
|
|
|
<i className="users icon"></i>
|
|
|
|
</div>
|
|
|
|
<div className="fluid ui buttons">
|
2019-08-28 01:42:16 +00:00
|
|
|
<button onClick={this.handleEmailRequest} className="blue ui button">Sign Up</button>
|
2019-08-28 00:53:20 +00:00
|
|
|
<div className="or"></div>
|
2019-08-28 01:42:16 +00:00
|
|
|
<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">
|
2019-08-28 01:49:25 +00:00
|
|
|
<input type="text" placeholder="Password" name="password">
|
2019-08-28 01:42:16 +00:00
|
|
|
</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">
|
2019-08-28 01:49:25 +00:00
|
|
|
<input type="text" placeholder="email@address.tld" name="email">
|
2019-08-28 01:42:16 +00:00
|
|
|
</input>
|
|
|
|
<i className="mail icon"></i>
|
2019-08-28 00:53:20 +00:00
|
|
|
</div>
|
2019-08-28 01:42:16 +00:00
|
|
|
<button onClick={this.handleAccountCreation} className="fluid ui teal button">Next</button>
|
2019-08-28 00:53:20 +00:00
|
|
|
</div>
|
|
|
|
)
|
2019-08-28 01:42:16 +00:00
|
|
|
case 'requestPasswordForCreation':
|
2019-08-28 00:53:20 +00:00
|
|
|
return (
|
|
|
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
|
|
|
<div className="ui left icon input">
|
2019-08-28 01:49:25 +00:00
|
|
|
<input type="text" placeholder="Password" name="password">
|
2019-08-28 00:53:20 +00:00
|
|
|
</input>
|
2019-08-28 01:17:11 +00:00
|
|
|
<i className="lock icon"></i>
|
2019-08-28 00:53:20 +00:00
|
|
|
</div>
|
2019-08-28 01:42:16 +00:00
|
|
|
<button onClick={this.handleLogInAttempt} className="fluid ui positive button">Create Account!</button>
|
2019-08-28 00:53:20 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-27 06:17:32 +00:00
|
|
|
render() {
|
|
|
|
return (
|
2019-08-28 00:53:20 +00:00
|
|
|
this.authMenu(this.state.auth_menu_visible)
|
2019-08-27 06:17:32 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-28 00:21:11 +00:00
|
|
|
export default (AuthMenu)
|