Migrate NewPasswordView to final-form

Author: catarak

client/modules/User/actions.js

@@ -220,17 +220,20 @@ export function validateResetPasswordToken(token) {
   };
 }
 
-export function updatePassword(token, formValues) {
-  return (dispatch) => {
+export function updatePassword(formValues, token) {
+  return dispatch => new Promise((resolve, reject) =>
     apiClient.post(`/reset-password/${token}`, formValues)
       .then((response) => {
         dispatch(loginUserSuccess(response.data));
         browserHistory.push('/');
+        resolve();
       })
-      .catch(() => dispatch({
-        type: ActionTypes.INVALID_RESET_PASSWORD_TOKEN
+      .catch(() => {
+        dispatch({
+          type: ActionTypes.INVALID_RESET_PASSWORD_TOKEN
+        });
+        reject();
       }));
-  };
 }
 
 export function updateSettingsSuccess(user) {

client/modules/User/components/NewPasswordForm.jsx

@@ -1,70 +1,77 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { domOnlyProps } from '../../../utils/reduxFormUtils';
+import { Form, Field } from 'react-final-form';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { validateNewPassword } from '../../../utils/reduxFormUtils';
+import { updatePassword } from '../actions';
 import Button from '../../../common/Button';
 
 function NewPasswordForm(props) {
-  const {
-    fields: { password, confirmPassword }, handleSubmit, submitting, invalid, pristine,
-    t
-  } = props;
+  const { resetPasswordToken } = props;
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  function onSubmit(formProps) {
+    return dispatch(updatePassword(formProps, resetPasswordToken));
+  }
+
   return (
-    <form
-      className="form"
-      onSubmit={handleSubmit(props.updatePassword.bind(this, props.params.reset_password_token))}
+    <Form
+      fields={['password', 'confirmPassword']}
+      validate={validateNewPassword}
+      onSubmit={onSubmit}
     >
-      <p className="form__field">
-        <label htmlFor="password" className="form__label">{t('NewPasswordForm.Title')}</label>
-        <input
-          className="form__input"
-          aria-label={t('NewPasswordForm.TitleARIA')}
-          type="password"
-          id="Password"
-          {...domOnlyProps(password)}
-        />
-        {password.touched && password.error && (
-          <span className="form-error">{password.error}</span>
-        )}
-      </p>
-      <p className="form__field">
-        <label htmlFor="confirm password" className="form__label">{t('NewPasswordForm.ConfirmPassword')}</label>
-        <input
-          className="form__input"
-          type="password"
-          aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
-          id="confirm password"
-          {...domOnlyProps(confirmPassword)}
-        />
-        {confirmPassword.touched && confirmPassword.error && (
-          <span className="form-error">{confirmPassword.error}</span>
-        )}
-      </p>
-      <Button type="submit" disabled={submitting || invalid || pristine}>{t('NewPasswordForm.SubmitSetNewPassword')}</Button>
-    </form>
+      {({
+        handleSubmit, submitting, invalid, pristine
+      }) => (
+        <form
+          className="form"
+          onSubmit={handleSubmit}
+        >
+          <Field name="password">
+            {field => (
+              <p className="form__field">
+                <label htmlFor="password" className="form__label">{t('NewPasswordForm.Title')}</label>
+                <input
+                  className="form__input"
+                  aria-label={t('NewPasswordForm.TitleARIA')}
+                  type="password"
+                  id="Password"
+                  {...field.input}
+                />
+                {field.meta.touched && field.meta.error && (
+                  <span className="form-error">{field.meta.error}</span>
+                )}
+              </p>
+            )}
+          </Field>
+          <Field name="confirmPassword">
+            {field => (
+              <p className="form__field">
+                <label htmlFor="confirm password" className="form__label">{t('NewPasswordForm.ConfirmPassword')}</label>
+                <input
+                  className="form__input"
+                  type="password"
+                  aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
+                  id="confirm password"
+                  {...field.input}
+                />
+                {field.meta.touched && field.meta.error && (
+                  <span className="form-error">{field.meta.error}</span>
+                )}
+              </p>
+            )}
+          </Field>
+          <Button type="submit" disabled={submitting || invalid || pristine}>{t('NewPasswordForm.SubmitSetNewPassword')}</Button>
+        </form>
+      )}
+    </Form>
   );
 }
 
 NewPasswordForm.propTypes = {
-  fields: PropTypes.shape({
-    password: PropTypes.objectOf(PropTypes.shape()).isRequired,
-    confirmPassword: PropTypes.objectOf(PropTypes.shape()).isRequired,
-  }).isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  updatePassword: PropTypes.func.isRequired,
-  submitting: PropTypes.bool,
-  invalid: PropTypes.bool,
-  pristine: PropTypes.bool,
-  params: PropTypes.shape({
-    reset_password_token: PropTypes.string,
-  }).isRequired,
-  t: PropTypes.func.isRequired
-};
-
-NewPasswordForm.defaultProps = {
-  invalid: false,
-  pristine: true,
-  submitting: false,
+  resetPasswordToken: PropTypes.string.isRequired,
 };
 
-export default withTranslation()(NewPasswordForm);
+export default NewPasswordForm;

client/modules/User/components/ResetPasswordForm.jsx

@@ -11,8 +11,8 @@ function ResetPasswordForm(props) {
   const resetPasswordInitiate = useSelector(state => state.user.resetPasswordInitiate);
   const dispatch = useDispatch();
 
-  function submitInitiateResetPassword() {
-    dispatch(initiateResetPassword());
+  function submitInitiateResetPassword(formProps) {
+    dispatch(initiateResetPassword(formProps));
   }
 
   return (

client/modules/User/pages/NewPasswordView.jsx

@@ -1,19 +1,26 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import { reduxForm } from 'redux-form';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
-import { bindActionCreators } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
-import { withTranslation } from 'react-i18next';
-import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
 import NewPasswordForm from '../components/NewPasswordForm';
-import * as UserActions from '../actions';
+import { validateResetPasswordToken } from '../actions';
 import Nav from '../../../components/Nav';
 
 function NewPasswordView(props) {
+  const { t } = useTranslation();
+  const resetPasswordToken = props.params.reset_password_token;
+  const resetPasswordInvalid = useSelector(state => state.user.resetPasswordInvalid);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(validateResetPasswordToken(resetPasswordToken));
+  }, [resetPasswordToken]);
+
   const newPasswordClass = classNames({
     'new-password': true,
-    'new-password--invalid': props.user.resetPasswordInvalid,
+    'new-password--invalid': resetPasswordInvalid,
     'form-container': true,
     'user': true
   });
@@ -22,13 +29,13 @@ function NewPasswordView(props) {
       <Nav layout="dashboard" />
       <div className={newPasswordClass}>
         <Helmet>
-          <title>{props.t('NewPasswordView.Title')}</title>
+          <title>{t('NewPasswordView.Title')}</title>
         </Helmet>
         <div className="form-container__content">
-          <h2 className="form-container__title">{props.t('NewPasswordView.Description')}</h2>
-          <NewPasswordForm {...props} />
+          <h2 className="form-container__title">{t('NewPasswordView.Description')}</h2>
+          <NewPasswordForm resetPasswordToken={resetPasswordToken} />
           <p className="new-password__invalid">
-            {props.t('NewPasswordView.TokenInvalidOrExpired')}
+            {t('NewPasswordView.TokenInvalidOrExpired')}
           </p>
         </div>
       </div>
@@ -39,43 +46,7 @@ function NewPasswordView(props) {
 NewPasswordView.propTypes = {
   params: PropTypes.shape({
     reset_password_token: PropTypes.string,
-  }).isRequired,
-  validateResetPasswordToken: PropTypes.func.isRequired,
-  user: PropTypes.shape({
-    resetPasswordInvalid: PropTypes.bool
-  }).isRequired,
-  t: PropTypes.func.isRequired
+  }).isRequired
 };
 
-function validate(formProps) {
-  const errors = {};
-
-  if (!formProps.password) {
-    errors.password = i18next.t('NewPasswordView.EmptyPassword');
-  }
-  if (!formProps.confirmPassword) {
-    errors.confirmPassword = i18next.t('NewPasswordView.PasswordConfirmation');
-  }
-
-  if (formProps.password !== formProps.confirmPassword) {
-    errors.password = i18next.t('NewPasswordView.PasswordMismatch');
-  }
-
-  return errors;
-}
-
-function mapStateToProps(state) {
-  return {
-    user: state.user
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(UserActions, dispatch);
-}
-
-export default withTranslation()(reduxForm({
-  form: 'new-password',
-  fields: ['password', 'confirmPassword'],
-  validate
-}, mapStateToProps, mapDispatchToProps)(NewPasswordView));
+export default NewPasswordView;

client/utils/reduxFormUtils.js

@@ -62,11 +62,7 @@ export function validateLogin(formProps) {
   return errors;
 }
 
-export function validateSignup(formProps) {
-  const errors = {};
-
-  validateNameEmail(formProps, errors);
-
+function validatePasswords(formProps, errors) {
   if (!formProps.password) {
     errors.password = i18n.t('ReduxFormUtils.errorEmptyPassword');
   }
@@ -80,6 +76,19 @@ export function validateSignup(formProps) {
   if (formProps.password !== formProps.confirmPassword && formProps.confirmPassword) {
     errors.confirmPassword = i18n.t('ReduxFormUtils.errorPasswordMismatch');
   }
+}
+
+export function validateNewPassword(formProps) {
+  const errors = {};
+  validatePasswords(formProps, errors);
+  return errors;
+}
+
+export function validateSignup(formProps) {
+  const errors = {};
+
+  validateNameEmail(formProps, errors);
+  validatePasswords(formProps, errors);
 
   return errors;
 }