Skip to content

Instantly share code, notes, and snippets.

@johnrhampton
Created June 21, 2016 12:32
Show Gist options
  • Save johnrhampton/bd12d698a0167a267c8327b190d15b04 to your computer and use it in GitHub Desktop.
Save johnrhampton/bd12d698a0167a267c8327b190d15b04 to your computer and use it in GitHub Desktop.
/containers/StartScreen/index.js
'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