accounts-frontend/src/components/auth/BaseAuthBody.jsx

/**
 * Helps with form fields binding, form serialization and errors rendering
 */
import React, { Component, PropTypes } from 'react';

import AuthError from 'components/auth/authError/AuthError';
import { userShape } from 'components/user/User';
import { FormModel } from 'components/ui/form';

export default class BaseAuthBody extends Component {
    static contextTypes = {
        clearErrors: PropTypes.func.isRequired,
        resolve: PropTypes.func.isRequired,
        requestRedraw: PropTypes.func.isRequired,
        auth: PropTypes.shape({
            error: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
                type: PropTypes.string,
                payload: PropTypes.object
            })]),
            scopes: PropTypes.array
        }).isRequired,
        user: userShape
    };

    componentWillReceiveProps(nextProps, nextContext) {
        // TODO: we must not access Form#fields. This is a temporary
        // solution to reset Captcha, when the form does not handle errors
        if (nextContext.auth.error
            && this.form.fields.captcha
            && nextContext.auth.error !== this.context.auth.error
        ) {
            this.form.fields.captcha.reset();
        }
    }

    renderErrors() {
        return this.context.auth.error
            ? <AuthError error={this.context.auth.error} onClose={this.onClearErrors} />
            : null
            ;
    }

    onFormSubmit() {
        this.context.resolve(this.serialize());
    }

    onClearErrors = this.context.clearErrors;

    form = new FormModel();

    bindField = this.form.bindField.bind(this.form);
    serialize = this.form.serialize.bind(this.form);

    autoFocus() {
        const fieldId = this.autoFocusField;

        fieldId && this.form.focus(fieldId);
    }
}