1
0
Fork 0

Try to rip out the auth menu

This commit is contained in:
Amarpreet Minhas 2019-08-27 02:17:32 -04:00
parent 5f53e4aa00
commit 9f56327753
2 changed files with 89 additions and 29 deletions

View file

@ -0,0 +1,85 @@
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);

View file

@ -1,32 +1,7 @@
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
function AuthMenu(props) {
if (!props.showMenu) {
return null;
}
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="ui left icon input">
<input type="text" placeholder="Password">
</input>
<i className="lock icon"></i>
</div>
<div className="fluid ui buttons">
<button className="ui button">Sign Up</button>
<div className="or"></div>
<button className="ui positive button">Sign In</button>
</div>
</div>
)
}
import AuthMenu from './AuthMenu';
class NavBar extends Component {
constructor (props) {
@ -34,14 +9,14 @@ class NavBar extends Component {
this.state = {
logged_in: false,
auth_menu_visible: false,
where_in_auth_menu: false,
where_in_auth_menu: "username",
}
this.handleLoginDropdown = this.handleLoginDropdown.bind(this)
}
handleLoginDropdown() {
this.setState(state => ({
auth_menu_visible: !state.auth_menu_visible
auth_menu_visible: true
}));
}
@ -55,7 +30,7 @@ class NavBar extends Component {
<div onClick={this.handleLoginDropdown} className='item ui button dropdown'>
Login
<i className="dropdown icon"></i>
<AuthMenu showMenu={this.state.auth_menu_visible}></AuthMenu>
<AuthMenu showMenu={this.state.auth_menu_visible} auth_location={this.state.where_in_auth_menu}></AuthMenu>
</div>
</div>
</div>