Created
June 21, 2016 12:32
-
-
Save johnrhampton/bd12d698a0167a267c8327b190d15b04 to your computer and use it in GitHub Desktop.
/containers/StartScreen/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import React, {Component, PropTypes} from 'react'; | |
import {connect} from 'react-redux'; | |
import {changeRoute} from '../../common/actions/navigation.action'; | |
import {login, updateLoginField} from '../../common/actions/user.action'; | |
import {BG_IMAGES} from '../../common/constants/backgrounds'; | |
import Login from '../../components/Login'; | |
class StartScreen extends Component { | |
constructor(props) { | |
super(props); | |
this._handleLogin = this._handleLogin.bind(this); | |
this._handleLoginFieldChange = this._handleLoginFieldChange.bind(this); | |
} | |
componentWillReceiveProps(nextProps) { | |
var user_reducer = nextProps.user_reducer; | |
if (user_reducer.error) { | |
this._showSnackBar(user_reducer.error.message); | |
return; | |
} | |
if (user_reducer.profile && user_reducer.profile.user.status === 'authenticated') { | |
this.props.dispatch(changeRoute('/dashboard')); | |
} | |
} | |
componentDidMount() { | |
this._setBackGround(); | |
componentHandler.upgradeDom(); | |
} | |
_handleLogin() { | |
var login_profile = this.props.user_reducer.login_profile; | |
if (!login_profile.username || !login_profile.password || !login_profile.phone_ext) { | |
this._showSnackBar('Username, Password, and Phone Extension are required!'); | |
return; | |
} | |
this.props.dispatch(login(login_profile.username, login_profile.password, login_profile.phone_ext)); | |
} | |
_handleLoginFieldChange(field, event) { | |
this.props.dispatch(updateLoginField(field, event.target.value)); | |
} | |
_setBackGround() { | |
function getRandomBGPhoto() { | |
var photo_number = Math.floor(Math.random() * BG_IMAGES.length); | |
return BG_IMAGES[photo_number]; | |
} | |
let login_container = document.getElementById('login-container'); | |
login_container.style.background = 'url(' + getRandomBGPhoto() + ') top center no-repeat'; | |
login_container.style.backgroundSize = 'cover'; | |
} | |
_showSnackBar(message) { | |
var data = { | |
message: message, | |
timeout: 3500 | |
}; | |
var snackbarContainer = document.querySelector('#login-snack-bar'); | |
snackbarContainer.MaterialSnackbar.showSnackbar(data); | |
} | |
render() { | |
const {user_reducer} = this.props; | |
return ( | |
<div> | |
<Login hotKeyMap={user_reducer.key_map} | |
loading={user_reducer.loading} | |
username={user_reducer.login_profile.username} | |
password={user_reducer.login_profile.password} | |
phone_ext={user_reducer.login_profile.phone_ext} | |
handleLoginFieldChange={this._handleLoginFieldChange} | |
handleLogin={this._handleLogin}/> | |
</div> | |
); | |
} | |
} | |
StartScreen.propTypes = { | |
dispatch: PropTypes.func.isRequired | |
}; | |
function mapStateToProps(state) { | |
const {user_reducer} = state; | |
return { | |
user_reducer | |
}; | |
} | |
export default connect(mapStateToProps)(StartScreen); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment