MeteorLogin = React.createClass({
  onChangePassword: function(value){
    e.preventDefault();
    console.log(value.target.value);
  },
  onChangeUsername: function(value){
    e.preventDefault();
    console.log(value.target.value);
  },
  render: function(){
    return (
      <div className="row" style={row}>
        <div style={contentStyle} className="col-sm-4 col-sm-offset-4">
          <h1>Login</h1>
          <hr style={rule}/>
          <form>
            <MeteorLogin.UserInput onChange={this.onChangePassword} ref="userInput"/>
            <MeteorLogin.PasswordInput onChange={this.onChangeUsername} ref="passwordInput"/>
            <MeteorLogin.LoginButton clickLogin={this.clickLogin}/>
          </form>
        </div>
      </div>
    )
  }
});

MeteorLogin.UserInput = React.createClass({
  onChange: function(){
    e.preventDefault();
    this.props.onChange(e.target.value);
  },
  getInitialState: function() {
    return {
      value: ""
    }
  },
  render: function(){
    return (
      <div className="form-group">
       <label>User</label>
       <input onChange={this.props.onChange} className="form-control"/>
      </div>
    )
  }
});

MeteorLogin.PasswordInput = React.createClass({
  getInitialState: function() {
    return {
      value: ""
    }
  },
  render: function(){
    return (
      <div className="form-group">
       <label>Password</label>
       <input onChange={this.props.onChange} type="password" className="form-control"/>
      </div>
    )
  }
});

MeteorLogin.LoginButton = React.createClass({
  render: function(){
    return (
      <button onClick={this.props.clickLogin} className="btn btn-default">Login</button>
    )
  }
});