@pagamio/frontend-commons-lib 0.8.211 → 0.8.213

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/lib/components/layout/Sidebar.js

@@ -13,7 +13,7 @@ const AppSidebarMenu = () => {
     // Default behavior all items in one ItemGroup
     return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
 };
-const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown }) => {
+const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown, collapsible = true, showSeparator = false, }) => {
     const { pathname, linkComponent: Link } = useAppSidebarContext();
     const { t } = useTranslation();
     // Check if current path matches this item or any of its descendants
@@ -38,6 +38,17 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
         return (_jsx(Sidebar.Item, { as: Link, href: singleItem.href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === singleItem.href &&
                 'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
     }
+    // Handle non-collapsible sections - render as section header with always-visible links
+    if (items?.length && collapsible === false) {
+        return (_jsxs("div", { className: "space-y-1", children: [showSeparator && _jsx("hr", { className: "my-3 border-t border-gray-200 dark:border-gray-700" }), _jsxs("div", { className: twMerge('flex items-center gap-3 px-3 py-2 text-sm font-semibold uppercase tracking-wider', 'text-gray-500 dark:text-gray-400'), children: [icon && React.createElement(icon, { className: 'h-5 w-5' }), _jsx("span", { children: t(label) })] }), _jsx("div", { className: "space-y-1 pl-2", children: items.map((child) => (_jsx(React.Fragment, { children: child.items?.length ? (
+                        // Recursively render nested items
+                        _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...child }) })) : child.href ? (
+                        // Render leaf item with link
+                        _jsx(Sidebar.Item, { as: Link, href: child.href, target: child.target, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === child.href &&
+                                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(child.label) })) : (
+                        // Render leaf item without link
+                        _jsx(Sidebar.Item, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(child.label) })) }, child.label))) })] }));
+    }
     if (items?.length) {
         const isOpen = isParentActive || hasActiveChild(items);
         return (_jsx(Sidebar.Collapse, { icon: icon, label: t(label), open: isOpen, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 

package/lib/context/SidebarContext.d.ts

@@ -9,6 +9,16 @@ interface AppSidebarPageItem {
     badge?: string;
     roles?: string[];
     forceDropdown?: boolean;
+    /**
+     * When false, the section will not be collapsible - it will display as a
+     * section header with always-visible links below it. Defaults to true.
+     */
+    collapsible?: boolean;
+    /**
+     * When true, displays a horizontal separator line above the section.
+     * Useful for visually separating non-collapsible sections. Defaults to false.
+     */
+    showSeparator?: boolean;
 }
 /**
  * Props for the AppSidebarContext

package/lib/styles.css

@@ -978,6 +978,9 @@ input[type="range"]::-ms-fill-lower {
 .pointer-events-none {
   pointer-events: none;
 }
+.visible {
+  visibility: visible;
+}
 .invisible {
   visibility: hidden;
 }
@@ -1237,6 +1240,10 @@ input[type="range"]::-ms-fill-lower {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;

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.213",
   "publishConfig": {
     "access": "public",
     "provenance": false