registration progress

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

@@ -1,6 +1,10 @@
 var React = require("react/addons"),
     UserRegistration = require('../../models/userRegistration'),
-    RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin');
+    RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin'),
+    UserStore = require('../../stores/userStore'),
+    NavigationActions = require('../../actions/navigationActions'),
+    UserActions = require('../../actions/userActions');
+
 
 
 var Register = React.createClass({
@@ -13,7 +17,8 @@ var Register = React.createClass({
       email: '',
       password: '',
       passwordConfirmation: '',
-      errors: {}
+      errors: {},
+      registrationState: UserStore.getRegistrationState()
     };
   },
   myBabyChange: function() {
@@ -149,10 +154,20 @@ var Register = React.createClass({
   renderErrorMessage: function(message){
     return (<div className='error-message'>{message}</div>)
   },
-  doRegister: function(e) {
+  componentDidMount: function() {
+      UserStore.addChangeListener(this.onUserStoreChange);
+  },
+  componentWillUnmount: function() {
+      UserStore.removeChangeListener(this.onUserStoreChange);
+  },
+  onUserStoreChange: function() {
+      this.setState({
+          registrationState: UserStore.getRegistrationState()
+      });
+  },
+  register: function(e) {
     // TODO: move this to the UserRegistrationStore
     if(this.validate()) {
-      alert('all fine!');
       var user = new UserRegistration({
         first_name: this.state.firstName,
         last_name: this.state.lastName,
@@ -161,29 +176,41 @@ var Register = React.createClass({
         password_confirmation: this.state.passwordConfirmation
       });
 
-      user.save(null, {
-        success: function() {
-          alert('saved!');
-        },
-        error: function(model, response, options) {
-          alert('error');
-          console.log('error:', response);
-        }.bind(this)
-      });
+      UserActions.registerUser(user);
     }
 
     e.preventDefault();
   },
+  successContinue: function(e) {
+    NavigationActions.goToHome();
+    e.preventDefault();
+  },
+  renderRegistrationState: function() {
+    var rs = this.state.registrationState;
+    if (!rs.performed) {
+
+    return (<div></div>)
+    } else  if(rs.performed && !rs.success){
+        return (<div>
+                Desila se pogreska pri registraciji. Detalji greske su:
+                {rs.error.responseJSON}
+                </div>)
+    } else if (rs.performed && rs.success) {
+        return (<div>
+               Uspjesno ste se registrovali na Ribicu. Kliknite <a onClick={this.successContinue}>ovdje</a> za nastavak. 
+                </div>)
+    }
+  },
   render : function() {
+  var cx = React.addons.classSet;
+  var regSuccess = this.state.registrationState.performed && this.state.registrationState.success;
+  var classes = cx({
+    'hide': regSuccess 
+  });
     return (<div>
       <span className="h3">Registracija</span>
-      {this.state.firstName} |
-      {this.state.lastName} |
-      {this.state.email} |
-      {this.state.password} |
-      {this.state.passwordConfirmation} |
-      {this.isValid() ? "yes" : "no"} |
-      <div className="center">
+           {this.renderRegistrationState()}
+      <div className="center" className={classes}>
         <form className="form-horizontal">
 
         <fieldset>
@@ -239,7 +266,7 @@ var Register = React.createClass({
         <div className="form-group">
             <div className="col-md-4">
 
-            <button onClick={this.doRegister} type="button" className="btn btn-default btn-lg">
+            <button onClick={this.register} type="button" className="btn btn-default btn-lg">
             Register2
 </button>
             </div>