UpdatePassword container

The UpdatePassword container continues the process of resetting the user’s password that began in the ResetPassword container. The user clicks a link in an email to navigate to the UpdatePassword container, where they can enter a new password.

Upon a successful password update, the UpdatePassword container renders the SuccessNotification container.

The UpdatePassword container can be overridden using the Slots API.

If the signInOnSuccess property is passed, the user will be automatically logged in and redirected to the value specified in routeRedirectOnSignIn. This property overrides SuccessNotification or custom slot content.

If the routeRedirectOnPasswordUpdate property is passed, the user will be redirected to the specified URL after a successful password update. This property overrides the SuccessNotification container or custom slot content.

UpdatePassword container

UpdatePassword configurations

The UpdatePassword container provides the following configuration options:

Options	Type	Req?	Description
signInOnSuccess	boolean	No	Determines if the user should be automatically signed in after a successful password update. This has no effect if email confirmation has been enabled.
formSize	default \| small	No	Controls form paddings and spacing. Use "small" to embed the form in small layout containers like a dropdown in the header.
routeRedirectOnPasswordUpdate	function	No	Determines the page to which the user should be redirected after a successful password update.
routeRedirectOnSignIn	function	No	Determines the page to which the user should be redirected after signing in.
routeSignInPage	function	No	Determines the page to which the user should be redirected when the user is not signed in and tries to access a protected page.
routeWrongUrlRedirect	function	No	Determines the page to which the user should be redirected when accessing a wrong URL.
onErrorCallback	function()	No	Callback executed when an error occurs, receiving the error object as a parameter.
onSuccessCallback	function()	No	Callback executed when the password update is successful, receiving a string value as a parameter.
slots	function	No	Allows passing the SuccessNotification container or custom component rendered on a successful password update if routeRedirectOnPasswordUpdate is not provided.

Example

The following example uses the UpdatePassword container to change the user’s password. If successful, the SuccessNotification container is rendered.

export default async function decorate(block) {
  if (checkIsAuthenticated()) {
    window.location.href = CUSTOMER_ACCOUNT_PATH;
  } else {
    await authRenderer.render(UpdatePassword, {
      routeWrongUrlRedirect: () => CUSTOMER_LOGIN_PATH,
      routeSignInPage: () => CUSTOMER_LOGIN_PATH,
      slots: {
        SuccessNotification: (ctx) => {
          const userName = ctx?.isSuccessful?.userName || '';

          const elem = document.createElement('div');

          authRenderer.render(SuccessNotification, {
            labels: {
              headingText: `Welcome ${userName}!`,
              messageText: 'Your password has been successfully updated.',
            },
            slots: {
              SuccessNotificationActions: (innerCtx) => {
                const primaryBtn = document.createElement('div');

                authRenderer.render(Button, {
                  children: 'My Account',

                  onClick: () => {
                    window.location.href = CUSTOMER_ACCOUNT_PATH;
                  },
                })(primaryBtn);

                innerCtx.appendChild(primaryBtn);

                const secondaryButton = document.createElement('div');
                secondaryButton.style.display = 'flex';
                secondaryButton.style.justifyContent = 'center';
                secondaryButton.style.marginTop = 'var(--spacing-xsmall)';

                authRenderer.render(Button, {
                  children: 'Logout',
                  variant: 'tertiary',
                  onClick: async () => {
                    await authApi.revokeCustomerToken();
                    window.location.href = '/';
                  },
                })(secondaryButton);

                innerCtx.appendChild(secondaryButton);
              },
            },
          })(elem);

          ctx.appendChild(elem);
        },
      },
    })(block);
  }
}