ui for register page

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

@@ -1,9 +1,161 @@
-var React = require("react");
+var React = require("react/addons");
 
 var Register = React.createClass({
+  mixins: [React.addons.LinkedStateMixin],
+
+  getInitialState: function() {
+    return {
+      myBabyDetailsVisible: false,
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      passwordConfirmation: ''
+    };
+  },
+  myBabyChange: function() {
+    this.setState({
+      myBabyDetailsVisible: true
+    });
+  },
+  renderMonthSelector: function() {
+    var months = ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Juni',
+    'Juli','August','Septembar', 'Oktobar','Novembar','Decembar'];
+
+    var monthsSelect = [];
+    for(var i = 0; i < months.length; i++) {
+      monthsSelect.push(<option value={i}>{months[i]}</option>)
+    }
+
+    return (<select>{monthsSelect}</select>)
+  },
+  renderYearSelector: function() {
+    var currentYear = (new Date().getFullYear());
+    var years = [];
+    years.push(<option>Godina</option>)
+
+    for(var i = 0; i < 12; i++) {
+      years.push(<option value={currentYear - i}>{currentYear - i}</option>)
+    }
+
+    return (<select> {years} </select>)
+  },
+  renderDaySelector: function() {
+    var days = [];
+    days.push(<option>Dan</option>)
+    for(var i = 1; i <= 31; i++) {
+      days.push(<option value={i}>{i}</option>)
+    }
+
+    return (<select> {days} </select>)
+  },
+  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"/> Djevojcica
+              <input type="radio" name="baby_gender"/> Djecak
+              <input type="radio" name="baby_gender"/> 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" placeholder="Ime bebe"/>
+            </div>
+          </div>
+          <div className="form-group">
+            <label for="baby_birthdate" className="col-md-4 control-label">Datum rodjenja</label>
+            <div className="col-md-4">
+
+            {this.renderDaySelector()}
+            {this.renderMonthSelector()}
+            {this.renderYearSelector()}
+
+            </div>
+          </div>
+        </div>)
+  },
+  handleChange: function(prop, event) {
+    var obj = {};
+    obj[prop] = event.target.value;
+    this.setState(obj);
+  },
   render : function() {
     return (<div>
-      <span className="h3">Register page</span>
+      <span className="h3">Registracija</span>
+      {this.state.firstName} |
+      {this.state.lastName} |
+      {this.state.email} |
+      {this.state.password} |
+      {this.state.passwordConfirmation} |
+      <div className="center">
+        <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" valueLink={this.linkState('firstName')} className="form-control" id="firstName" placeholder="Ime"/>
+            </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" valueLink={this.linkState('lastName')} className="form-control" id="lastName" placeholder="Prezime"/>
+            </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" valueLink={this.linkState('email')} className="form-control" id="email" placeholder="Email Adresa"/>
+            </div>
+        </div>
+        <div className="form-group">
+            <label for="password" className="col-md-4 control-label">Sifra</label>
+            <div className="col-md-4">
+              <input type="password"  valueLink={this.linkState('password')} className="form-control" id="password" placeholder="Sifra"/>
+            </div>
+        </div>
+        <div className="form-group">
+            <label for="password_confirmation" className="col-md-4 control-label">Potvrda sifre</label>
+            <div className="col-md-4">
+              <input type="password" valueLink={this.linkState('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda sifre"/>
+            </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 rodjena
+              <input type="radio" onChange={this.myBabyChange} id="on_the_way" name="my_baby" />Na putu
+            </div>
+        </div>
+
+        {this.renderBabyDetails()}
+
+        <div className="form-group">
+            <div className="col-md-4">
+            <button>Save</button>
+            </div>
+        </div>
+
+
+        </fieldset>
+
+        </form>
+      </div>
       </div>);
   }
 })