@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/auth/components/AuthFormUtils.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { PartialToastData } from '../../context/ToastContext';
+import type { FormRef } from '../../form-engine';
+/**
+ * Base props shared across authentication page components
+ */
+export interface BaseAuthPageProps {
+    /** Logo configuration for branding */
+    logo?: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    /** App Label Text */
+    appLabel?: string;
+    /** Styling options */
+    className?: string;
+    cardClassName?: string;
+}
+/**
+ * Common password validation for authentication forms
+ */
+export declare const passwordValidation: {
+    required: string;
+    min: {
+        value: number;
+        message: string;
+    };
+    validate: (value: string) => true | "Password must contain at least one uppercase letter, one lowercase letter, and one number";
+};
+/**
+ * Renders a back to login button
+ */
+export declare const BackToLoginButton: ({ onBackToLogin, label }: {
+    onBackToLogin: () => void;
+    label: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Common form submission handler configuration
+ */
+export interface FormSubmissionConfig {
+    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    setError?: React.Dispatch<React.SetStateAction<string | null>>;
+    addToast: (toast: PartialToastData) => void;
+    formRef: React.MutableRefObject<FormRef | undefined>;
+    onSuccess?: (response?: any) => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * Creates a standardized form submission handler
+ * @param config Form submission configuration
+ * @param submitAction The action to perform during form submission
+ * @param successMessage Message to display on success
+ * @param fallbackErrorMessage Optional fallback error message to display on failure
+ * @returns A form submission handler function
+ */
+export declare const createFormSubmissionHandler: (config: FormSubmissionConfig, submitAction: (data: any) => Promise<any>, successMessage: string, fallbackErrorMessage?: string) => (data: any) => Promise<void>;

package/lib/auth/components/AuthFormUtils.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { detectErrorType } from '../utils/errorDetection';
+/**
+ * Common password validation for authentication forms
+ */
+export const passwordValidation = {
+    required: 'Password is required',
+    min: { value: 8, message: 'Password must be at least 8 characters' },
+    validate: (value) => /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value) ||
+        'Password must contain at least one uppercase letter, one lowercase letter, and one number',
+};
+/**
+ * Renders a back to login button
+ */
+export const BackToLoginButton = ({ onBackToLogin, label }) => (_jsx("div", { className: "flex items-center justify-center mt-4", children: _jsx("button", { type: "button", onClick: onBackToLogin, className: "text-right text-sm text-primary-500 hover:underline dark:text-primary-500", children: label }) }));
+/**
+ * Creates a standardized form submission handler
+ * @param config Form submission configuration
+ * @param submitAction The action to perform during form submission
+ * @param successMessage Message to display on success
+ * @param fallbackErrorMessage Optional fallback error message to display on failure
+ * @returns A form submission handler function
+ */
+export const createFormSubmissionHandler = (config, submitAction, successMessage, fallbackErrorMessage = 'Operation failed') => {
+    const { setIsLoading, setError, addToast, formRef, onSuccess, onError } = config;
+    return async (data) => {
+        setIsLoading(true);
+        setError?.(null);
+        try {
+            const response = await submitAction(data);
+            addToast({ message: successMessage, variant: 'success' });
+            // Reset form using the form ref
+            if (formRef.current) {
+                formRef.current.reset();
+            }
+            onSuccess?.(response);
+        }
+        catch (error) {
+            const errorInfo = detectErrorType(error);
+            const errorMessage = errorInfo.message || fallbackErrorMessage;
+            setError?.(errorMessage);
+            addToast({
+                message: errorMessage,
+                variant: 'error',
+            });
+            onError?.(error instanceof Error ? error : new Error(errorMessage));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+};

package/lib/auth/components/AuthPageLayout.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Reusable authentication page layout component with consistent styling and branding.
+ * Provides a standardized layout for all auth-related pages (login, forgot password, etc.).
+ *
+ * @example
+ * ```tsx
+ * <AuthPageLayout
+ *   title="Forgot Password"
+ *   subtitle="Enter your email to reset your password"
+ *   errorMessage={error}
+ * >
+ *   <form>...</form>
+ * </AuthPageLayout>
+ * ```
+ */
+import type { ReactNode } from 'react';
+interface AuthPageLayoutProps {
+    /** Main title/heading for the page */
+    title: string;
+    /** Subtitle or description text */
+    subtitle: string;
+    appLabel?: string;
+    /** Error message to display (if any) */
+    errorMessage?: string | null;
+    /** Whether to show the logo */
+    showLogo?: boolean;
+    /** Logo configuration */
+    logo?: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+        className?: string;
+    };
+    /** Whether to render within app layout (adjusts height accordingly) */
+    renderInAppLayout?: boolean;
+    /** Custom class names */
+    className?: string;
+    /** Child components */
+    children: ReactNode;
+    /** Whether to use horizontal layout (image on side) */
+    horizontal?: boolean;
+}
+export declare function AuthPageLayout({ title, subtitle, errorMessage, showLogo, logo, renderInAppLayout, className, horizontal, children, appLabel, }: Readonly<AuthPageLayoutProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/auth/components/AuthPageLayout.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AppBanner from './AppBanner';
+import { AuthCard } from './AuthCard';
+export function AuthPageLayout({ title, subtitle, errorMessage, showLogo = true, logo = {
+    src: '/images/login-screen-logo.svg',
+    alt: 'Pagamio Logo',
+    width: 280,
+    height: 250,
+    className: 'mb-[2.5em]',
+}, renderInAppLayout = false, className = '', horizontal = true, children, appLabel, }) {
+    return (_jsxs("div", { className: `-my-4 mx-auto flex w-full max-w-[640px] flex-col items-center justify-center px-4 py-8 sm:px-6 ${renderInAppLayout ? 'h-[calc(100vh-64px)]' : 'min-h-screen md:h-screen'} ${className}`, children: [showLogo && logo && (_jsxs("div", { className: "flex flex-col items-center mb-5", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: logo.width, height: logo.height }), _jsx(AppBanner, { text: appLabel })] })), _jsxs(AuthCard, { className: "p-2 sm:p-3", horizontal: horizontal, children: [_jsxs("div", { children: [_jsx("h2", { "data-testid": "auth-page-title", className: "text-[1.5em] font-bold text-gray-900 dark:text-white sm:text-[1.875em]", children: title }), _jsx("h2", { "data-testid": "auth-page-subtitle", className: "text-[1em] font-medium text-gray-600 dark:text-white sm:text-[1em]", children: subtitle })] }), errorMessage && (_jsx("div", { "data-testid": "login-error-alert", className: "mt-4 rounded border border-red-400 bg-red-100 p-2 text-red-700", children: errorMessage })), children] })] }));
+}

package/lib/auth/components/ChangePasswordPage.d.ts

@@ -0,0 +1,12 @@
+import { type PostDataProps } from './hooks/useChangeUserPassword';
+export interface ChangePasswordPageProps {
+    showBackHomeButton?: boolean;
+    backHome?: string;
+    submitButtonText?: string;
+    onSuccess: () => void;
+    onError: (error: Error) => void;
+    handleUpdatePassword: (data: PostDataProps) => Promise<void>;
+    onClickBackHome: () => void;
+}
+declare const ChangePasswordPage: ({ backHome, submitButtonText, showBackHomeButton, onSuccess, onError, handleUpdatePassword, onClickBackHome, }: ChangePasswordPageProps) => import("react/jsx-runtime").JSX.Element;
+export default ChangePasswordPage;

package/lib/auth/components/ChangePasswordPage.js

@@ -0,0 +1,59 @@
+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;

package/lib/auth/components/CustomerRegistrationPage.d.ts

@@ -0,0 +1,50 @@
+import type { Field } from '../../form-engine';
+import type { AuthResponse, CustomAuthConfig } from '../types';
+import type { BaseAuthPageProps } from './AuthFormUtils';
+/**
+ * Props for the PagamioCustomerRegistrationPage component
+ * @template T - Authentication configuration type
+ */
+interface PagamioCustomerRegistrationPageProps<T extends CustomAuthConfig> extends BaseAuthPageProps {
+    /** Customizable text content */
+    text?: {
+        registerTitle: string;
+        registerSubtitle: string;
+        emailLabel: string;
+        firstNameLabel: string;
+        lastNameLabel: string;
+        phoneLabel: string;
+        passwordLabel: string;
+        confirmPasswordLabel: string;
+        registerButtonLabel: string;
+        loadingButtonLabel: string;
+        backToLoginLabel: string;
+    };
+    customRegistrationFields?: Field[];
+    /** Custom data mapper function to transform form data before sending it to authService.register */
+    mapFormDataToRegistration?: (formData: Record<string, any>) => Record<string, any>;
+    /** Callback handlers */
+    onRegistrationSuccess?: (authResponse?: AuthResponse<T>) => void;
+    onRegistrationError?: (error: Error) => void;
+    onBackToLogin?: () => void;
+}
+export declare const customerRegistrationPageDefaultText: {
+    registerTitle: string;
+    registerSubtitle: string;
+    emailLabel: string;
+    firstNameLabel: string;
+    lastNameLabel: string;
+    phoneLabel: string;
+    passwordLabel: string;
+    confirmPasswordLabel: string;
+    registerButtonLabel: string;
+    loadingButtonLabel: string;
+    backToLoginLabel: string;
+};
+/**
+ * Customer Registration Page component
+ * @template T - Authentication configuration type
+ */
+export declare function PagamioCustomerRegistrationPage<T extends CustomAuthConfig>({ logo, text, customRegistrationFields, mapFormDataToRegistration, appLabel, onRegistrationSuccess, onRegistrationError, onBackToLogin, className, }: Readonly<PagamioCustomerRegistrationPageProps<T>>): import("react/jsx-runtime").JSX.Element;
+export default PagamioCustomerRegistrationPage;
+export type { PagamioCustomerRegistrationPageProps };

package/lib/auth/components/CustomerRegistrationPage.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Generic Registration Page component that works with different authentication configurations.
+ * Provides a customizable customer registration interface with support for different branding and text options.
+ *
+ * @template T - Type extending CustomAuthConfig that defines the shape of authentication data
+ *
+ * @example
+ * ```tsx
+ * // Usage with Events App configuration
+ * <PagamioRegistrationPage<EventsAppAuthConfig>
+ *   logo={{
+ *     src: "/logo.svg",
+ *     alt: "Company Logo",
+ *     width: 280,
+ *     height: 250
+ *   }}
+ *   onRegistrationSuccess={(response) => {
+ *     // Handle successful registration
+ *   }}
+ * />
+ * ```
+ */
+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 customerRegistrationPageDefaultText = {
+    registerTitle: 'Create an Account',
+    registerSubtitle: 'Sign up to get started',
+    emailLabel: 'Email',
+    firstNameLabel: 'First Name',
+    lastNameLabel: 'Last Name',
+    phoneLabel: 'Phone Number',
+    passwordLabel: 'Password',
+    confirmPasswordLabel: 'Confirm Password',
+    registerButtonLabel: 'Register',
+    loadingButtonLabel: 'Registering...',
+    backToLoginLabel: 'Back to Login',
+};
+/**
+ * Customer Registration Page component
+ * @template T - Authentication configuration type
+ */
+export function PagamioCustomerRegistrationPage({ logo, text = customerRegistrationPageDefaultText, customRegistrationFields, mapFormDataToRegistration, appLabel, onRegistrationSuccess, onRegistrationError, onBackToLogin, className = '', }) {
+    const { authService, error } = useAuth();
+    const { addToast } = useToast();
+    const [isLoading, setIsLoading] = useState(false);
+    const formRef = useRef();
+    const registrationFields = [
+        {
+            name: 'email',
+            label: text.emailLabel,
+            type: 'email',
+            placeholder: 'name@company.com',
+            gridSpan: 12,
+            validation: {
+                required: 'Email is required',
+                pattern: {
+                    value: /\S+@\S+\.\S+/,
+                    message: 'Invalid email address',
+                },
+            },
+        },
+        {
+            name: 'firstName',
+            label: text.firstNameLabel,
+            type: 'text',
+            placeholder: 'John',
+            gridSpan: 6,
+            validation: {
+                required: 'First name is required',
+            },
+        },
+        {
+            name: 'lastName',
+            label: text.lastNameLabel,
+            type: 'text',
+            placeholder: 'Doe',
+            gridSpan: 6,
+            validation: {
+                required: 'Last name is required',
+            },
+        },
+        {
+            name: 'phone',
+            label: text.phoneLabel,
+            type: 'tel',
+            placeholder: '+27 71 234 5678',
+            gridSpan: 12,
+            defaultCountry: 'ZA',
+        },
+        {
+            name: 'password',
+            label: text.passwordLabel,
+            type: 'password',
+            placeholder: 'Enter Password',
+            gridSpan: 12,
+            validation: passwordValidation,
+        },
+        {
+            name: 'confirmPassword',
+            label: text.confirmPasswordLabel,
+            type: 'password',
+            placeholder: 'Confirm Password',
+            gridSpan: 12,
+            validation: {
+                required: 'Please confirm your password',
+            },
+        },
+    ];
+    const handleSubmit = createFormSubmissionHandler({
+        setIsLoading,
+        addToast,
+        formRef,
+        onSuccess: (response) => onRegistrationSuccess?.(response),
+        onError: onRegistrationError,
+    }, async (data) => {
+        // If custom mapper is provided, use it to transform the form data
+        const registrationData = mapFormDataToRegistration ? mapFormDataToRegistration(data) : data;
+        // For backward compatibility, extract specific fields if no custom mapper is provided
+        if (!mapFormDataToRegistration) {
+            const { email, firstName, lastName, phone, password } = data;
+            return authService.register({
+                email,
+                password,
+                firstName,
+                lastName,
+                phoneNumber: phone ?? '',
+            });
+        }
+        console.log('Registration data:', registrationData);
+        // Use the transformed data directly when custom mapper is provided
+        return authService.register(registrationData);
+    }, 'Registration successful', 'Registration failed. Please try again.');
+    return (_jsx(AuthPageLayout, { title: text.registerTitle, subtitle: text.registerSubtitle, errorMessage: error?.message, logo: logo, appLabel: appLabel, className: className, horizontal: false, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: customRegistrationFields ?? registrationFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 p-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.registerButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), onBackToLogin && _jsx(BackToLoginButton, { onBackToLogin: onBackToLogin, label: text.backToLoginLabel })] }) }));
+}
+export default PagamioCustomerRegistrationPage;

