Update password

The customer may change/update their password when logged in.

UpdatePasswordProvider

This component uses the render prop pattern.

It has the following props:

onSubmitSuccess(): void This function will be called when the form is successfully submitted.

render({ submitted, globalError, inputProps, isValid, isSubmitting, ...formik }): React.ReactNode The render prop receives the following properties:

Render prop object

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.

inputProps: { oldPassword: Attributes, newPassword: Attributes, repeatPassword: Attributes } These attributes must be spread on to their respective input fields. This is critical to ensure the form behaves correctly.

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 here. In most cases they should not be needed.

Example usage:

Copy

Copied

<UpdatePasswordProvider
  onSubmitSuccess={() => alert("success!")}
  render={({ isSubmitting, isValid, submitted, globalError, inputProps }) => (
    <section>
      <label>Old password</label>
      <input {...inputProps.oldPassword} />
      <label>New password</label>
      <input {...inputProps.newPassword} />
      <label>New password (again)</label>
      <input {...inputProps.repeatPassword} />

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

      {submitted && <div>Your password has been successfully updated.</div>}

      <button type="submit" disabled={isSubmitting || !isValid}>
        Save
      </button>
    </section>
  )}
/>