content: import React from 'react';
  import {connect} from 'cerebral-view-react';
  import isValidForm from 'cerebral-module-forms/helpers/isValidForm';
  import getInvalidFormFields from 'cerebral-module-forms/helpers/getInvalidFormFields';
  import {
    Button,
    ButtonGroup,
    Form,
    Text,
    TextField
  } from './../../../../common/UserInterface';
  
  export default connect({
    form: 'friends.addFriendForm'
  }, class AddFriendForm extends React.Component {
  
    static displayName = 'AddFriendForm'
  
    static propTypes = {
      signals: React.PropTypes.object.isRequired,
      form: React.PropTypes.object.isRequired,
      onSubmit: React.PropTypes.func.isRequired,
      onCancel: React.PropTypes.func.isRequired
    }
  
    render () {
      const {form} = this.props;
  
      const isValid = isValidForm(form);
      const invalidFormFields = getInvalidFormFields(form);
  
      return (
        <Form>
          <TextField id='address'
                     name='address'
                     label={{id: 'address', bundle: 'preferences'}}
                     value={form.address.value}
                     onChange={this._handleChangeAddress}/>
          <TextField id='requestMessage'
                     name='requestMessage'
                     type='textarea'
                     rows='4'
                     label={{id: 'requestMessage', bundle: 'preferences'}}
                     placeholder={{id: 'requestMessagePlaceholder'}}
                     hint={{id: 'requestMessageHint', bundle: 'preferences'}}
                     value={form.requestMessage.value}
                     onChange={this._handleChangeMessage}/>
          <div className='navigation'>
            <ButtonGroup>
              <Button title={{id: 'sendFriendRequest'}}
                      disabled={!isValid}
                      onMouseUp={this._handleSubmit}
                      onKeyboardEnter={this._handleSubmit}
                      onKeyboardPress={this._handleSubmit}>
                <Text l10n={{id: 'sendFriendRequest'}}/>
              </Button>
              <Button title={{id: 'cancel'}}
                      onMouseUp={this._handleCancel}
                      onKeyboardEnter={this._handleCancel}
                      onKeyboardPress={this._handleCancel}>
                <Text l10n={{id: 'cancel'}}/>
              </Button>
            </ButtonGroup>
          </div>
        </Form>
      );
    }
  
    _handleChangeAddress = (event) => {
      this.props.signals.forms.fieldChanged({
        field: 'friends.addFriendForm.address',
        value: event.target.value
      });
    }
  
    _handleChangeMessage = (event) => {
      this.props.signals.forms.fieldChanged({
        field: 'friends.addFriendForm.requestMessage',
        value: event.target.value
      });
    }
  
    _handleSubmit = (event) => {
      event.preventDefault();
  
      if (isValidForm(this.props.form)) {
        this.props.onSubmit(event, {
          address: this.props.form.address.value,
          requestMessage: this.props.form.requestMessage.value
        });
      }
    }
  
    _handleCancel = (event) => {
      event.preventDefault();
  
      this.props.onCancel(event);
    }
  });
  