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

52
src/components/AuthMenu.js
View file

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