senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

registration page design added, some other minor changes

Browse Source
This commit is contained in:
Edin Dazdarevic
2015-04-19 15:00:06 +02:00
parent 79752fca47
commit 2f809cfbcf
2 changed files with 116 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
front-ui/app/components/account/register.js
View File

@@ -22,7 +22,7 @@ var Register = React.createClass({
myBabyDOBDay: -1,
myBabyDOBMonth: -1,
myBabyDOBYear: -1,
myBabyOnTheWay: false,
myBabyOnTheWay: true,
loginState : UserStore.getLoginState()
};
},
@@ -47,7 +47,7 @@ var Register = React.createClass({
monthsSelect.push(<option value={i}>{months[i - 1]}</option>)
}
return (<select onChange={this.onBabyDOBMonthChange}>{monthsSelect}</select>)
return (<select className="form-control " onChange={this.onBabyDOBMonthChange}>{monthsSelect}</select>)
},
renderYearSelector: function() {
var currentYear = (new Date().getFullYear());
@@ -58,7 +58,7 @@ var Register = React.createClass({
years.push(<option value={currentYear - i}>{currentYear - i}</option>)
}
return (<select onChange={this.onBabyDOBYearChange}> {years} </select>)
return (<select className="form-control " onChange={this.onBabyDOBYearChange}> {years} </select>)
},
renderDaySelector: function() {
var days = [];
@@ -67,7 +67,7 @@ var Register = React.createClass({
days.push(<option value={i}>{i}</option>)
}
return (<select onChange={this.onBabyDOBDayChange}> {days} </select>)
return (<select className="form-control " onChange={this.onBabyDOBDayChange}> {days} </select>)
},
onBabyDOBDayChange: function(e) {
this.setState({
@@ -94,43 +94,7 @@ var Register = React.createClass({
babyGender: e.currentTarget.value
});
},
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" value="0" onChange={this.myBabyGenderChange}/> Djevojčica
<input type="radio" name="baby_gender" value="1" onChange={this.myBabyGenderChange}/> Dječak
<input type="radio" name="baby_gender" value="2" onChange={this.myBabyGenderChange}/> 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" onChange={this.myBabyNameChange} 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)) {
@@ -185,6 +149,15 @@ var Register = React.createClass({
}
}
},
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>)
},
@@ -210,11 +183,11 @@ var Register = React.createClass({
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,
gender: this.state.babyGender === "boy" ? 1 : 2,
on_the_way: this.state.myBabyOnTheWay
}
@@ -269,7 +242,7 @@ var Register = React.createClass({
</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.
Uspješno ste se registrovali na Ribicu. Kliknite <a onClick={this.successContinue}>ovdje</a> za nastavak.
</div>)
}
},
@@ -277,11 +250,91 @@ var Register = React.createClass({
var cx = React.addons.classSet;
var regSuccess = this.state.registration.performed && this.state.registration.success;
var classes = cx({
'hide': regSuccess
'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()}
@@ -351,7 +404,7 @@ var Register = React.createClass({
</fieldset>
</form>
</div>
</div>);
</div>); */
}
})
module.exports = Register;

32
front-ui/app/css/main.css
View File

@@ -7,7 +7,7 @@ body{
background-size: cover ;
background-position: center ;
background-repeat: no-repeat;
}
#left-nave {
@@ -149,7 +149,7 @@ margin-left: 8px;
padding-right: 45px;
margin-left: -23px;
margin-right: -23px;
}
#beba:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
@@ -237,7 +237,7 @@ border-color: lightgray;
}
.navbar-default .navbar-nav > li > a{
color:black;
}
.navbar-default .navbar-nav > li{
@@ -340,7 +340,7 @@ background-size: cover;
right:-14px;
bottom: -15px;
text-align: right;
}
.mycart div {
text-align: right;
@@ -361,7 +361,7 @@ color: white;
}
#myhome-hover:hover {
border-bottom: solid #06c3c3 1px;
}
@@ -375,7 +375,7 @@ color: white;
color:black;
padding: 10px;
border-bottom: solid 1px lightgray;
}
.sidebar li a{
text-decoration: none;
@@ -399,7 +399,7 @@ text-decoration: none;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
@@ -413,10 +413,10 @@ text-decoration: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
border-top:none !important;
}
@@ -426,26 +426,30 @@ text-decoration: none;
.navbar-nav>li {
float: none;
}
.navbar-nav>ul {
margin-bottom: 0px;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
}
.error-message {
color: red;
}