Skip to main content
Version: Next

PasswordChangeContainer

Handles changing user's password.

Usage#

import React from "react";
import {
PasswordChangeContainer,
PasswordChangeCurrentPassword,
PasswordChangeNewPassword,
PasswordChangeConfirmNewPassword,
PasswordChangeButton,
Alert,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomPasswordChangeView = () => {
return (
<PasswordChangeContainer
onSuccess={(userObject) => {
console.log(userObject);
}}
onFailure={(err) => {
console.error(err.message);
}}
>
<Alert />
<PasswordChangeCurrentPassword label="Current password" />
<PasswordChangeNewPassword label="New password" />
<PasswordChangeConfirmNewPassword label="Confirm new password" />
<PasswordChangeButton />
</PasswordChangeContainer>
);
};

Reference#

PasswordChangeContainer#

Props#

onSuccess#

(userObject) โ‡’ void

Callback function called when the password is changed succesfully.

onFailure#

(errorObject) โ‡’ void

Callback function called when changing the password fails.

Children components#

Alert#

Displays the relevant errors or success messages.


PasswordChangeCurrentPassword Required#

Instance of Input

Input field component for the current password.


PasswordChangeNewPassword Required#

Instance of Input

Input field component for the new password.


PasswordChangeConfirmNewPassword Required#

Instance of Input

Input field component to confirm the new password.


PasswordChangeButton Required#

Instance of Button

A button component that submits the form.

Props#

name#

string?

The title displayed inside the button