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, myBabyDOBDay: -1,
myBabyDOBMonth: -1, myBabyDOBMonth: -1,
myBabyDOBYear: -1, myBabyDOBYear: -1,
myBabyOnTheWay: false, myBabyOnTheWay: true,
loginState : UserStore.getLoginState() loginState : UserStore.getLoginState()
}; };
}, },
@@ -47,7 +47,7 @@ var Register = React.createClass({
monthsSelect.push(<option value={i}>{months[i - 1]}</option>) 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() { renderYearSelector: function() {
var currentYear = (new Date().getFullYear()); var currentYear = (new Date().getFullYear());
@@ -58,7 +58,7 @@ var Register = React.createClass({
years.push(<option value={currentYear - i}>{currentYear - i}</option>) 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() { renderDaySelector: function() {
var days = []; var days = [];
@@ -67,7 +67,7 @@ var Register = React.createClass({
days.push(<option value={i}>{i}</option>) 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) { onBabyDOBDayChange: function(e) {
this.setState({ this.setState({
@@ -94,43 +94,7 @@ var Register = React.createClass({
babyGender: e.currentTarget.value 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: { validations: {
firstName: function(value) { firstName: function(value) {
if (!ValidationUtils.isValidRequired(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){ renderErrorMessage: function(message){
return (<div className='error-message'>{message}</div>) return (<div className='error-message'>{message}</div>)
}, },
@@ -210,11 +183,11 @@ var Register = React.createClass({
if (this.state.myBabyDetailsVisible) { if (this.state.myBabyDetailsVisible) {
var dobOk = this.state.myBabyDOBDay !== -1 && this.state.myBabyDOBMonth !== -1 && this.state.myBabyDOBYear !== -1; var dobOk = this.state.myBabyDOBDay !== -1 && this.state.myBabyDOBMonth !== -1 && this.state.myBabyDOBYear !== -1;
if (dobOk || this.state.babyName !== undefined || this.state.babyGender !== undefined) { if (dobOk || this.state.babyName !== undefined || this.state.babyGender !== undefined) {
var childInfo = { var childInfo = {
name: this.state.babyName, name: this.state.babyName,
gender: this.state.babyGender, gender: this.state.babyGender === "boy" ? 1 : 2,
on_the_way: this.state.myBabyOnTheWay on_the_way: this.state.myBabyOnTheWay
} }
@@ -269,7 +242,7 @@ var Register = React.createClass({
</div>) </div>)
} else if (rs.performed && rs.success) { } else if (rs.performed && rs.success) {
return (<div> 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>) </div>)
} }
}, },
@@ -277,11 +250,91 @@ var Register = React.createClass({
var cx = React.addons.classSet; var cx = React.addons.classSet;
var regSuccess = this.state.registration.performed && this.state.registration.success; var regSuccess = this.state.registration.performed && this.state.registration.success;
var classes = cx({ var classes = cx({
'hide': regSuccess 'hide': regSuccess
}); });
if (!this.state.registration.performed && this.state.loginState.loggedIn) { if (!this.state.registration.performed && this.state.loginState.loggedIn) {
return (<div>Vi ste već registrovani. Uživajte u kupovini.</div>) 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> return (<div>
<span className="h3">Registracija</span> <span className="h3">Registracija</span>
{this.renderRegistrationState()} {this.renderRegistrationState()}
@@ -351,7 +404,7 @@ var Register = React.createClass({
</fieldset> </fieldset>
</form> </form>
</div> </div>
</div>); </div>); */
} }
}) })
module.exports = Register; module.exports = Register;

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

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