From 2f809cfbcf043caa1629071f9d89cd2e4c4d28db Mon Sep 17 00:00:00 2001
From: Edin Dazdarevic <edin.dazdarevic@gmail.com>
Date: Sun, 19 Apr 2015 15:00:06 +0200
Subject: [PATCH] registration page design added, some other minor changes

---
 front-ui/app/components/account/register.js | 143 ++++++++++++++------
 front-ui/app/css/main.css                   |  32 +++--
 2 files changed, 116 insertions(+), 59 deletions(-)

diff --git a/front-ui/app/components/account/register.js b/front-ui/app/components/account/register.js
index 8b809db..7e1543e 100644
--- a/front-ui/app/components/account/register.js
+++ b/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>)
   },
@@ -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;
diff --git a/front-ui/app/css/main.css b/front-ui/app/css/main.css
index 8f309f7..8adf26c 100644
--- a/front-ui/app/css/main.css
+++ b/front-ui/app/css/main.css
@@ -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;
     }
-}
\ No newline at end of file
+}
+
+.error-message {
+  color: red;
+}