@pagamio/frontend-commons-lib 0.8.211 → 0.8.212

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

@@ -1,11 +1,17 @@
+import type { Field } from '../../form-engine';
 import type { AuthenticatorType } from '../authenticators';
 import type { AuthResponse, BaseAuthCredentials, CustomAuthConfig } from '../types';
 import type { BaseAuthPageProps } from './AuthFormUtils';
+/**
+ * Login field type - determines whether the login form uses username or email
+ */
+export type LoginFieldType = 'username' | 'email';
 /**
  * Base login credentials interface that can be extended for specific implementations
  */
 interface PagamioLoginCredentials {
-    username: string;
+    username?: string;
+    email?: string;
     password: string;
     rememberMe?: boolean;
 }
@@ -19,6 +25,7 @@ interface PagamioLoginPageProps<T extends CustomAuthConfig> extends BaseAuthPage
         welcomeTitle: string;
         welcomeSubtitle: string;
         usernameLabel: string;
+        emailLabel: string;
         passwordLabel: string;
         rememberMeLabel: string;
         loginButtonLabel: string;
@@ -26,6 +33,16 @@ interface PagamioLoginPageProps<T extends CustomAuthConfig> extends BaseAuthPage
         forgotPasswordLabel: string;
         createAccountLabel: string;
     };
+    /**
+     * Type of login field to display - 'username' or 'email'
+     * Defaults to 'username' for backward compatibility
+     */
+    loginFieldType?: LoginFieldType;
+    /**
+     * Custom login fields to use instead of the default fields
+     * When provided, this will override the default login fields entirely
+     */
+    customLoginFields?: Field[];
     /** Callback handlers */
     onForgotPassword?: () => void;
     onLoginSuccess?: (authResponse?: AuthResponse<T>) => void;
@@ -57,6 +74,7 @@ export declare const loginPageDefaultText: {
     welcomeTitle: string;
     welcomeSubtitle: string;
     usernameLabel: string;
+    emailLabel: string;
     passwordLabel: string;
     rememberMeLabel: string;
     loginButtonLabel: string;
@@ -68,6 +86,6 @@ export declare const loginPageDefaultText: {
  * 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 declare function PagamioLoginPage<T extends CustomAuthConfig>({ logo, text, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, loginFieldType, customLoginFields, className, }: Readonly<PagamioLoginPageProps<T>>): import("react/jsx-runtime").JSX.Element;
 export default PagamioLoginPage;
 export type { PagamioLoginCredentials, PagamioLoginPageProps };

package/lib/auth/components/LoginPage.js

@@ -32,6 +32,7 @@ export const loginPageDefaultText = {
     welcomeTitle: 'Welcome Back!',
     welcomeSubtitle: 'Sign in to your account to continue',
     usernameLabel: 'Username',
+    emailLabel: 'Email',
     passwordLabel: 'Password',
     rememberMeLabel: 'Remember me',
     loginButtonLabel: 'Login',
@@ -43,14 +44,29 @@ export const loginPageDefaultText = {
  * Generic Login Page component
  * @template T - Authentication configuration type
  */
-export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount = false, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, className = '', }) {
+export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount = false, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, loginFieldType = 'username', customLoginFields, className = '', }) {
     const { login, error: authError } = useAuth();
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const formRef = useRef();
-    const loginFields = [
-        {
+    // Generate the identifier field based on loginFieldType
+    const identifierField = loginFieldType === 'email'
+        ? {
+            name: 'email',
+            label: text.emailLabel,
+            type: 'email',
+            placeholder: 'Enter email',
+            gridSpan: 12,
+            validation: {
+                required: 'Email is required',
+                pattern: {
+                    value: /\S+@\S+\.\S+/,
+                    message: 'Please enter a valid email address',
+                },
+            },
+        }
+        : {
             name: 'username',
             label: text.usernameLabel,
             type: 'text',
@@ -60,7 +76,9 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
                 required: 'Username is required',
                 validate: (value) => !/\s/.test(value) || 'Username should not contain spaces',
             },
-        },
+        };
+    const defaultLoginFields = [
+        identifierField,
         {
             name: 'password',
             label: text.passwordLabel,
@@ -78,6 +96,7 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
             gridSpan: 12,
         },
     ];
+    const loginFields = customLoginFields ?? defaultLoginFields;
     const handleSubmit = createFormSubmissionHandler({
         setIsLoading,
         setError,
@@ -95,9 +114,14 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
             credentials = transformLoginData(data);
         }
         else {
-            // Default behavior - extract username and password
-            const { username, password } = data;
-            credentials = { username, password };
+            // Default behavior - extract identifier (username or email) and password based on loginFieldType
+            const { username, email, password } = data;
+            if (loginFieldType === 'email') {
+                credentials = { email: email ?? username, password };
+            }
+            else {
+                credentials = { username: username ?? email, password };
+            }
         }
         // Process the login with the selected authenticator
         return authenticator.processLogin(credentials, data.rememberMe ?? false, login);
@@ -111,7 +135,7 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
         }
     };
     return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: error ?? authError?.message, logo: logo, className: className, horizontal: false, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
-                        username: '',
+                        ...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
                         password: '',
                         rememberMe: false,
                     } }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx("button", { type: "button", onClick: onForgotPassword, className: "text-sm text-primary-500 hover:underline dark:text-primary-500", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-gray-500", children: "|" }), _jsx("button", { type: "button", onClick: handleCreateAccount, className: "text-sm text-primary-500 hover:underline dark:text-primary-500", children: text.createAccountLabel })] }))] })] }) }));

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

@@ -1,5 +1,5 @@
 export { default as LogoutButton } from './LogoutButton';
-export { default as PagamioLoginPage, loginPageDefaultText, type PagamioLoginCredentials, type PagamioLoginPageProps, } from './LoginPage';
+export { default as PagamioLoginPage, loginPageDefaultText, type LoginFieldType, type PagamioLoginCredentials, type PagamioLoginPageProps, } from './LoginPage';
 export { default as ChangePasswordPage, type ChangePasswordPageProps } from './ChangePasswordPage';
 export { type PostDataProps } from './hooks/useChangeUserPassword';
 export { default as PagamioCustomerRegistrationPage, customerRegistrationPageDefaultText, type PagamioCustomerRegistrationPageProps, } from './CustomerRegistrationPage';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.211",
+  "version": "0.8.212",
   "publishConfig": {
     "access": "public",
     "provenance": false