oldCodeWithRxForm

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
import { rxForm } from 'rx-react-form'

import { Button, FontH1 } from 'volt-ui'
import ValidatedInput from 'components/ValidatedInput'

import messages from './messages'
import styles from './index.css'

@injectIntl
@rxForm({
    fields: {
        pin: {
            validation: value => {
                if (value.length !== 4) {
                    return messages.errorPinLength
                }
            },
        },
        newPin: {
            validation: (value, { pin }) => {
                if (value.length !== 4) {
                    return messages.errorPinLength
                } else if (pin === value) {
                    return messages.errorNewPin
                }
            },
        },
        confirmNewPin: {
            validation: (value, { newPin }) => {
                if (value.length !== 4) {
                    return messages.errorPinLength
                } else if (value !== newPin) {
                    return messages.errorInconsistentPin
                }
            },
        },
    },
})
class UpdatePinForm extends PureComponent {
    static propTypes = {
        rootStyle: PropTypes.string,
        pin: PropTypes.any,
        newPin: PropTypes.any,
        confirmNewPin: PropTypes.any,
        valid: PropTypes.bool,
        dirty: PropTypes.bool,
        intl: intlShape,
        onSubmit: PropTypes.func,
        pending: PropTypes.bool,
    }

    static defaultProps = {
        rootStyle: null,
    }

    render() {
        const {
            rootStyle,
            pin,
            newPin,
            confirmNewPin,
            valid,
            dirty,
            pending,
        } = this.props
        return (
            <div className={classnames(styles.pinForm, rootStyle)}>
                <h4 className={styles.title}>
                    <FontH1>
                        <FormattedMessage {...messages.title} />
                    </FontH1>
                </h4>
                <form>
                    <ValidatedInput
                        placeholder={this.props.intl.formatMessage(
                            messages.oldPin,
                        )}
                        isBlock={true}
                        type={'password'}
                        name="pin"
                        meta={pin}
                        inputStyle={styles.input}
                    />
                    <ValidatedInput
                        placeholder={this.props.intl.formatMessage(
                            messages.newPin,
                        )}
                        isBlock={true}
                        type={'password'}
                        name="newPin"
                        meta={newPin}
                        inputStyle={styles.input}
                    />
                    <ValidatedInput
                        placeholder={this.props.intl.formatMessage(
                            messages.confirmNewPin,
                        )}
                        isBlock={true}
                        type={'password'}
                        name="confirmNewPin"
                        meta={confirmNewPin}
                        inputStyle={styles.input}
                    />
                    <Button
                        type="submit"
                        rootStyle={styles.submit}
                        disabled={!dirty || !valid}
                        loading={pending}
                    >
                        <FormattedMessage {...messages.submit} />
                    </Button>
                </form>
            </div>
        )
    }
}

export default UpdatePinForm