Skip to content

Commit 049c25c

Browse files
Mongolialadybbmoz
Mongolialady
authored and
bbmoz
committed
Feature/#153556693 (#167)
* Merge branch 'master' of /Users/hhy615/work/calltocode.org with conflicts. * save before continue * save before continue * save before continue * save before continue * save change * save before continue * Merge remote-tracking branch 'origin/master' # Conflicts: # client/components/Header/Header.js # client/components/Header/Header.scss * Merge remote-tracking branch 'origin/master' # Conflicts: # client/components/Header/Header.js # client/components/Header/Header.scss * enable / disable login button * enable / disable login button * enable / disable login button * enable / disable login button * enable / disable login button * enable / disable login button * disable lint * disable lint * disable lint * chore: User sees login button enabled/disabled #153556693 * chore: User sees login button enabled/disabled #153556693 * chore: User sees login button enabled/disabled #153556693 * chore: User sees login button enabled/disabled #153556693 * enable / disable login button * enable / disable login button * disable lint * chore: User sees login button enabled/disabled #153556693 * chore: User sees login button enabled/disabled #153556693 * chore: User sees login button enabled/disabled #153556693 * chore: User sees login button enabled/disabled #153556693 * chore: User sees login button enabled/disabled #153556693 * chore: User sees login button enabled/disabled #153556693
1 parent 7abf11b commit 049c25c

File tree

3 files changed

+75
-78
lines changed

3 files changed

+75
-78
lines changed

‎client/components/Header/Header.js

Lines changed: 32 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import React, { Component, Fragment } from 'react'
1+
import React, { Component } from 'react'
22
import { connect } from 'react-redux'
33
import { Link } from 'react-router-dom'
44
import PropTypes from 'prop-types'
55
import AppBar from 'material-ui/AppBar'
66
import Toolbar from 'material-ui/Toolbar'
77
import Typography from 'material-ui/Typography'
8-
import Button from 'material-ui/Button'
9-
import Avatar from 'material-ui/Avatar'
108

119
import AuthActionCreator from '../../actions/auth'
1210
import styles from './Header.scss'
@@ -20,45 +18,25 @@ class Header extends Component {
2018
}
2119

2220
renderHeaderButtons () {
23-
const { authenticated, user } = this.props
24-
25-
if (authenticated) {
26-
return (
27-
<Fragment>
28-
{ user.usertype === 'contact' &&
29-
<Button dense className={this.getLinkStyles('create-project')}
30-
component={Link}
31-
to="/create-project">
32-
{'CREATE PROJECT'}
33-
</Button>
34-
}
35-
<Button dense className={this.getLinkStyles()}
36-
component={Link}
37-
to="/"
38-
onClick={this.props.logout}>
39-
{'LOGOUT'}
40-
</Button>
41-
<Button dense className={this.getLinkStyles('profile')}
42-
component={Link}
43-
to="/profile">
44-
<Avatar>{user.email.charAt(0).toUpperCase()}</Avatar>
45-
</Button>
46-
</Fragment>
47-
)
21+
if (this.props.authenticated) {
22+
const authButtons = [
23+
<Link key="logout" to='/' onClick={this.props.logout} className={this.getLinkStyles()}>LOG OUT</Link>,
24+
<Link key="profile" to="/profile" className={this.getLinkStyles('profile')}>PROFILE</Link>
25+
]
26+
if (this.props.user.usertype === 'contact') {
27+
return [
28+
<Link key="create-project" to="/create-project" className={this.getLinkStyles('create-project')}>CREATE PROJECT</Link>,
29+
...authButtons
30+
]
31+
} else {
32+
return authButtons
33+
}
4834
} else {
4935
return (
50-
<Fragment>
51-
<Button dense className={this.getLinkStyles('signup')}
52-
component={Link}
53-
to="/signup">
54-
{'SIGN UP'}
55-
</Button>
56-
<Button dense className={this.getLinkStyles('login')}
57-
component={Link}
58-
to="/login">
59-
{'LOG IN'}
60-
</Button>
61-
</Fragment>
36+
<div>
37+
<Link key="signup" to="/signup" className={this.getLinkStyles('signup')}>SIGN UP</Link>
38+
<Link key="login" to='/login' className={this.getLinkStyles('login')}>LOG IN</Link>
39+
</div>
6240
)
6341
}
6442
}
@@ -71,21 +49,16 @@ class Header extends Component {
7149

7250
render () {
7351
return (
74-
<AppBar className={styles.header}
75-
position="static"
76-
color="inherit"
77-
elevation={0}>
78-
<Toolbar>
79-
<Typography className={`${styles.button} ${styles.flex}`}
80-
type="title" color="inherit"
81-
component={Link}
82-
to="/">
83-
{'calltocode'}
84-
</Typography>
85-
86-
{this.renderHeaderButtons()}
87-
</Toolbar>
88-
</AppBar>
52+
<div className={styles.headerRoot}>
53+
<AppBar position="static" color="inherit" elevation={0}>
54+
<Toolbar>
55+
<Typography type="title" color="inherit" className={styles.flex}>
56+
<Link to="/" className={styles.button}>calltocode</Link>
57+
</Typography>
58+
{this.renderHeaderButtons()}
59+
</Toolbar>
60+
</AppBar>
61+
</div>
8962
)
9063
}
9164
}
@@ -94,7 +67,8 @@ function mapStateToProps (state) {
9467
return {
9568
authenticated: state.auth.authenticated,
9669
currentPage: state.routing.location.pathname,
97-
user: state.user
70+
user: state.user,
71+
login: state.login
9872
}
9973
}
10074

@@ -106,7 +80,8 @@ Header.propTypes = {
10680
authenticated: PropTypes.bool.isRequired,
10781
currentPage: PropTypes.string.isRequired,
10882
logout: PropTypes.func.isRequired,
109-
user: PropTypes.object.isRequired
83+
user: PropTypes.object.isRequired,
84+
login: PropTypes.object
11085
}
11186

11287
export default connect(mapStateToProps, mapDispatchToProps)(Header)

‎client/components/Header/Header.scss

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../../scss/partials/partials';
22

3-
.header {
3+
.headerRoot {
44
width: 100%;
55
margin-bottom: 2px;
66

@@ -15,7 +15,15 @@
1515
}
1616
}
1717

18+
.flex {
19+
flex: 1;
20+
}
21+
1822
.button {
23+
padding: 10px;
24+
margin-left: 10px;
25+
color: dimgray;
26+
1927
&.active, &:active {
2028
@extend %buttonActive;
2129
}
@@ -25,6 +33,7 @@
2533
}
2634
}
2735

