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 configurations
The UpdatePassword container provides the following configuration options:
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); }}