pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
89 lines (88 loc) • 3.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Generic Reset Password Page component that works with different authentication configurations.
* Provides a customizable interface for users to reset their password after receiving a reset token.
*
* @template T - Type extending CustomAuthConfig that defines the shape of authentication data
*
* @example
* ```tsx
* // Usage with Pagamio configuration
* <PagamioResetPasswordPage<PagamioAuthConfig>
* logo={{
* src: "/logo.svg",
* alt: "Company Logo",
* width: 280,
* height: 250
* }}
* token="reset-token-from-url"
* onSuccess={() => {
* // Handle successful password reset
* }}
* />
* ```
*/
import { useRef, useState } from 'react';
import { useToast } from '../../context';
import { FormEngine } from '../../form-engine';
import { useAuth } from '../context';
import { BackToLoginButton, createFormSubmissionHandler, passwordValidation } from './AuthFormUtils';
import { AuthPageLayout } from './AuthPageLayout';
export const resetPasswordDefaultText = {
title: 'Reset Your Password',
subtitle: 'Enter your new password to regain access to your account.',
passwordLabel: 'New Password',
confirmPasswordLabel: 'Confirm New Password',
submitButtonLabel: 'Reset Password',
loadingButtonLabel: 'Resetting...',
backToLoginLabel: 'Back to Login',
successMessage: 'Password has been reset successfully.',
};
/**
* Generic Reset Password Page component
* @template T - Authentication configuration type
*/
export function PagamioResetPasswordPage({ logo, text = resetPasswordDefaultText, appLabel, token, onSuccess, onError, onBackToLogin, className = '', }) {
const { authService } = useAuth();
const { addToast } = useToast();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const formRef = useRef();
const resetPasswordFields = [
{
name: 'password',
label: text.passwordLabel,
type: 'password',
placeholder: 'Enter new password',
gridSpan: 12,
validation: passwordValidation,
},
{
name: 'confirmPassword',
label: text.confirmPasswordLabel,
type: 'password',
placeholder: 'Confirm new password',
gridSpan: 12,
validation: {
required: 'Please confirm your password',
},
},
];
const handleSubmit = createFormSubmissionHandler({
setIsLoading,
setError,
addToast,
formRef,
onSuccess,
onError,
}, async (data) => {
const { password, confirmPassword } = data;
await authService.resetPassword({
token,
newPassword: password,
newPasswordConfirm: confirmPassword,
});
}, text.successMessage, 'Reset password failed. Please try again.');
return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.title, subtitle: text.subtitle, errorMessage: error, logo: logo, className: className, horizontal: false, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: resetPasswordFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 p-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.submitButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), onBackToLogin && _jsx(BackToLoginButton, { onBackToLogin: onBackToLogin, label: text.backToLoginLabel })] }) }));
}
export default PagamioResetPasswordPage;