Flux React Auth Actions

app.js

'use strict';

var React = require('react');
var copyProperties = require('react/lib/copyProperties');
var {Router} = require('director');
var AppDispatcher = require('./AppDispatcher');
var ActionTypes = require('./constants/ActionTypes');

// Export React so the dev tools can find it
(window !== window.top ? window.top : window).React = React;

/**
 * Check if Page component has a layout property; and if yes, wrap the page
 * into the specified layout, then mount to document.body.
 */
function render(page) {
  var child, props = {};
  while (page.defaultProps.layout) {
    child = page(props, child);
    copyProperties(props, page.defaultProps);
    page = page.defaultProps.layout;
  }
  React.renderComponent(page(props, child), document.body);
  document.title = props.title;
}

// Define URL routes
// See https://github.com/flatiron/director
var routes = {
  '/': () => render(require('./pages/Index.jsx')),
  '/sessions/new': () => render(require('./pages/sessions/New.jsx')),
};

// Initialize a router
var router = new Router(routes).configure({html5history: true}).init();

AppDispatcher.register(function(payload) {
  var action = payload.action;

  if (action.actionType === ActionTypes.SET_CURRENT_ROUTE) {
      router.setRoute(action.route);
  }

  return true; // No errors.  Needed by promise in Dispatcher.
});

AuthActions-Flux.js

'use strict';

var AppDispatcher = require('../AppDispatcher');
var ActionTypes = require('../constants/ActionTypes');

var AuthActions = {
  signin: function(data) {
    AppDispatcher.handleViewAction({
      actionType: ActionTypes.AUTH_SIGNIN,
      data: data
    });
  },
  signinSuccess: function(data) {
    AppDispatcher.handleViewAction({
      actionType: ActionTypes.AUTH_SIGNIN_SUCCESS,
      data: data
    });
  }
};

module.exports = AuthActions;

AuthStore.js

var AppDispatcher = require('../AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var ActionTypes = require('../constants/ActionTypes');
var merge = require('react/lib/merge');
var AuthActions = require('../actions/AuthActions-Flux');
var config = require('../config');
var superagent = require('superagent');

var SIGNIN_SUCCESS_EVENT = 'signinSuccess';

function signin(data) {

  superagent
    .post(config.apiRoot + '/signin')
    .send(data)
    .set('Accept', 'application/json')
    .end(function(res) {
      if (res.ok) {
         AuthActions.signinSuccess({});
       } else {

       }
    });

}

var AuthStore = merge(EventEmitter.prototype, {
  emitSigninSuccess: function() {
    this.emit(SIGNIN_SUCCESS_EVENT);
  },
  addSigninSuccessListener(callback) {
    this.on(SIGNIN_SUCCESS_EVENT, callback);
  },
  removeSigninSuccessListener(callback) {
    this.removeListener(SIGNIN_SUCCESS_EVENT, callback);
  }
});

AppDispatcher.register(function(payload) {
  var action = payload.action;

  switch(action.actionType) {
    case ActionTypes.AUTH_SIGNIN:
      signin(action.data);
      break;

    case ActionTypes.AUTH_SIGNIN_SUCCESS:
      AuthStore.emitSigninSuccess();
    default:
      return true;
  }

  return true; // No errors.  Needed by promise in Dispatcher.
});

module.exports = AuthStore;

RouteActions.js

'use strict';

var AppDispatcher = require('../AppDispatcher');
var ActionTypes = require('../constants/ActionTypes');

var AppActions = {

  /**
   * Set the current route.
   * @param {string} route Supply a route value, such as `todos/completed`.
   */
  setRoute(route) {
    AppDispatcher.handleViewAction({
      actionType: ActionTypes.SET_CURRENT_ROUTE,
      route
    });
  }

};

module.exports = AppActions;

SigninForm.jsx

/**
 * @jsx React.DOM
 */

'use strict';

var React = require('react');
var AuthActions = require('../actions/AuthActions-Flux');
var AuthStore = require('../stores/AuthStore');

var SigninForm = React.createClass({
  getInitialState() {
    return {
      errorMessage: null,
      stage: 0
    }
  },
  getDefaultProps() {
    return {
      cardNumber: '',
      pin: ''
    }
  },
  componentDidMount() {
    AuthStore.addSigninSuccessListener(this._onSigninSuccess);
  },
  componentWillUnmount() {
    AuthStore.removeSigninSuccessListener(this._onSigninSuccess);
  },
  _onSigninSuccess() {
    RouteActions.setRoute('/');
  },
  handleSubmit(e) {
    e.preventDefault();
    var number = this.refs.number.getDOMNode().value.trim();

    AuthActions.signin({ 'number': number });
  },
  handleCancel(e) {
    this.refs.pin.getDOMNode().value = '';
    this.setState({ stage: 0 });
  },
  render() {
    
    return (
      <form className="form-horizontal" role="form" onSubmit={this.handleSubmit}>
        { this.state.errorMessage ?
          <p className="bg-danger">{this.state.errorMessage}</p>
          : null}
        <section>
          <div className="form-group">
            <label for="number" className="col-sm-4 control-label">
              Card number
            </label>
            <div className="col-sm-8">
              <input type="text" className="form-control" id="number" name="number" ref="number" />
            </div>
          </div>
          <div className="form-group">
            <div className="col-sm-offset-4 col-sm-8">
              <button type="submit" className="btn btn-default pull-right">Next</button>
            </div>
          </div>
        </section>
      </form>
    );
  }
});

module.exports = SigninForm;