package/lib/auth/components/ForgotPasswordPage.d.ts

@@ -0,0 +1,38 @@
+import type { CustomAuthConfig } from '../types';
+import type { BaseAuthPageProps } from './AuthFormUtils';
+/**
+ * Props for the PagamioForgotPasswordPage component
+ * @template T - Authentication configuration type
+ */
+interface PagamioForgotPasswordPageProps<T extends CustomAuthConfig> extends BaseAuthPageProps {
+    /** Customizable text content */
+    text?: {
+        title: string;
+        subtitle: string;
+        emailLabel: string;
+        submitButtonLabel: string;
+        loadingButtonLabel: string;
+        backToLoginLabel: string;
+        successMessage: string;
+    };
+    /** Callback handlers */
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    onBackToLogin?: () => void;
+}
+export declare const forgotPasswordDefaultText: {
+    title: string;
+    subtitle: string;
+    emailLabel: string;
+    submitButtonLabel: string;
+    loadingButtonLabel: string;
+    backToLoginLabel: string;
+    successMessage: string;
+};
+/**
+ * Generic Forgot Password Page component
+ * @template T - Authentication configuration type
+ */
+export declare function PagamioForgotPasswordPage<T extends CustomAuthConfig>({ logo, text, appLabel, onSuccess, onError, onBackToLogin, className, }: Readonly<PagamioForgotPasswordPageProps<T>>): import("react/jsx-runtime").JSX.Element;
+export default PagamioForgotPasswordPage;
+export type { PagamioForgotPasswordPageProps };

