Login.jsx

var LoginStore = require('../stores/LoginStore');

var LoginActions = require('../actions/LoginActions');


var Login = React.createClass({
  getInitialState: function () {
    return {
      expanded: false,
      username: '',
      password: '',
    };
  },

  render: function() {
    var dropdown;
    if (this.state.expanded) {

      dropdown = (
        <div className="login-dropdown">
          <span>
            <h3 className="margin-0">Login
              <button
                className="btn btn-default btn-sm margin-10 "
                onClick={this.goSignup}>
                 Signup
              </button>
            </h3>
          </span>

          <div>
            <span>Username:</span>
            <input
              ref="username" />

            <span>Password:</span>
            <input
              ref="password"
              type="password"/>
            <button
              className="btn btn-primary btn-sm margin-10"
              onClick={this._onSubmit}>
                Submit
            </button>
            <button
              className="btn btn-default btn-sm"
              onClick={this.expandToggle}>
                Cancel
            </button>
          </div>
        </div>
      );
    }

    return (
      <li className="navbar-text">
        <a className="login-text" onClick={this.expandToggle}>Sign in/up</a>
        {dropdown}
      </li>
      );

  },

  expandToggle: function () {
    this.setState({
      expanded: !this.state.expanded,
      signup: false
    });
  },

  handleLogin: function() {
    var username = this.refs.username.getDOMNode().value;
    var password =  this.refs.password.getDOMNode().value;
    LoginActions.loginUser(username, password);
  }

});