@pagamio/frontend-commons-lib/lib/auth/components/ForgotPasswordPage.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";
/**
 * Generic Forgot Password Page component that works with different authentication configurations.
 * Provides a customizable interface for password reset requests.
 *
 * @template T - Type extending CustomAuthConfig that defines the shape of authentication data
 *
 * @example
 * ```tsx
 * // Usage with Pagamio configuration
 * <PagamioForgotPasswordPage<PagamioAuthConfig>
 *   logo={{
 *     src: "/logo.svg",
 *     alt: "Company Logo",
 *     width: 280,
 *     height: 250
 *   }}
 *   onSuccess={() => {
 *     // Handle successful password reset request
 *   }}
 * />
 * ```
 */
import { useRef, useState } from 'react';
import { useToast } from '../../context';
import { FormEngine } from '../../form-engine';
import { useAuth } from '../context';
import { BackToLoginButton, createFormSubmissionHandler } from './AuthFormUtils';
import { AuthPageLayout } from './AuthPageLayout';
export const forgotPasswordDefaultText = {
    title: 'Forgot your password?',
    subtitle: "Enter your email and we'll send you instructions to reset your password.",
    emailLabel: 'Your Email',
    submitButtonLabel: 'Send Reset Instructions',
    loadingButtonLabel: 'Submitting...',
    backToLoginLabel: 'Back to Login',
    successMessage: 'If an account with that email exists, a password reset link has been sent.',
};
/**
 * Generic Forgot Password Page component
 * @template T - Authentication configuration type
 */
export function PagamioForgotPasswordPage({ logo, text = forgotPasswordDefaultText, appLabel, onSuccess, onError, onBackToLogin, className = '', }) {
    const { authService } = useAuth();
    const { addToast } = useToast();
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const formRef = useRef();
    const emailField = [
        {
            name: 'email',
            label: text.emailLabel,
            type: 'email',
            placeholder: 'name@example.com',
            validation: {
                required: 'Email is required',
                pattern: {
                    value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                    message: 'Please enter a valid email address',
                },
            },
        },
    ];
    const handleSubmit = createFormSubmissionHandler({
        setIsLoading,
        setError,
        addToast,
        formRef,
        onSuccess,
        onError,
    }, async (data) => {
        await authService.forgotPassword({ email: data.email });
    }, text.successMessage, 'Failed to send password reset instructions');
    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: emailField, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 p-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.submitButtonLabel, onCancel: () => { }, showSubmittingText: false, showCancelButton: false, formRef: formRef }), onBackToLogin && _jsx(BackToLoginButton, { onBackToLogin: onBackToLogin, label: text.backToLoginLabel })] }) }));
}
export default PagamioForgotPasswordPage;