package/lib/auth/components/ForgotPasswordPage.js

@@ -0,0 +1,76 @@
+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;

package/lib/auth/components/LoginPage.d.ts

@@ -0,0 +1,73 @@
+import type { AuthenticatorType } from '../authenticators';
+import type { AuthResponse, BaseAuthCredentials, CustomAuthConfig } from '../types';
+import type { BaseAuthPageProps } from './AuthFormUtils';
+/**
+ * Base login credentials interface that can be extended for specific implementations
+ */
+interface PagamioLoginCredentials {
+    username: string;
+    password: string;
+    rememberMe?: boolean;
+}
+/**
+ * Props for the PagamioLoginPage component
+ * @template T - Authentication configuration type
+ */
+interface PagamioLoginPageProps<T extends CustomAuthConfig> extends BaseAuthPageProps {
+    /** Customizable text content */
+    text?: {
+        welcomeTitle: string;
+        welcomeSubtitle: string;
+        usernameLabel: string;
+        passwordLabel: string;
+        rememberMeLabel: string;
+        loginButtonLabel: string;
+        loadingButtonLabel: string;
+        forgotPasswordLabel: string;
+        createAccountLabel: string;
+    };
+    /** Callback handlers */
+    onForgotPassword?: () => void;
+    onLoginSuccess?: (authResponse?: AuthResponse<T>) => void;
+    onLoginError?: (error: Error) => void;
+    /** Account creation options */
+    hasCreateAccount?: boolean;
+    createAccountRoute?: string;
+    onCreateAccount?: () => void;
+    /**
+     * Custom data transformation handler for login data
+     * Should return object to be used as login credentials
+     * @template TFormData - Type of the form data
+     */
+    transformLoginData?: (credentials: BaseAuthCredentials) => Record<string, unknown>;
+    /** Styling options */
+    className?: string;
+    cardClassName?: string;
+    /**
+     * Authenticator type to use for login
+     * Supports 'default', 'strapi', or any custom registered type
+     */
+    authenticatorType?: AuthenticatorType | string;
+}
+export interface LoginErrorProps {
+    code: string;
+    message: string;
+}
+export declare const loginPageDefaultText: {
+    welcomeTitle: string;
+    welcomeSubtitle: string;
+    usernameLabel: string;
+    passwordLabel: string;
+    rememberMeLabel: string;
+    loginButtonLabel: string;
+    loadingButtonLabel: string;
+    forgotPasswordLabel: string;
+    createAccountLabel: string;
+};
+/**
+ * Generic Login Page component
+ * @template T - Authentication configuration type
+ */
+export declare function PagamioLoginPage<T extends CustomAuthConfig>({ logo, text, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, className, }: Readonly<PagamioLoginPageProps<T>>): import("react/jsx-runtime").JSX.Element;
+export default PagamioLoginPage;
+export type { PagamioLoginCredentials, PagamioLoginPageProps };