validation mixin small fixes

front-api/controllers/user.rb

@@ -12,7 +12,7 @@ post '/user' do
   user.from_json(json, false)
 
   if user.save
-    "ok"
+    {:status => "ok"}.to_json
   else
     status 400
     user.errors.to_json

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

@@ -91,17 +91,32 @@ var Register = React.createClass({
   },
   validations: {
     firstName: function(value) {
-      var errors = [];
       if (!value || value === '') {
-        errors.push("Ime je obavezno.");
+        return ["Ime je obavezno."];
+      }
+    },
+    password: function(value, callback) {
+      if(value === undefined || value === "") {
+        return ["Šifra je obavezna."];
+      }
+
+      if (value.length < 6) {
+        return ["Šifra mora sadržavati minimalno 6 karaktera."]
+      }
+
+      if (callback) {
+        callback([], ["passwordConfirmation"]);
+      }
+    },
+    passwordConfirmation: function(value) {
+      if (this.getState().password !== value) {
+        return ["Šifre se ne podudaraju."];
       }
-      return errors;
     },
     lastName : function(value) {
-      if (value === 'Dazdarevic') {
+      if (!value || value === '') {
-        return ["You're the owner!"];
+        return ["Prezime je obavezno."];
       }
-      return [];
     },
     _emailRe: /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
     _emailTimeoutId: null,
@@ -125,6 +140,7 @@ var Register = React.createClass({
           //}
 
         //}.bind(this), 1000);
+
       } else {
         return ['Neispravna email adresa.'];
       }
@@ -196,13 +212,17 @@ var Register = React.createClass({
         <div className="form-group">
             <label for="password" className="col-md-4 control-label">Šifra</label>
             <div className="col-md-4">
-              <input type="password"  valueLink={this.linkState('password')} className="form-control" id="password" placeholder="Šifra"/>
+              <input type="password"  onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"/>
+              {this.getValidationMessages('password').map(this.renderErrorMessage)}
             </div>
         </div>
         <div className="form-group">
             <label for="password_confirmation" className="col-md-4 control-label">Potvrda šifre</label>
             <div className="col-md-4">
-              <input type="password" valueLink={this.linkState('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda šifre"/>
+              <input type="password" onChange={this.handleChange('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda šifre"/>
+
+
+              {this.getValidationMessages('passwordConfirmation').map(this.renderErrorMessage)}
             </div>
         </div>
 
@@ -218,7 +238,10 @@ var Register = React.createClass({
 
         <div className="form-group">
             <div className="col-md-4">
-            <button onClick={this.doRegister}>Save</button>
+
+            <button onClick={this.doRegister} type="button" className="btn btn-default btn-lg">
+            Register2
+</button>
             </div>
         </div>
         </fieldset>

front-ui/app/components/shared/mixins/ribicaValidationMixin.js

@@ -1,40 +1,54 @@
 var RibicaValidationMixin = {
-  _updateState: function(prop, value) {
+  _updateState: function(prop, value, callback) {
     var newState = {};
     newState[prop] = value;
-    this.setState(newState);
+    this.setState(newState, function(){
+      if(callback) {
+        callback();
+      }
+    }.bind(this));
   },
   _validate: function(prop, value) {
     if(this.validations && this.validations[prop]) {
-      var cb = function(err) {
+      var cb = function(err, revalidateFields) {
+        var errors = this.state.errors;
         if (err !== undefined) {
-          var errors = this.state.errors;
           if(err.length > 0) {
             errors[prop] = err;
           } else {
             delete errors[prop];
           }
-          this.setState({errors: errors});
+        } else {
+          delete errors[prop];
+        }
+        this.setState({errors: errors});
+        if (revalidateFields) {
+          for(var i = 0; i < revalidateFields.length; i++) {
+            this.validateField(revalidateFields[i], this.state[revalidateFields[i]]);
+          }
         }
       }.bind(this);
 
       var immediateErrors = this.validations[prop](value, cb);
-      if(immediateErrors  !== undefined) {
+      cb(immediateErrors);
-        cb(immediateErrors);
-      }
     }
   },
   handleChange: function(prop) {
     return function(event) {
       event.preventDefault();
-      this._updateState(prop, event.target.value);
+      var target = event.target;
-      this._validate(prop, event.target.value);
+      this._updateState(prop, target.value, function(){
+        this._validate(prop, target.value);
+      }.bind(this));
     }.bind(this);
 
   },
   getValidationMessages:function(prop) {
     return (this.state.errors[prop] || []);
   },
+  validateField: function(field) {
+    this._validate(field, this.state[field]);
+  },
   validate: function() {
     for (var key in this.state) {
       if (this.state.hasOwnProperty(key)) {
@@ -45,7 +59,15 @@ var RibicaValidationMixin = {
   },
   isValid: function() {
     return Object.keys(this.state.errors).length === 0;
-  }
+  },
+  componentDidMount : function(){
+    if (this.validations) {
+      var self = this;
+      this.validations.getState = function() {
+        return self.state;
+      };
+    }
+  },
 };
 
 module.exports = RibicaValidationMixin;