ChangePasswordForm

Change the password: current + new (twice), re-authenticated.

import { ChangePasswordForm } from "@evolve-storefront/feature-account/change-password-form";

Renders inside AccountProvider.

Preview

DefaultOpen in Storybook ↗

Usage

const { formProps } = useChangePasswordForm({ onPasswordChanged: close });

// The confirmation is checked here and dropped before the mutation runs.
<ChangePasswordForm {...formProps} onCancel={close} />;

Props

Prop	Type	Description
onValidSubmit	(values: { password: string; newPassword: string; }) => void	Runs with the current + new password on a valid submit (confirm dropped).
validationBehavior?	"aria" | "native"	Default "aria": mark fields via ARIA rather than blocking native submit. The form is then noValidate, so an input's own constraint (type="email") never stops the submit with a browser tooltip that the field's error does not match.
isPending?	boolean
error?	string | null
serverErrors?	FormValidationErrors
onCancel?	(() => void)

Any other props go to the root element, like on a plain HTML element.

Examples

With ErrorWrong current password (server error surfaced form-level).

// `useChangePasswordForm` maps a wrong current password into formProps.error.
<ChangePasswordForm onValidSubmit={change} error={errorMessage} />;

Open in Storybook ↗