basic version of ValidationMixin, register page getting more functional

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

@@ -1,8 +1,10 @@
-var React = require("react/addons");
+var React = require("react/addons"),
+    UserRegistration = require('../../models/userRegistration'),
+    RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin');
+
 
 var Register = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
+  mixins: [React.addons.LinkedStateMixin, RibicaValidationMixin],
-
   getInitialState: function() {
     return {
       myBabyDetailsVisible: false,
@@ -10,7 +12,8 @@ var Register = React.createClass({
       lastName: '',
       email: '',
       password: '',
-      passwordConfirmation: ''
+      passwordConfirmation: '',
+      errors: {}
     };
   },
   myBabyChange: function() {
@@ -62,8 +65,8 @@ var Register = React.createClass({
 
             <label for="baby_gender" className="col-md-4 control-label">Spol</label>
             <div className="col-md-4">
-              <input type="radio" name="baby_gender"/> Djevojcica
+              <input type="radio" name="baby_gender"/> Djevojčica
-              <input type="radio" name="baby_gender"/> Djecak
+              <input type="radio" name="baby_gender"/> Dječak
               <input type="radio" name="baby_gender"/> Jos ne znamo
             </div>
           </div>
@@ -75,7 +78,7 @@ var Register = React.createClass({
             </div>
           </div>
           <div className="form-group">
-            <label for="baby_birthdate" className="col-md-4 control-label">Datum rodjenja</label>
+            <label for="baby_birthdate" className="col-md-4 control-label">Datum rođenja</label>
             <div className="col-md-4">
 
             {this.renderDaySelector()}
@@ -86,10 +89,76 @@ var Register = React.createClass({
           </div>
         </div>)
   },
-  handleChange: function(prop, event) {
+  validations: {
-    var obj = {};
+    firstName: function(value) {
-    obj[prop] = event.target.value;
+      var errors = [];
-    this.setState(obj);
+      if (!value || value === '') {
+        errors.push("First name is required.");
+      } else if (value && value.length > 5) {
+        errors.push("First name is larger than 5 characters.");
+      }
+      return errors;
+    },
+    lastName : function(value) {
+      if (value === 'Dazdarevic') {
+        return ["You're the owner!"];
+      }
+      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,
+    email: function(value, callback) {
+      var validEmail = this._emailRe.test(value);
+
+      if (validEmail) {
+        //clearTimeout(this._emailTimeoutId);
+        //this._emailTimeoutId = setTimeout(function(){
+
+          //// TODO: check if email exists
+          //if (value === 'edin@edin.com') {
+            //if(callback) {
+              //var errors= ['Email is already taken'];
+              //callback(errors);
+            //}
+          //} else {
+            //if(callback) {
+              //callback([]);
+            //}
+          //}
+
+        //}.bind(this), 1000);
+      } else {
+        return ['Neispravna email adresa.'];
+      }
+    }
+  },
+  renderErrorMessage: function(message){
+    return (<div className='error-message'>{message}</div>)
+  },
+  doRegister: function(e) {
+    // TODO: move this to the UserRegistrationStore
+    if(this.validate()) {
+      alert('all fine!');
+      var user = new UserRegistration({
+        first_name: this.state.firstName,
+        last_name: this.state.lastName,
+        email: this.state.email,
+        password: this.state.password,
+        password_confirmation: this.state.passwordConfirmation
+      });
+
+      user.save(null, {
+        success: function() {
+          alert('saved!');
+        },
+        error: function(model, response, options) {
+          alert('error');
+          console.log('error:', response);
+        }.bind(this)
+      });
+    }
+
+    e.preventDefault();
   },
   render : function() {
     return (<div>
@@ -99,6 +168,7 @@ var Register = React.createClass({
       {this.state.email} |
       {this.state.password} |
       {this.state.passwordConfirmation} |
+      {this.isValid() ? "yes" : "no"} |
       <div className="center">
         <form className="form-horizontal">
 
@@ -106,39 +176,42 @@ var Register = React.createClass({
         <div className="form-group">
             <label for="firstName" className="col-md-4 control-label">Ime</label>
             <div className="col-md-4">
-              <input type="text" valueLink={this.linkState('firstName')} className="form-control" id="firstName" placeholder="Ime"/>
+              <input type="text" onChange={this.handleChange('firstName')} className="form-control" id="firstName" placeholder="Ime"/>
+              {this.getValidationMessages('firstName').map(this.renderErrorMessage)}
             </div>
         </div>
 
         <div className="form-group">
             <label for="lastName" className="col-md-4 control-label">Prezime</label>
             <div className="col-md-4">
-              <input type="text" valueLink={this.linkState('lastName')} className="form-control" id="lastName" placeholder="Prezime"/>
+              <input type="text" onChange={this.handleChange('lastName')} className="form-control" id="lastName" placeholder="Prezime"/>
+              {this.getValidationMessages('lastName').map(this.renderErrorMessage)}
             </div>
         </div>
         <div className="form-group">
             <label for="email" className="col-md-4 control-label">Email</label>
             <div className="col-md-4">
-              <input type="text" valueLink={this.linkState('email')} className="form-control" id="email" placeholder="Email Adresa"/>
+              <input type="text" onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Email Adresa"/>
+              {this.getValidationMessages('email').map(this.renderErrorMessage)}
             </div>
         </div>
         <div className="form-group">
-            <label for="password" className="col-md-4 control-label">Sifra</label>
+            <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="Sifra"/>
+              <input type="password"  valueLink={this.linkState('password')} className="form-control" id="password" placeholder="Šifra"/>
             </div>
         </div>
         <div className="form-group">
-            <label for="password_confirmation" className="col-md-4 control-label">Potvrda sifre</label>
+            <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 sifre"/>
+              <input type="password" valueLink={this.linkState('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda šifre"/>
             </div>
         </div>
 
         <div className="form-group">
             <label for="my_baby" className="col-md-4 control-label">Moja beba</label>
             <div className="col-md-4">
-              <input type="radio" onChange={this.myBabyChange} name="my_baby" id="already_born" /> Vec rodjena
+              <input type="radio" onChange={this.myBabyChange} name="my_baby" id="already_born" /> Vec rođena
               <input type="radio" onChange={this.myBabyChange} id="on_the_way" name="my_baby" />Na putu
             </div>
         </div>
@@ -147,13 +220,10 @@ var Register = React.createClass({
 
         <div className="form-group">
             <div className="col-md-4">
-            <button>Save</button>
+            <button onClick={this.doRegister}>Save</button>
             </div>
         </div>
-
-
         </fieldset>
-
         </form>
       </div>
       </div>);

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

@@ -0,0 +1,51 @@
+var RibicaValidationMixin = {
+  _updateState: function(prop, value) {
+    var newState = {};
+    newState[prop] = value;
+    this.setState(newState);
+  },
+  _validate: function(prop, value) {
+    if(this.validations && this.validations[prop]) {
+      var cb = function(err) {
+        if (err !== undefined) {
+          var errors = this.state.errors;
+          if(err.length > 0) {
+            errors[prop] = err;
+          } else {
+            delete errors[prop];
+          }
+          this.setState({errors: errors});
+        }
+      }.bind(this);
+
+      var immediateErrors = this.validations[prop](value, cb);
+      if(immediateErrors  !== undefined) {
+        cb(immediateErrors);
+      }
+    }
+  },
+  handleChange: function(prop) {
+    return function(event) {
+      event.preventDefault();
+      this._updateState(prop, event.target.value);
+      this._validate(prop, event.target.value);
+    }.bind(this);
+
+  },
+  getValidationMessages:function(prop) {
+    return (this.state.errors[prop] || []);
+  },
+  validate: function() {
+    for (var key in this.state) {
+      if (this.state.hasOwnProperty(key)) {
+        this._validate(key, this.state[key]);
+      }
+    }
+    return this.isValid();
+  },
+  isValid: function() {
+    return Object.keys(this.state.errors).length === 0;
+  }
+};
+
+module.exports = RibicaValidationMixin;

front-ui/app/css/main.css

@@ -21,3 +21,7 @@ body {
     display: inline-block;
 
 }
+
+.error-message {
+    color: red;
+}

front-ui/app/models/userRegistration.js

@@ -0,0 +1,26 @@
+var Backbone = require('backbone');
+var Globals = require('../globals');
+
+var UserRegistration = Backbone.Model.extend({
+
+	initialize: function() {
+        $.ajaxPrefilter(
+            function(options, originalOptions, jqXHR) {
+                options.xhrFields = {
+                    withCredentials: true
+                }
+            }
+        );
+    },
+
+    url: Globals.ApiUrl + '/user',
+    defaults: {
+      first_name : '',
+      last_name : '',
+      email : '',
+      password: '',
+      password_confirmation: ''
+    }
+});
+
+module.exports = UserRegistration;