122 lines
3.8 KiB
JavaScript
122 lines
3.8 KiB
JavaScript
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);
|
|
UserActions.clearLogin();
|
|
},
|
|
componentWillUnmount: function() {
|
|
UserStore.removeChangeListener(this.onUserStoreChange);
|
|
},
|
|
componentWillReceiveProps: function() {
|
|
UserActions.clearLogin();
|
|
},
|
|
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>)
|
|
},
|
|
doLogin: function(e) {
|
|
|
|
if(this.validate()) {
|
|
var loginInfo = new LoginModel({
|
|
email: this.state.email,
|
|
password: this.state.password
|
|
});
|
|
|
|
UserActions.userLogin(loginInfo);
|
|
|
|
}
|
|
|
|
e.preventDefault();
|
|
},
|
|
renderLoginFailure: function() {
|
|
|
|
var loginState = this.state.login;
|
|
if(!loginState.loggedIn) {
|
|
return (<div>{loginState.error}</div>)
|
|
}
|
|
|
|
return (<div></div>)
|
|
},
|
|
render : function() {
|
|
return (<div>
|
|
<div className="col-md-6">
|
|
|
|
<span className="h3">Prijava </span>
|
|
{this.renderLoginFailure()}
|
|
<div className="center" >
|
|
<form className="form-horizontal">
|
|
|
|
<div className="form-group">
|
|
<label for="email">Email adresa</label>
|
|
<input type="email" onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Unesite email"></input>
|
|
|
|
{this.getValidationMessages('email').map(this.renderErrorMessage)}
|
|
</div>
|
|
<div className="form-group">
|
|
<label for="password">Šifra</label>
|
|
<input type="password" onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"></input>
|
|
|
|
{this.getValidationMessages('password').map(this.renderErrorMessage)}
|
|
</div>
|
|
<button type="button" onClick={this.doLogin} className="btn btn-default">Prijava</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div className="col-md-6">
|
|
<Link to="registracija">
|
|
|
|
Niste registrovani? Kliknite ovdje da se registrujete!
|
|
</Link>
|
|
|
|
|
|
</div>
|
|
</div>);
|
|
}
|
|
});
|
|
|
|
module.exports = Login;
|