pagamio-frontend-commons-lib/lib/auth/components/ChangePasswordPage.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import { useToast } from '../../context';
import { FormEngine } from '../../form-engine';
import { createFormSubmissionHandler, passwordValidation } from './AuthFormUtils';
import { AuthPageLayout } from './AuthPageLayout';
const ChangePasswordPage = ({ backHome = 'Back Home', submitButtonText = 'Change Password', showBackHomeButton = true, onSuccess, onError, handleUpdatePassword, onClickBackHome, }) => {
    const { addToast } = useToast();
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const formRef = useRef();
    const changePasswordFields = [
        {
            name: 'oldPassword',
            label: 'Old Password',
            type: 'password',
            placeholder: 'Enter Old Password',
            gridSpan: 12,
            validation: {
                required: 'Old password is required',
            },
        },
        {
            name: 'newPassword',
            label: 'New Password',
            type: 'password',
            placeholder: 'Enter New Password',
            gridSpan: 12,
            validation: passwordValidation,
        },
        {
            name: 'confirmationPassword',
            label: 'Confirm Password',
            type: 'password',
            placeholder: 'Enter Confirm Password',
            gridSpan: 12,
            validation: {
                required: 'Please confirm your password',
            },
        },
    ];
    const handleSubmit = createFormSubmissionHandler({
        setIsLoading,
        setError,
        addToast,
        formRef,
        onSuccess,
        onError,
    }, async (data) => {
        const { oldPassword, newPassword, confirmationPassword } = data;
        await handleUpdatePassword({
            oldPassword,
            newPassword,
            confirmationPassword,
        });
    }, 'Password changed successfully', 'Failed to change password. Please try again.');
    return (_jsx(AuthPageLayout, { title: "Change Password", subtitle: "Ready for a new password? Enter your current password, then create a new one to update it!", errorMessage: error, showLogo: false, renderInAppLayout: true, horizontal: false, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: changePasswordFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 p-0", submitButtonClass: "w-full", submitButtonText: isLoading ? 'Updating...' : submitButtonText, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), showBackHomeButton && (_jsx("div", { className: "flex items-center justify-center mt-4", children: _jsx("button", { type: "button", onClick: onClickBackHome, className: "text-sm text-primary-500 hover:underline dark:text-primary-500", children: backHome }) }))] }) }));
};
export default ChangePasswordPage;