411 lines
16 KiB
JavaScript
411 lines
16 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: '',
|
||
registration: UserStore.getRegistrationState(),
|
||
myBabyDOBDay: -1,
|
||
myBabyDOBMonth: -1,
|
||
myBabyDOBYear: -1,
|
||
myBabyOnTheWay: true,
|
||
loginState : UserStore.getLoginState()
|
||
};
|
||
},
|
||
myBabyChange: function(e) {
|
||
this.setState({
|
||
myBabyDetailsVisible: true,
|
||
myBabyOnTheWay: (e.currentTarget.value === "1" ? true: false)
|
||
});
|
||
},
|
||
onKeyPress: function(e) {
|
||
var enterKeyCode = 13;
|
||
if(e.which == enterKeyCode) {
|
||
this.doRegister();
|
||
}
|
||
},
|
||
renderMonthSelector: function() {
|
||
var months = ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Juni',
|
||
'Juli','August','Septembar', 'Oktobar','Novembar','Decembar'];
|
||
|
||
var monthsSelect = [<option value='-1'>Mjesec</option>];
|
||
for(var i = 1; i <= months.length; i++) {
|
||
monthsSelect.push(<option value={i}>{months[i - 1]}</option>)
|
||
}
|
||
|
||
return (<select className="form-control " onChange={this.onBabyDOBMonthChange}>{monthsSelect}</select>)
|
||
},
|
||
renderYearSelector: function() {
|
||
var currentYear = (new Date().getFullYear());
|
||
var years = [];
|
||
years.push(<option value='-1'>Godina</option>)
|
||
|
||
for(var i = 0; i < 12; i++) {
|
||
years.push(<option value={currentYear - i}>{currentYear - i}</option>)
|
||
}
|
||
|
||
return (<select className="form-control " onChange={this.onBabyDOBYearChange}> {years} </select>)
|
||
},
|
||
renderDaySelector: function() {
|
||
var days = [];
|
||
days.push(<option value='-1'>Dan</option>)
|
||
for(var i = 1; i <= 31; i++) {
|
||
days.push(<option value={i}>{i}</option>)
|
||
}
|
||
|
||
return (<select className="form-control " onChange={this.onBabyDOBDayChange}> {days} </select>)
|
||
},
|
||
onBabyDOBDayChange: function(e) {
|
||
this.setState({
|
||
myBabyDOBDay: e.currentTarget.value
|
||
});
|
||
},
|
||
onBabyDOBMonthChange: function(e) {
|
||
this.setState({
|
||
myBabyDOBMonth: e.currentTarget.value
|
||
});
|
||
},
|
||
onBabyDOBYearChange: function(e) {
|
||
this.setState({
|
||
myBabyDOBYear: e.currentTarget.value
|
||
});
|
||
},
|
||
myBabyNameChange: function(e) {
|
||
this.setState({
|
||
babyName: e.currentTarget.value
|
||
});
|
||
},
|
||
myBabyGenderChange: function(e) {
|
||
this.setState({
|
||
babyGender: e.currentTarget.value
|
||
});
|
||
},
|
||
|
||
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.'];
|
||
}
|
||
}
|
||
},
|
||
renderGenderImage: function() {
|
||
if(this.state.babyGender === "boy") {
|
||
return <img id="imgImage" name="imgImage" src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/baby-blue_trmmbp.png" alt="baby" />
|
||
} else if (this.state.babyGender === "girl") {
|
||
return <img id="imgImage" name="imgImage" src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/baby-pink_j0eis4.png" alt="baby" />
|
||
}
|
||
|
||
return <img id="imgImage" name="imgImage" src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/baby-gray_mijkax.png" alt="baby" />
|
||
},
|
||
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(),
|
||
loginState : UserStore.getLoginState()
|
||
});
|
||
},
|
||
onRegisterClick: function(e) {
|
||
this.doRegister();
|
||
e.preventDefault();
|
||
},
|
||
doRegister: function() {
|
||
if(this.validate()) {
|
||
var children = [];
|
||
if (this.state.myBabyDetailsVisible) {
|
||
|
||
var dobOk = this.state.myBabyDOBDay !== -1 && this.state.myBabyDOBMonth !== -1 && this.state.myBabyDOBYear !== -1;
|
||
|
||
if (dobOk || this.state.babyName !== undefined || this.state.babyGender !== undefined) {
|
||
var childInfo = {
|
||
name: this.state.babyName,
|
||
gender: this.state.babyGender === "boy" ? 1 : 2,
|
||
on_the_way: this.state.myBabyOnTheWay
|
||
}
|
||
|
||
if(dobOk) {
|
||
var dob = this.state.myBabyDOBDay + '/' + this.state.myBabyDOBMonth + '/' + this.state.myBabyDOBYear;
|
||
childInfo.date_of_birth = dob;
|
||
}
|
||
children.push(childInfo);
|
||
}
|
||
}
|
||
|
||
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,
|
||
children_attributes : children
|
||
|
||
});
|
||
|
||
// need to add info about child
|
||
|
||
|
||
UserActions.registerUser(user);
|
||
}
|
||
},
|
||
successContinue: function(e) {
|
||
NavigationActions.goToHome();
|
||
e.preventDefault();
|
||
},
|
||
prettyPrintError: function(err) {
|
||
var errorInfo = [];
|
||
for(var key in err) {
|
||
if (err.hasOwnProperty(key)) {
|
||
errorInfo.push(<li>{err[key]}</li>);
|
||
}
|
||
}
|
||
return (<ul>
|
||
{errorInfo}
|
||
</ul>)
|
||
},
|
||
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:
|
||
{this.prettyPrintError(rs.error)}
|
||
</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
|
||
});
|
||
if (!this.state.registration.performed && this.state.loginState.loggedIn) {
|
||
return (<div>Vi ste već registrovani. Uživajte u kupovini.</div>)
|
||
}
|
||
|
||
return (<div>
|
||
{this.renderRegistrationState()}
|
||
<div className={classes}>
|
||
<div className="col-lg-6 col-md-6 col-sm-8 col-xs-12 col-centered" style={{height: 500}}>
|
||
<div className="reglogo">
|
||
<h1 style={{paddingTop: 40}} className="text-center">Registracija</h1>
|
||
<br />
|
||
<form className>
|
||
<div className="form-group col-lg-6 col-md-6 ">
|
||
<input style={{marginBottom: 8}} type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('firstName')} className="form-control" placeholder="Ime" />
|
||
{this.getValidationMessages('firstName').map(this.renderErrorMessage)}
|
||
|
||
</div>
|
||
<div className="form-group col-lg-6 col-md-6 ">
|
||
<input style={{marginBottom: 8}} type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('lastName')} className="form-control" placeholder="Prezime" />
|
||
{this.getValidationMessages('lastName').map(this.renderErrorMessage)}
|
||
|
||
</div>
|
||
<div className="form-group col-lg-12 col-md-12">
|
||
<input style={{marginBottom: 8}} type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('email')} className="form-control" placeholder="Email adresa" />
|
||
{this.getValidationMessages('email').map(this.renderErrorMessage)}
|
||
|
||
</div>
|
||
<div className="form-group col-lg-12 col-md-12">
|
||
<input style={{marginBottom: 8}} type="password" onKeyPress={this.onKeyPress} onChange={this.handleChange('password')} className="form-control" placeholder="Šifra" />
|
||
{this.getValidationMessages('password').map(this.renderErrorMessage)}
|
||
|
||
</div>
|
||
<div className="form-group col-lg-12 col-md-12">
|
||
<input style={{marginBottom: 8}} type="password" onKeyPress={this.onKeyPress} onChange={this.handleChange('passwordConfirmation')} className="form-control" placeholder="Potvrda šifre" />
|
||
{this.getValidationMessages('passwordConfirmation').map(this.renderErrorMessage)}
|
||
|
||
</div>
|
||
<div className="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||
{this.renderGenderImage()}
|
||
</div>
|
||
<div className="radio col-lg-6 col-md-6 ">
|
||
<h4>Moja beba (po izboru) </h4>
|
||
<br />
|
||
<label><input className name="option1" value="1" type="radio" id="opone" onChange={this.myBabyChange} /> Na putu</label>
|
||
<br />
|
||
<label><input className name="option1" type="radio" id="optwo" onChange={this.myBabyChange} /> Već rođena</label>
|
||
</div>
|
||
<div id="gender" className={this.state.myBabyOnTheWay ? "radio col-lg-6 hide": "radio col-lg-6 "}>
|
||
<br />
|
||
<label><input className name="gender" type="radio" id="chkImg" value="boy" onChange={this.myBabyGenderChange} /> Dječak</label>
|
||
<br />
|
||
<label><input className name="gender" type="radio" id="chkImg2" value="girl" onChange={this.myBabyGenderChange} /> Djevojčica</label>
|
||
</div>
|
||
<div id="babydetails" className={this.state.myBabyDetailsVisible ? "" :"hide"}>
|
||
<div className="radio col-lg-12 col-md-12">
|
||
<input style={{marginBottom: 8}} type="text" className="form-control" onChange={this.myBabyNameChange} placeholder="Ime bebe" />
|
||
</div>
|
||
<div className=" text-center col-lg-12 col-md-12">
|
||
Datum rođenja
|
||
</div>
|
||
<div className="form-group col-lg-12 col-md-12">
|
||
<div className=" col-lg-3 col-md-3">
|
||
{this.renderDaySelector()}
|
||
</div>
|
||
<div className="col-lg-5 col-md-5">
|
||
{this.renderMonthSelector()}
|
||
</div>
|
||
<div className=" col-lg-4 col-md-4">
|
||
{this.renderYearSelector()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<input style={{color: 'white', fontWeight: 'bold', height: 44}} type="submit" onClick={this.onRegisterClick} className=" mybutton center-block col-md-8 col-sm-8 col-xs-8 col-sm-push-2 col-xs-push-2 col-md-push-2" defaultValue="REGISTRUJ ME" />
|
||
</form>
|
||
<div className="text-center col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||
<h4>Već imate profil? <a href="Prijava.html"><span> Prijavite se</span></a></h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
/*
|
||
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" onKeyPress={this.onKeyPress} 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" onKeyPress={this.onKeyPress} 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" onKeyPress={this.onKeyPress} 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" onKeyPress={this.onKeyPress} 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" onKeyPress={this.onKeyPress} 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} value="1" id="on_the_way" name="my_baby" />Na putu
|
||
</div>
|
||
</div>
|
||
|
||
{this.renderBabyDetails()}
|
||
|
||
<div className="form-group">
|
||
<div className="col-md-4">
|
||
|
||
</div>
|
||
<div className="col-md-4">
|
||
<button onClick={this.onRegisterClick} type="button" className="btn btn-success btn-lg">
|
||
Registruj me
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</div>); */
|
||
}
|
||
})
|
||
module.exports = Register;
|