login progress

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

@@ -1,41 +1,117 @@
 var React = require("react");
 var NavigationActions = require('../../actions/navigationActions');
+var UserActions = require('../../actions/userActions');
 var Router = require('react-router');
 var Link = Router.Link;
-var Login = React.createClass({
-    
+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() {
+        var loginState = UserStore.getLoginState();
+
+        if (loginState.loggedIn) {
+            NavigationActions.goToHome();
+        } else {
+
+            this.setState({login: loginState});
+        }
+    },
+    getInitialState: function() {
+        return {
+            email: '',
+            password: '',
+            errors: {},
+            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>
-            <div className="center" >
-            <form className="form-horizontal">
+                <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" className="form-control" id="email" placeholder="Unesite email"></input>
-  </div>
-  <div className="form-group">
-    <label for="password">Sifra</label>
-    <input type="password" className="form-control" id="password" placeholder="Sifra"></input>
-  </div>
-  <button type="submit" className="btn btn-default">Submit</button>
-            </form>
-            </div>
+                <label for="email">Email adresa</label>
+                <input type="email" onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Unesite email"></input>
 
-            
-            </div>
-            <div className="col-md-6">
-<Link to="registracija">
+                {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>
 
-Niste registrovani? Kliknite ovdje da se registrujete!
-</Link>
+                {this.getValidationMessages('password').map(this.renderErrorMessage)}
+                </div>
+                <button type="button" onClick={this.doLogin} className="btn btn-default">Prijava</button>
+                </form>
+                </div>
 
 
-            </div>
-            </div>);
+                </div>
+                <div className="col-md-6">
+                <Link to="registracija">
+
+                Niste registrovani? Kliknite ovdje da se registrujete!
+                </Link>
+
+
+                </div>
+                </div>);
     }
-})
+});
+
 module.exports = Login;