import React from 'react';
import { FormState, FormObject } from 'react-formstate';
import Input from './Input.jsx';

export default class LoginForm extends React.Component {

  constructor(props) {
    super(props);
    this.formState = new FormState(this);
    
    // if you were editing a model, you could "inject" props.model
    this.state = this.formState.createUnitOfWork().injectModel();

    // since we're not injecting a model, the above is equivalent to
    this.state = {};
  }

  // there is framework assistance for required fields, this is for demonstration
  
  validateUsername(username) {
    if (username.trim() === '') { return 'Username is required'; }
  }

  validatePassword(password) {
    if (password.trim() === '') { return 'Password is required'; }
  }

  render() {
    return (
      <form>
        <FormObject formState={this.formState}>
          <Input formField='username' label='Username' />{/* autowired */}
          <Input formField='password' label='Password' validate={this.validatePassword} />
        </FormObject>
        <input type='submit' value='Submit' onClick={this.handleSubmit.bind(this)} />
        <span>{this.formState.isInvalid() ? 'Please fix validation errors' : null}</span>
      </form>
    );
  }

  handleSubmit(e) {
    e.preventDefault();
    let model = this.formState.createUnitOfWork().createModel();
    if (model) {
      alert(JSON.stringify(model)); // submit to your api or store or whatever
    }
    // else: createModel called setState to set the appropriate validation messages
  }
}

import React from 'react';

export default class Input extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    return !nextProps.fieldState.equals(this.props.fieldState);
  }

  render() {
    console.log('render ' + this.props.label); // for demonstration only
    return (
      <div>
        <label>{this.props.label}</label>
        <input type='text' value={this.props.fieldState.getValue()} onChange={this.props.updateFormState} />
        <span>{this.props.fieldState.getMessage()}</span>
      </div>
    );
  }
}