86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
|
||
|
|
class AuthMenu extends Component {
|
||
|
|
constructor (props) {
|
||
|
|
super(props)
|
||
|
|
this.state = {
|
||
|
|
where_in_auth_menu: "username",
|
||
|
|
auth_menu_visible: true,
|
||
|
|
}
|
||
|
|
this.handleSignUpRequest = this.handleSignUpRequest.bind(this)
|
||
|
|
this.handleLogInAttempt = this.handleLogInAttempt.bind(this)
|
||
|
|
this.handleAccountCreation = this.handleAccountCreation.bind(this)
|
||
|
|
}
|
||
|
|
|
||
|
|
handleSignUpRequest() {
|
||
|
|
this.setState(state => ({
|
||
|
|
where_in_auth_menu: "email",
|
||
|
|
auth_menu_visible: true,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
handleLogInAttempt() {
|
||
|
|
this.setState(state => ({
|
||
|
|
where_in_auth_menu: "password",
|
||
|
|
auth_menu_visible: true,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
handleAccountCreation() {
|
||
|
|
this.setState(state => ({
|
||
|
|
where_in_auth_menu: "password",
|
||
|
|
auth_menu_visible: true,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
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>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const mapStateToProps = (state) => {
|
||
|
|
return {
|
||
|
|
where_in_auth_menu: state.where_in_auth_menu,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export default connect(
|
||
|
|
mapStateToProps,
|
||
|
|
)(AuthMenu);
|