diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js index 9d4bb450..c27d6844 100644 --- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js +++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.example.js @@ -4,6 +4,7 @@ import PasswordRecoveryForm from './PasswordRecoveryForm'; export const Empty = { component: PasswordRecoveryForm, props: { + formId: 'PasswordRecoveryFormExample', onSubmit(values) { console.log('submit forgotten password email:', values); }, diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js index 03352200..0c31bb0c 100644 --- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js +++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js @@ -2,98 +2,104 @@ import React from 'react'; import PropTypes from 'prop-types'; import { compose } from 'redux'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; -import { reduxForm, propTypes as formPropTypes } from 'redux-form'; +import { Form as FinalForm } from 'react-final-form'; import classNames from 'classnames'; import { propTypes } from '../../util/types'; import * as validators from '../../util/validators'; import { isPasswordRecoveryEmailNotFoundError } from '../../util/errors'; -import { Form, PrimaryButton, TextInputField, NamedLink } from '../../components'; +import { Form, PrimaryButton, FieldTextInput, NamedLink } from '../../components'; import css from './PasswordRecoveryForm.css'; -const PasswordRecoveryFormComponent = props => { - const { - rootClassName, - className, - handleSubmit, - pristine, - submitting, - form, - initialValues, - intl, - inProgress, - recoveryError, - } = props; +const PasswordRecoveryFormComponent = props => ( + { + const { + rootClassName, + className, + formId, + handleSubmit, + pristine, + submitting, + initialValues, + intl, + inProgress, + recoveryError, + } = fieldRenderProps; - // email - const emailLabel = intl.formatMessage({ - id: 'PasswordRecoveryForm.emailLabel', - }); - const emailPlaceholder = intl.formatMessage({ - id: 'PasswordRecoveryForm.emailPlaceholder', - }); - const emailRequiredMessage = intl.formatMessage({ - id: 'PasswordRecoveryForm.emailRequired', - }); - const emailNotFoundMessage = intl.formatMessage({ - id: 'PasswordRecoveryForm.emailNotFound', - }); - const emailInvalidMessage = intl.formatMessage({ - id: 'PasswordRecoveryForm.emailInvalid', - }); + // email + const emailLabel = intl.formatMessage({ + id: 'PasswordRecoveryForm.emailLabel', + }); + const emailPlaceholder = intl.formatMessage({ + id: 'PasswordRecoveryForm.emailPlaceholder', + }); + const emailRequiredMessage = intl.formatMessage({ + id: 'PasswordRecoveryForm.emailRequired', + }); + const emailNotFoundMessage = intl.formatMessage({ + id: 'PasswordRecoveryForm.emailNotFound', + }); + const emailInvalidMessage = intl.formatMessage({ + id: 'PasswordRecoveryForm.emailInvalid', + }); - const emailRequired = validators.required(emailRequiredMessage); - const emailValid = validators.emailFormatValid(emailInvalidMessage); + const emailRequired = validators.required(emailRequiredMessage); + const emailValid = validators.emailFormatValid(emailInvalidMessage); - // In case a given email is not found, pass a custom error message - // to be rendered with the input component - const customErrorText = isPasswordRecoveryEmailNotFoundError(recoveryError) - ? emailNotFoundMessage - : null; - const initialEmail = initialValues ? initialValues.email : null; + // In case a given email is not found, pass a custom error message + // to be rendered with the input component + const customErrorText = isPasswordRecoveryEmailNotFoundError(recoveryError) + ? emailNotFoundMessage + : null; + const initialEmail = initialValues ? initialValues.email : null; - const classes = classNames(rootClassName || css.root, className); - const submitInProgress = submitting || inProgress; - const submitDisabled = (pristine && !initialEmail) || submitInProgress; + const classes = classNames(rootClassName || css.root, className); + const submitInProgress = submitting || inProgress; + const submitDisabled = (pristine && !initialEmail) || submitInProgress; - const loginLink = ( - - - - ); + const loginLink = ( + + + + ); - return ( -
- + return ( + + -
-

- - - -

+
+

+ + + +

- - - -
- - ); -}; + + + +
+ + ); + }} + /> +); PasswordRecoveryFormComponent.defaultProps = { rootClassName: null, className: null, + formId: null, inProgress: false, recoveryError: null, }; @@ -101,9 +107,9 @@ PasswordRecoveryFormComponent.defaultProps = { const { bool, string } = PropTypes; PasswordRecoveryFormComponent.propTypes = { - ...formPropTypes, rootClassName: string, className: string, + formId: string, inProgress: bool, recoveryError: propTypes.error, @@ -112,10 +118,7 @@ PasswordRecoveryFormComponent.propTypes = { intl: intlShape.isRequired, }; -const defaultFormName = 'PasswordRecoveryForm'; - -const PasswordRecoveryForm = compose(reduxForm({ form: defaultFormName }), injectIntl)( - PasswordRecoveryFormComponent -); +const PasswordRecoveryForm = compose(injectIntl)(PasswordRecoveryFormComponent); +PasswordRecoveryForm.displayName = 'PasswordRecoveryForm'; export default PasswordRecoveryForm; diff --git a/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap index 9f971d46..31a6afba 100644 --- a/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap +++ b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap @@ -36,7 +36,7 @@ exports[`ContactDetailsPage matches snapshot 1`] = ` values={Object {}} />

-