Asara/sudoscientist-js-frontend
Archived
1
0
Fork 0
Code Issues Pull requests Activity

basic workflow of login

Browse source
This commit is contained in:
Amarpreet Minhas 2019-08-27 21:42:16 -04:00
parent d44ba36112
commit 7b813ed30d
1 changed files with 39 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/AuthMenu.js
View file

@ -5,42 +5,45 @@ class AuthMenu extends Component {
super(props) super(props)
this.state = { this.state = {
where_in_auth_menu: "username", where_in_auth_menu: "requestUsername",
} }
this.handleSignUpRequest = this.handleSignUpRequest.bind(this) this.handlePasswordForLogin = this.handlePasswordForLogin.bind(this)
this.handleLogInAttempt = this.handleLogInAttempt.bind(this) this.handleEmailRequest = this.handleEmailRequest.bind(this)
this.handleAccountCreation = this.handleAccountCreation.bind(this) this.handleAccountCreation = this.handleAccountCreation.bind(this)
this.authMenu = this.authMenu.bind(this) this.authMenu = this.authMenu.bind(this)
} }
handleSignUpRequest() {
handlePasswordForLogin() {
this.setState(state => ({ this.setState(state => ({
where_in_auth_menu: "email", where_in_auth_menu: "requestPasswordForLogin",
auth_menu_visible: true, auth_menu_visible: true,
})); }));
} }
handleLogInAttempt() { handleEmailRequest() {
this.setState(state => ({ this.setState(state => ({
where_in_auth_menu: "password", where_in_auth_menu: "requestEmail",
auth_menu_visible: true, auth_menu_visible: true,
})); }));
} }
handleAccountCreation() { handleAccountCreation() {
this.setState(state => ({ this.setState(state => ({
where_in_auth_menu: "password", where_in_auth_menu: "requestPasswordForCreation",
auth_menu_visible: true, auth_menu_visible: true,
})); }));
} }
authMenu() { authMenu() {
if (!this.props.auth_menu_visible) { if (!this.props.auth_menu_visible) {
return null; return null;
} }
switch(this.state.where_in_auth_menu) { switch(this.state.where_in_auth_menu) {
case 'username': case 'requestUsername':
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">
@ -49,13 +52,13 @@ class AuthMenu extends Component {
<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.handleSignUpRequest} className="ui button">Sign Up</button> <button onClick={this.handleEmailRequest} className="blue ui button">Sign Up</button>
<div className="or"></div> <div className="or"></div>
<button onClick={this.handleLogInAttempt} className="ui positive button">Sign In</button> <button onClick={this.handlePasswordForLogin} className="ui teal button">Sign In</button>
</div> </div>
</div> </div>
) )
case 'password': case 'requestPasswordForLogin':
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">
@ -63,6 +66,29 @@ class AuthMenu extends Component {
</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>
</div>
)
case 'requestEmail':
return (
<div className="ui menu dropdown" style={{display: "inline"}}>
<div className="ui left icon input">
<input type="text" placeholder="email@address.tld">
</input>
<i className="mail icon"></i>
</div>
<button onClick={this.handleAccountCreation} className="fluid ui teal button">Next</button>
</div>
)
case 'requestPasswordForCreation':
return (
<div className="ui menu dropdown" style={{display: "inline"}}>
<div className="ui left icon input">
<input type="text" placeholder="Password">
</input>
<i className="lock icon"></i>
</div>
<button onClick={this.handleLogInAttempt} className="fluid ui positive button">Create Account!</button>
</div> </div>
) )
default: default: