flux login example

/*
 * Login component
 */
import SessionActions from '../actions/session'
import SessionStore from '../stores/session'

const INPUT_FIELDS = [
    {fieldName: "email", placeholder: "Your email"},
    {fieldName: "password", placeholder: "Your password"}
];

const Login = React.createClass({
    contextTypes: {
      router: React.PropTypes.func.isRequired
    },
    
    getInitialState() {
      return {
        email: '',
        password: '',
        invalidFields: [],
        disableSubmit: true
      }
    },
    
    componentDidMount() {
      SessionStore.addChangeListener(this._onChange);
    },
    
    componentWillUnmount() {
      SessionStore.removeChangeListener(this._onChange);
    },
    
    _onChange() {
      if (SessionStore.getErrors) {
        this.showErrorMessage();
      } else if (SessionStore.isLoggedIn()) {
        let id = SessionStore.getUserId(); // might also come from user store depending on how your stores are set up
        this.context.router.transitionTo('dashboard', { userId: id });
      } else {
        this.clearForm();
      }
    },
    
    clearForm() {
      this.setState(this.getInitialState());
    },
    
    handleChange(field, event) {
      this.setState({
        [field]: event.target.value,
        invalidFields: _.without(this.state.invalidFields, field),
        disableSubmit: !!this.state.email && !!this.state.password && !invalids.length
      })
    },
    
    validate(fields) {
      // ...do basic validation
    },
    
    handleFormSubmit() {
      let email = this.state.email;
      let password = this.state.password;
      
      let validationErrors = this.validate({
        email,
        password
      });
      
      if (!validationErrors.length) {
        SessionActions.login(email, password);
      } else {
        this.setState({
          invalidFields: validationErrors,
          disableSubmit: true
        })
      }
    },
    
    render() {
      let disabled =  this.state.disableSubmit;
        let errors = this.state.invalidFields;

        let inputs = INPUT_FIELDS.map((field, idx) => {
            let classes = field.fieldName;
            let type = field.fieldName === 'password' ? 'password' : 'text';
            if (_.includes(errors, field.fieldName)) {
                classes += " invalid";
            }

            return (
                <Input
                    type={type}
                    placeholder={field.placeholder}
                    className={classes}
                    key={idx}
                    ref={field.fieldName}
                    value={this.state[field.fieldName]}
                    onChange={() => { return this.handleChange(field.fieldName) }}
                />
            );
        }, this);

        return (
            <div>
                <div>
                    <h2>Sign In</h2>
                    <form>
                        {inputs}
                    </form>
                    <Button 
                      type="button" 
                      ref="submit" 
                      onClick={this.handleFormSubmit} 
                      disabled={disabled}
                    >Sign in</Button>
                </div>
            </div>
          );
    }
});