Forgot Password

Provides functionality to allow a logged-out customer to request a password reset. The customer must enter their email address, after which an email will be sent to them with a tokenised link. That link leads to the Reset Password page.

ForgotPasswordProvider

Contains the validation logic and (Formik) form setup for the Forgot Password functionality. Uses the requestPasswordReset mutation. This must wrap the React tree above any components that use the useForgotPasswordData hook.

Example usage:

function ForgotPasswordPage() {
  return (
    <ForgotPasswordProvider>
      {/* ForgotPasswordForm is where `useForgotPasswordData` is used */}
      <ForgotPasswordForm />
    </ForgotPasswordProvider>
  );
}

useForgotPasswordData

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.

emailInputProps: { type: string, name: string, required: boolean } This should be spread on to the email 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:

const { submitted, isSubmitting, globalError, isValid, emailInputProps } =
  useForgotPasswordData();

if (submitted) {
  return (
    <div>
      The form has been submitted! Check your email for a reset password link.
    </div>
  );
}

return (
  <>
    <label>Your email address</label>
    <input {...emailInputProps} />

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

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