old-ribica/front-ui/app/components/account/login.js

var React = require("react");
var NavigationActions = require('../../actions/navigationActions');
var UserActions = require('../../actions/userActions');
var Router = require('react-router');
var Link = Router.Link;
var RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin');
var ValidationUtils = require('../../utils/validation.js');
var LoginModel = require('../../models/login');
var UserStore = require('../../stores/userStore');

var Login = React.createClass({
    mixins: [RibicaValidationMixin],
    componentDidMount:function() {
        UserStore.addChangeListener(this.onUserStoreChange);
    },
    componentWillUnmount: function() {
        UserStore.removeChangeListener(this.onUserStoreChange);
    },
    onUserStoreChange: function() {
        if(this.isMounted()) {
            var loginState = UserStore.getLoginState();
            this.setState({login: loginState});
            if (loginState.loggedIn) {
                setTimeout(function(){
                    NavigationActions.goToHome();
                }, 0);
            }
        }
    },
    getInitialState: function() {
        return {
            email: '',
            password: '',
            login: UserStore.getLoginState()
        };
    },
    validations: {
        email:function(value) {

            if(!ValidationUtils.isValidEmail(value)) {
                return ['Neispravna email adresa.'];
            }
            return [];
        },
    password: function(value) {
        if(!ValidationUtils.isValidRequired(value)) {
            return ["Šifra je obavezna."];
        }
        return [];
    }
    },
    renderErrorMessage: function(message){
        return (<div className='error-message'>{message}</div>)
    },
    onLoginClick: function(e) {
        this.doLogin();
        e.preventDefault();
    },
    doLogin: function() {
        if(this.validate()) {
            var loginInfo = new LoginModel({
                email: this.state.email,
                password: this.state.password
            });

            UserActions.userLogin(loginInfo);

        }
    },
    renderLoginFailure: function() {

        var loginState = this.state.login;
        if(!loginState.loggedIn) {
            return (<div>{loginState.error}</div>)
        }

        return (<div></div>)
    },
    onKeyPress: function(e) {
     var enterKeyCode = 13;
        if(e.which == enterKeyCode) {
            this.doLogin();
        }
    },
    render : function() {
        return (
          <div className="col-lg-4 col-md-6 col-sm-8 col-xs-10 col-centered" style={{height: 500}}>

                  <h1 style={{paddingTop: 40}} className="text-center">Prijava</h1>
                  <br />
                  {this.renderLoginFailure()}

                  <form className>
                    <div className="form-group col-lg-12 col-md-12">
                      <input style={{marginBottom: 8}} type="text" className="form-control" onKeyPress={this.onKeyPress} onChange={this.handleChange('email')} placeholder="Email adresa" />
                        {this.getValidationMessages('email').map(this.renderErrorMessage)}

                    </div>
                    <div className="form-group col-lg-12 col-md-12">
                      <input style={{marginBottom: 8}} type="password" onKeyPress={this.onKeyPress} onChange={this.handleChange('password')}  className="form-control" placeholder="Šifra" />
                        {this.getValidationMessages('password').map(this.renderErrorMessage)}

                    </div>
                    <input style={{color: 'white', fontWeight: 'bold', height: 44}} type="submit" onClick={this.onLoginClick} className=" mybutton center-block col-md-8 col-sm-8 col-xs-8 col-sm-push-2 col-xs-push-2 col-md-push-2" defaultValue="PRIJAVA" />
                  </form>
                  <div className="text-center col-lg-12">
                    <h4>Niste registrovani?  <Link to="registracija"><span>Registrujte se</span></Link></h4>
                  </div>
                </div>);
    }
});

module.exports = Login;