28-
.flex {
29-
flex: 1;
36+
.disabled {
37+
pointer-events: none;
38+
opacity: 0.6;
3039
}

‎client/components/LoginForm/LoginForm.js

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { Component } from 'react'
2-
import { connect } from 'react-redux'
3-
import { Link } from 'react-router-dom'
1+
import React, {Component} from 'react'
2+
import {connect} from 'react-redux'
3+
import {Link} from 'react-router-dom'
44
import PropTypes from 'prop-types'
55

66
import AuthActionCreator from '../../actions/auth'
77
import styles from './LoginForm.scss'
8-
import { buttonSubmit } from './loginFormJss'
9-
import { withStyles } from 'material-ui/styles'
8+
import {buttonSubmit} from './loginFormJss'
9+
import {withStyles} from 'material-ui/styles'
1010

1111
/**
1212
* material ui components
@@ -32,19 +32,28 @@ class LoginForm extends Component {
3232
event.preventDefault()
3333
if (this.state.email.length === 0) {
3434
this.setState({
35-
error:
36-
{ ...this.state.error, 'email': this.state.email.length === 0, 'password': this.state.password.length === 0 }
35+
error: {
36+
...this.state.error,
37+
'email': this.state.email.length === 0,
38+
'password': this.state.password.length === 0
39+
}
3740
})
3841
}
39-
if (this.state.password.length === 0 || this.state.email.length === 0) {
40-
return
41-
}
42+
4243
const loginRes = await this.props.doLogin(this.state.email, this.state.password)
4344
if (loginRes) {
4445
this.context.router.history.push('/')
4546
}
4647
}
4748

49+
canBeSubmitted () {
50+
const { email, password } = this.state
51+
return (
52+
email.length > 0 &&
53+
password.length > 0
54+
)
55+
}
56+
4857
onBlur (event) {
4958
event.preventDefault()
5059
this.setState({
@@ -54,23 +63,26 @@ class LoginForm extends Component {
5463

5564
handleChange (event) {
5665
event.preventDefault()
57-
this.setState({ [event.target.name]: event.target.value })
66+
this.setState({[event.target.name]: event.target.value})
5867
}
5968

6069
render () {
61-
const { classes } = this.props
70+
const {classes} = this.props
71+
const isEnabled = this.canBeSubmitted()
6272

6373
return (
6474
<form id="loginForm" className={styles.form} onSubmit={this.onSubmit}>
6575
<h1 className={styles.h1}>Login</h1>
6676

67-
<TextField required id="email" error={this.state.error['email']} label="Email" type="text" fullWidth className={styles.inputEmail} name="email"
68-
onChange={this.handleChange} onBlur={this.onBlur} />
77+
<TextField required id="email" error={this.state.error['email']} label="Email" type="text" fullWidth
78+
className={styles.inputEmail} name="email"
79+
onChange={this.handleChange} onBlur={this.onBlur}/>
6980

70-
<TextField required id="password" error={this.state.error['password']} label="Password" type="password" fullWidth className={styles.inputPassword} name="password"
71-
onChange={this.handleChange} onBlur={this.onBlur} />
81+
<TextField required id="password" error={this.state.error['password']} label="Password" type="password"
82+
fullWidth className={styles.inputPassword} name="password"
83+
onChange={this.handleChange} onBlur={this.onBlur}/>
7284

73-
<Button type="submit" raised className={classes.root} color="primary" fullWidth={true}>
85+
<Button type="submit" raised className={classes.root} color="primary" fullWidth={true} disabled={!isEnabled}>
7486
Submit
7587
</Button>
7688

@@ -81,7 +93,7 @@ class LoginForm extends Component {
8193
<Link
8294
className={styles.forgotPassword}
8395
key='forgotPassword'
84-
to='/forgot-password' >
96+
to='/forgot-password'>
8597
Forgot Password?
8698
</Link>
8799
</form>
@@ -92,6 +104,7 @@ class LoginForm extends Component {
92104
const mapDispatchToProps = {
93105
doLogin: AuthActionCreator.doLogin
94106
}
107+
95108
const mapStateToProps = (state) => {
96109
return {
97110
error: state.auth.error

0 commit comments

Comments
 (0)