Fix up logic on login
This commit is contained in:
parent
ed6f6797ad
commit
84e275bf45
1 changed files with 45 additions and 19 deletions
|
@ -11,10 +11,16 @@ class AuthMenu extends Component {
|
||||||
email: ""
|
email: ""
|
||||||
}
|
}
|
||||||
|
|
||||||
this.handleAccountCreation = this.handleAccountCreation.bind(this)
|
|
||||||
this.handleInputChange = this.handleInputChange.bind(this)
|
this.handleInputChange = this.handleInputChange.bind(this)
|
||||||
|
|
||||||
|
this.handleEmailRequestForAccountCreation = this.handleEmailRequestForAccountCreation.bind(this)
|
||||||
|
|
||||||
this.handlePasswordForLogin = this.handlePasswordForLogin.bind(this)
|
this.handlePasswordForLogin = this.handlePasswordForLogin.bind(this)
|
||||||
this.handleEmailRequest = this.handleEmailRequest.bind(this)
|
this.handlePasswordForAccountCreation = this.handlePasswordForAccountCreation.bind(this)
|
||||||
|
|
||||||
|
this.handleLogin = this.handleLogin.bind(this)
|
||||||
|
this.handleCreateAccount = this.handleCreateAccount.bind(this)
|
||||||
|
|
||||||
this.authMenu = this.authMenu.bind(this)
|
this.authMenu = this.authMenu.bind(this)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -30,6 +36,13 @@ class AuthMenu extends Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleEmailRequestForAccountCreation() {
|
||||||
|
this.setState(state => ({
|
||||||
|
where_in_auth_menu: "requestEmail",
|
||||||
|
auth_menu_visible: true,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
handlePasswordForLogin() {
|
handlePasswordForLogin() {
|
||||||
this.setState(state => ({
|
this.setState(state => ({
|
||||||
where_in_auth_menu: "requestPasswordForLogin",
|
where_in_auth_menu: "requestPasswordForLogin",
|
||||||
|
@ -37,25 +50,32 @@ class AuthMenu extends Component {
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEmailRequest() {
|
handlePasswordForAccountCreation() {
|
||||||
this.setState(state => ({
|
|
||||||
where_in_auth_menu: "requestEmail",
|
|
||||||
auth_menu_visible: true,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
handleAccountCreation() {
|
|
||||||
this.setState(state => ({
|
this.setState(state => ({
|
||||||
where_in_auth_menu: "requestPasswordForCreation",
|
where_in_auth_menu: "requestPasswordForCreation",
|
||||||
auth_menu_visible: true,
|
auth_menu_visible: true,
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleLogin() {
|
||||||
|
this.setState(state => ({
|
||||||
|
where_in_auth_menu: "requestPasswordForCreation",
|
||||||
|
auth_menu_visible: true,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCreateAccount() {
|
||||||
|
this.setState(state => ({
|
||||||
|
where_in_auth_menu: "requestPasswordForCreation",
|
||||||
|
auth_menu_visible: true,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
authMenu() {
|
authMenu() {
|
||||||
if (!this.props.auth_menu_visible) {
|
if (!this.props.auth_menu_visible) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
const { username, password, email } = this.state;
|
||||||
switch(this.state.where_in_auth_menu) {
|
switch(this.state.where_in_auth_menu) {
|
||||||
case 'requestUsername':
|
case 'requestUsername':
|
||||||
return (
|
return (
|
||||||
|
@ -65,12 +85,13 @@ class AuthMenu extends Component {
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
name="username"
|
name="username"
|
||||||
|
value={username}
|
||||||
onChange={this.handleInputChange}
|
onChange={this.handleInputChange}
|
||||||
></input>
|
></input>
|
||||||
<i className="users icon"></i>
|
<i className="users icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<div className="fluid ui buttons">
|
<div className="fluid ui buttons">
|
||||||
<button onClick={this.handleEmailRequest} className="blue ui button">Sign Up</button>
|
<button onClick={this.handleEmailRequestForAccountCreation} className="blue ui button">Sign Up</button>
|
||||||
<div className="or"></div>
|
<div className="or"></div>
|
||||||
<button onClick={this.handlePasswordForLogin} className="ui teal button">Sign In</button>
|
<button onClick={this.handlePasswordForLogin} className="ui teal button">Sign In</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -81,14 +102,15 @@ class AuthMenu extends Component {
|
||||||
<div className="ui menu dropdown" style={{display: "inline"}}>
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
||||||
<div className="ui left icon input">
|
<div className="ui left icon input">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type={"password"}
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
name="password"
|
name="password"
|
||||||
|
value={password}
|
||||||
onChange={this.handleInputChange}
|
onChange={this.handleInputChange}
|
||||||
></input>
|
></input>
|
||||||
<i className="lock icon"></i>
|
<i className="lock icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={this.handleLogInAttempt} className="fluid ui positive button">Log In</button>
|
<button onClick={this.handleLogin} className="fluid ui positive button">Log In</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
case 'requestEmail':
|
case 'requestEmail':
|
||||||
|
@ -98,25 +120,29 @@ class AuthMenu extends Component {
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="email@address.tld"
|
placeholder="email@address.tld"
|
||||||
name="email">
|
name="email"
|
||||||
|
value={email}
|
||||||
onChange={this.handleInputChange}
|
onChange={this.handleInputChange}
|
||||||
></input>
|
></input>
|
||||||
<i className="mail icon"></i>
|
<i className="mail icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={this.handleAccountCreation} className="fluid ui teal button">Next</button>
|
<button onClick={this.handlePasswordForAccountCreation} className="fluid ui teal button">Next</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
case 'requestPasswordForCreation':
|
case 'requestPasswordForCreation':
|
||||||
return (
|
return (
|
||||||
<div className="ui menu dropdown" style={{display: "inline"}}>
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
||||||
<div className="ui left icon input">
|
<div className="ui left icon input">
|
||||||
<input type="text"
|
<input
|
||||||
placeholder="Password"
|
type={"password"}
|
||||||
name="password"
|
placeholder="Password"
|
||||||
|
name="password"
|
||||||
|
value={password}
|
||||||
|
onChange={this.handleInputChange}
|
||||||
></input>
|
></input>
|
||||||
<i className="lock icon"></i>
|
<i className="lock icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={this.handleLogInAttempt} className="fluid ui positive button">Create Account!</button>
|
<button onClick={this.handleCreateAccount} className="fluid ui positive button">Create Account!</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
default:
|
default:
|
||||||
|
|
Reference in a new issue