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

var React = require("react/addons"),
    UserRegistration = require('../../models/userRegistration'),
    RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin');


var Register = React.createClass({
  mixins: [React.addons.LinkedStateMixin, RibicaValidationMixin],
  getInitialState: function() {
    return {
      myBabyDetailsVisible: false,
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      passwordConfirmation: '',
      errors: {}
    };
  },
  myBabyChange: function() {
    this.setState({
      myBabyDetailsVisible: true
    });
  },
  renderMonthSelector: function() {
    var months = ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Juni',
    'Juli','August','Septembar', 'Oktobar','Novembar','Decembar'];

    var monthsSelect = [];
    for(var i = 0; i < months.length; i++) {
      monthsSelect.push(<option value={i}>{months[i]}</option>)
    }

    return (<select>{monthsSelect}</select>)
  },
  renderYearSelector: function() {
    var currentYear = (new Date().getFullYear());
    var years = [];
    years.push(<option>Godina</option>)

    for(var i = 0; i < 12; i++) {
      years.push(<option value={currentYear - i}>{currentYear - i}</option>)
    }

    return (<select> {years} </select>)
  },
  renderDaySelector: function() {
    var days = [];
    days.push(<option>Dan</option>)
    for(var i = 1; i <= 31; i++) {
      days.push(<option value={i}>{i}</option>)
    }

    return (<select> {days} </select>)
  },
  renderBabyDetails: function() {
    if (!this.state.myBabyDetailsVisible) {

      return (
        <div></div>
        )
    }
    return (
        <div className="my-baby-details">
          <div className="form-group">

            <label for="baby_gender" className="col-md-4 control-label">Spol</label>
            <div className="col-md-4">
              <input type="radio" name="baby_gender"/> Djevojčica
              <input type="radio" name="baby_gender"/> Dječak
              <input type="radio" name="baby_gender"/> Jos ne znamo
            </div>
          </div>
          <div className="form-group">

            <label for="baby_name" className="col-md-4 control-label">Ime</label>
            <div className="col-md-4">
              <input type="text" className="form-control" id="baby_name" placeholder="Ime bebe"/>
            </div>
          </div>
          <div className="form-group">
            <label for="baby_birthdate" className="col-md-4 control-label">Datum rođenja</label>
            <div className="col-md-4">

            {this.renderDaySelector()}
            {this.renderMonthSelector()}
            {this.renderYearSelector()}

            </div>
          </div>
        </div>)
  },
  validations: {
    firstName: function(value) {
      var errors = [];
      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>
      <span className="h3">Registracija</span>
      {this.state.firstName} |
      {this.state.lastName} |
      {this.state.email} |
      {this.state.password} |
      {this.state.passwordConfirmation} |
      {this.isValid() ? "yes" : "no"} |
      <div className="center">
        <form className="form-horizontal">

        <fieldset>
        <div className="form-group">
            <label for="firstName" className="col-md-4 control-label">Ime</label>
            <div className="col-md-4">
              <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" 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" 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">Šifra</label>
            <div className="col-md-4">
              <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 šifre</label>
            <div className="col-md-4">
              <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 rođena
              <input type="radio" onChange={this.myBabyChange} id="on_the_way" name="my_baby" />Na putu
            </div>
        </div>

        {this.renderBabyDetails()}

        <div className="form-group">
            <div className="col-md-4">
            <button onClick={this.doRegister}>Save</button>
            </div>
        </div>
        </fieldset>
        </form>
      </div>
      </div>);
  }
})
module.exports = Register;