279 lines
9.1 KiB
JavaScript
279 lines
9.1 KiB
JavaScript
var React = require("react/addons"),
|
|
UserRegistration = require('../../models/userRegistration'),
|
|
RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin'),
|
|
UserStore = require('../../stores/userStore'),
|
|
NavigationActions = require('../../actions/navigationActions'),
|
|
UserActions = require('../../actions/userActions'),
|
|
ValidationUtils = require('../../utils/validation');
|
|
|
|
|
|
|
|
var Register = React.createClass({
|
|
mixins: [React.addons.LinkedStateMixin, RibicaValidationMixin],
|
|
getInitialState: function() {
|
|
return {
|
|
myBabyDetailsVisible: false,
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
password: '',
|
|
passwordConfirmation: '',
|
|
errors: {},
|
|
registration: UserStore.getRegistrationState()
|
|
};
|
|
},
|
|
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) {
|
|
if (!ValidationUtils.isValidRequired(value)) {
|
|
return ["Ime je obavezno."];
|
|
}
|
|
},
|
|
password: function(value, callback) {
|
|
if(!ValidationUtils.isValidRequired(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."];
|
|
}
|
|
},
|
|
lastName : function(value) {
|
|
if (!ValidationUtils.isValidRequired(value)) {
|
|
return ["Prezime je obavezno."];
|
|
}
|
|
},
|
|
_emailTimeoutId: null,
|
|
email: function(value, callback) {
|
|
|
|
if (ValidationUtils.isValidEmail(value)) {
|
|
//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>)
|
|
},
|
|
componentDidMount: function() {
|
|
UserStore.addChangeListener(this.onUserStoreChange);
|
|
},
|
|
componentWillUnmount: function() {
|
|
UserStore.removeChangeListener(this.onUserStoreChange);
|
|
},
|
|
onUserStoreChange: function() {
|
|
this.setState({
|
|
registration: UserStore.getRegistrationState()
|
|
});
|
|
},
|
|
register: function(e) {
|
|
if(this.validate()) {
|
|
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
|
|
});
|
|
|
|
UserActions.registerUser(user);
|
|
}
|
|
|
|
e.preventDefault();
|
|
},
|
|
successContinue: function(e) {
|
|
NavigationActions.goToHome();
|
|
e.preventDefault();
|
|
},
|
|
renderRegistrationState: function() {
|
|
var rs = this.state.registration;
|
|
if (!rs.performed) {
|
|
|
|
return (<div></div>)
|
|
} else if(rs.performed && !rs.success){
|
|
return (<div>
|
|
Desila se pogreška pri registraciji. Detalji greške su:
|
|
{rs.error.responseJSON}
|
|
</div>)
|
|
} else if (rs.performed && rs.success) {
|
|
return (<div>
|
|
Uspješno ste se registrovali na Ribicu. Kliknite <a onClick={this.successContinue}>ovdje</a> za nastavak.
|
|
</div>)
|
|
}
|
|
},
|
|
render : function() {
|
|
var cx = React.addons.classSet;
|
|
var regSuccess = this.state.registration.performed && this.state.registration.success;
|
|
var classes = cx({
|
|
'hide': regSuccess
|
|
});
|
|
return (<div>
|
|
<span className="h3">Registracija</span>
|
|
{this.renderRegistrationState()}
|
|
<div className="center" className={classes}>
|
|
<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" 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" onChange={this.handleChange('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda šifre"/>
|
|
|
|
|
|
{this.getValidationMessages('passwordConfirmation').map(this.renderErrorMessage)}
|
|
</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.register} type="button" className="btn btn-default btn-lg">
|
|
Register2
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>);
|
|
}
|
|
})
|
|
module.exports = Register;
|