registration page design added, some other minor changes

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

@@ -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>)
   },
@@ -214,7 +187,7 @@ var Register = React.createClass({
           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
               }
 
@@ -282,6 +255,86 @@ var Register = React.createClass({
   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;

front-ui/app/css/main.css

@@ -449,3 +449,7 @@ text-decoration: none;
         overflow: hidden!important;
     }
 }
+
+.error-message {
+  color: red;
+}