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 (
-
+ );
+ }}
+ />
+);
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 {}}
/>
-