Reset Password

This set of components/hooks handle the password reset mutation. When a customer requests a password reset, they will be emailed a tokenised link. That link will lead them to yourstore.com/reset-password/TOKEN, where token is a string.

This route is set up in Template Trend, and it is recommended to leave it as-is.

ResetPasswordProvider

This component will handle the parsing of the TOKEN from the url. It also sets up the (Formik) form and validation, and handles submitting the form and triggering the resetPassword mutation.

Example usage:

Copy

Copied

<ResetPasswordProvider>
  <ResetPasswordForm />
</ResetPasswordProvider>

useResetPasswordForm

This hook provides some helpers to build the form and display form validation and status.

It returns an object with the following keys:

submitted: boolean Whether or not the form has been successfully submitted.

globalError: string If the API returns any errors, this will be a string containing an error message.

passwordInputProps: { type: string, name: string, required: boolean } This should be spread on to the password input in the template. This is critical for ensuring the form is correctly hooked up.

isValid: boolean Whether or not the form passes validation.

isSubmitting: boolean Whether or not the form is in the process of submitting.

...formik All Formik render props are also exposed by this hook. In most cases they should not be needed.

Example usage:

Copy

Copied

const { submitted, isSubmitting, globalError, isValid, passwordInputProps } =
  useResetPasswordForm();

if (submitted) {
  return (
    <div>
      Your password has been reset. <Link to="/login">Login</Link>
    </div>
  );
}

return (
  <>
    <label>Enter your new password</label>
    <input {...passwordInputProps} />

    {globalError && <div style={errorStyles}>{globalError}</div>}

    <button type="submit" disabled={!isValid}>
      {isSubmitting ? "One moment…" : "Submit"}
    </button>
  </>
);