@pagamio/frontend-commons-lib 0.8.304 → 0.8.306

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

@@ -64,6 +64,24 @@ export interface PhonePinLoginConfig {
     /** Optional label for the password tab (default: 'Email & Password') */
     passwordTabLabel?: string;
 }
+/**
+ * Configuration for the username + PIN login tab.
+ * When provided, a "Login Number + PIN" tab is displayed alongside the other
+ * tabs. Login numbers are admin-assigned 10-digit numeric identifiers (there
+ * is no self-service signup for this method).
+ */
+export interface UsernamePinLoginConfig {
+    /** Login with login number and PIN. Should throw on error. */
+    loginWithUsername: (loginNumber: string, pin: string) => Promise<any>;
+    /**
+     * Optional callback called instead of onLoginSuccess when mustChangePIN is true.
+     */
+    onMustChangePIN?: (loginNumber: string, response: any) => void;
+    /** Optional label for the username-PIN tab (default: 'Login Number + PIN') */
+    tabLabel?: string;
+    /** Optional label for the password tab (default: 'Email & Password') */
+    passwordTabLabel?: string;
+}
 /**
  * Base login credentials interface that can be extended for specific implementations
  */
@@ -145,6 +163,11 @@ interface PagamioLoginPageProps<T extends CustomAuthConfig> extends BaseAuthPage
      * The tab handles the 2-step phone PIN flow internally.
      */
     phonePinConfig?: PhonePinLoginConfig;
+    /**
+     * When provided, adds a "Login Number + PIN" tab alongside the standard login
+     * form. The tab handles the 2-step login-number + PIN flow internally.
+     */
+    usernamePinConfig?: UsernamePinLoginConfig;
 }
 export interface LoginErrorProps {
     code: string;
@@ -166,6 +189,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, loginFieldType, customLoginFields, className, features, sideContentClass, footer, phoneOtpConfig, phonePinConfig, }: 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, features, sideContentClass, footer, phoneOtpConfig, phonePinConfig, usernamePinConfig, }: Readonly<PagamioLoginPageProps<T>>): import("react/jsx-runtime").JSX.Element;
 export default PagamioLoginPage;
 export type { PagamioLoginCredentials, PagamioLoginPageProps };

package/lib/auth/components/LoginPage.js

@@ -47,7 +47,7 @@ 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, loginFieldType = 'username', customLoginFields, className = '', features, sideContentClass, footer, phoneOtpConfig, phonePinConfig, }) {
+export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount = false, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, loginFieldType = 'username', customLoginFields, className = '', features, sideContentClass, footer, phoneOtpConfig, phonePinConfig, usernamePinConfig, }) {
     const { login, error: authError } = useAuth();
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
@@ -65,6 +65,11 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
     const [canResendPhone, setCanResendPhone] = useState(true);
     const [phonePinValue, setPhonePinValue] = useState('');
     const [isLoggingInWithPin, setIsLoggingInWithPin] = useState(false);
+    const [usernameStep, setUsernameStep] = useState('enterLoginNumber');
+    const [loginNumber, setLoginNumber] = useState('');
+    const [loginNumberPinValue, setLoginNumberPinValue] = useState('');
+    const [isLoggingInWithUsername, setIsLoggingInWithUsername] = useState(false);
+    const [usernameError, setUsernameError] = useState(null);
     const startCountdown = (seconds) => {
         setPhoneCountdown(seconds);
         setCanResendPhone(false);
@@ -91,6 +96,22 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
             validation: { required: 'Phone number is required' },
         },
     ];
+    const loginNumberField = [
+        {
+            name: 'loginNumber',
+            label: 'Login Number',
+            type: 'text',
+            placeholder: '1230000001',
+            gridSpan: 12,
+            validation: {
+                required: 'Login number is required',
+                pattern: {
+                    value: /^\d{10}$/,
+                    message: 'Login number must be exactly 10 digits',
+                },
+            },
+        },
+    ];
     const handlePhoneFormSubmit = async (data) => {
         const phone = data.phoneNumber;
         if (phonePinConfig) {
@@ -136,6 +157,32 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
             setIsLoggingInWithPin(false);
         }
     };
+    const handleLoginNumberFormSubmit = async (data) => {
+        setLoginNumber(data.loginNumber);
+        setUsernameStep('enterPin');
+    };
+    const handleLoginWithUsername = async () => {
+        if (loginNumberPinValue.length !== 4)
+            return;
+        setIsLoggingInWithUsername(true);
+        setUsernameError(null);
+        try {
+            const response = await usernamePinConfig.loginWithUsername(loginNumber, loginNumberPinValue);
+            const responseData = response?.data ?? response;
+            if (responseData?.mustChangePIN && usernamePinConfig.onMustChangePIN) {
+                usernamePinConfig.onMustChangePIN(loginNumber, response);
+            }
+            else {
+                onLoginSuccess?.(response);
+            }
+        }
+        catch (err) {
+            setUsernameError(err?.response?.data?.message ?? err?.message ?? 'Login failed. Please try again.');
+        }
+        finally {
+            setIsLoggingInWithUsername(false);
+        }
+    };
     const handleResendPhoneOtp = async () => {
         if (!canResendPhone || isResendingOtp)
             return;
@@ -254,15 +301,32 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
         }
     };
     const showPhoneTab = phoneOtpConfig ?? phonePinConfig;
-    const passwordTabLabel = phoneOtpConfig?.passwordTabLabel ?? phonePinConfig?.passwordTabLabel ?? 'Email & Password';
+    const showUsernameTab = usernamePinConfig;
+    const showTabs = showPhoneTab ?? showUsernameTab;
+    const passwordTabLabel = phoneOtpConfig?.passwordTabLabel ??
+        phonePinConfig?.passwordTabLabel ??
+        usernamePinConfig?.passwordTabLabel ??
+        'Email & Password';
     const phoneTabLabel = phoneOtpConfig?.tabLabel ?? phonePinConfig?.tabLabel ?? (phonePinConfig ? 'Phone + PIN' : 'Phone + OTP');
-    return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: activeTab === 'password' ? (error ?? authError?.message) : undefined, logo: logo, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [showPhoneTab && (_jsxs("div", { className: "mb-6 flex rounded-lg border border-border overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => setActiveTab('password'), className: `flex-1 py-2 text-sm font-medium transition-colors ${activeTab === 'password' ? 'bg-primary text-primary-foreground' : 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel }), _jsx("button", { type: "button", onClick: () => {
+    const usernameTabLabel = usernamePinConfig?.tabLabel ?? 'Login Number + PIN';
+    return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: activeTab === 'password' ? (error ?? authError?.message) : undefined, logo: logo, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [showTabs && (_jsxs("div", { className: "mb-6 inline-flex w-full items-center gap-1 rounded-xl bg-muted/60 p-1", role: "tablist", "aria-label": "Login method", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'password', onClick: () => setActiveTab('password'), className: `flex-1 rounded-lg px-3 py-2 text-center text-sm font-medium transition-all ${activeTab === 'password'
+                                ? 'bg-background text-foreground shadow-sm ring-1 ring-border'
+                                : 'text-muted-foreground hover:bg-background/40 hover:text-foreground'}`, children: passwordTabLabel }), showPhoneTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'phone', onClick: () => {
                                 setActiveTab('phone');
                                 setPhoneStep('enterPhone');
                                 setPhoneOtpValue('');
                                 setPhonePinValue('');
                                 setPhoneError(null);
-                            }, className: `flex-1 py-2 text-sm font-medium transition-colors ${activeTab === 'phone' ? 'bg-primary text-primary-foreground' : 'bg-background text-foreground/70 hover:bg-muted'}`, children: phoneTabLabel })] })), activeTab === 'password' && (_jsxs(_Fragment, { 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: {
+                            }, className: `flex-1 rounded-lg px-3 py-2 text-center text-sm font-medium transition-all ${activeTab === 'phone'
+                                ? 'bg-background text-foreground shadow-sm ring-1 ring-border'
+                                : 'text-muted-foreground hover:bg-background/40 hover:text-foreground'}`, children: phoneTabLabel })), showUsernameTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'username', onClick: () => {
+                                setActiveTab('username');
+                                setUsernameStep('enterLoginNumber');
+                                setLoginNumberPinValue('');
+                                setUsernameError(null);
+                            }, className: `flex-1 rounded-lg px-3 py-2 text-center text-sm font-medium transition-all ${activeTab === 'username'
+                                ? 'bg-background text-foreground shadow-sm ring-1 ring-border'
+                                : 'text-muted-foreground hover:bg-background/40 hover:text-foreground'}`, children: usernameTabLabel }))] })), activeTab === 'password' && (_jsxs(_Fragment, { 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: {
                                 ...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
                                 password: '',
                                 rememberMe: false,
@@ -280,6 +344,13 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
                                         setPhoneStep('enterPhone');
                                         setPhonePinValue('');
                                         setPhoneError(null);
-                                    }, className: "w-full text-sm text-foreground/70", children: "\u2190 Change number" })] }))] }))] }) }));
+                                    }, className: "w-full text-sm text-foreground/70", children: "\u2190 Change number" })] }))] })), activeTab === 'username' && showUsernameTab && (_jsxs("div", { className: "space-y-4", children: [usernameError && _jsx("div", { className: "rounded-lg bg-red-50 p-4 text-sm text-red-600", children: usernameError }), usernameStep === 'enterLoginNumber' && (_jsx(FormEngine, { fields: loginNumberField, onSubmit: handleLoginNumberFormSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: "Continue", onCancel: () => { }, showCancelButton: false, showSubmittingText: false, initialValues: { loginNumber: '' } })), usernameStep === 'enterPin' && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter your 4-digit PIN for ", _jsx("span", { className: "font-medium text-foreground", children: loginNumber })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground text-center", children: "PIN" }), _jsx(OtpInput, { length: 4, value: loginNumberPinValue, onChange: (v) => {
+                                                setLoginNumberPinValue(v);
+                                                setUsernameError(null);
+                                            }, disabled: isLoggingInWithUsername })] }), _jsx(Button, { type: "button", onClick: handleLoginWithUsername, disabled: loginNumberPinValue.length !== 4 || isLoggingInWithUsername, className: "w-full", size: "lg", children: isLoggingInWithUsername ? 'Signing in...' : 'Sign In' }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => {
+                                        setUsernameStep('enterLoginNumber');
+                                        setLoginNumberPinValue('');
+                                        setUsernameError(null);
+                                    }, className: "w-full text-sm text-foreground/70", children: "\u2190 Change login number" })] }))] }))] }) }));
 }
 export default PagamioLoginPage;

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

@@ -1,5 +1,5 @@
 export { default as LogoutButton } from './LogoutButton';
-export { default as PagamioLoginPage, loginPageDefaultText, type LoginFieldType, type PagamioLoginCredentials, type PagamioLoginPageProps, type PhoneOtpLoginConfig, type PhonePinLoginConfig, } from './LoginPage';
+export { default as PagamioLoginPage, loginPageDefaultText, type LoginFieldType, type PagamioLoginCredentials, type PagamioLoginPageProps, type PhoneOtpLoginConfig, type PhonePinLoginConfig, type UsernamePinLoginConfig, } 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/styles.css

@@ -2486,6 +2486,9 @@ video {
 .bg-muted\/30 {
   background-color: hsl(var(--muted) / 0.3);
 }
+.bg-muted\/60 {
+  background-color: hsl(var(--muted) / 0.6);
+}
 .bg-orange-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 236 220 / var(--tw-bg-opacity, 1));
@@ -3591,6 +3594,11 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3606,6 +3614,9 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-border {
+  --tw-ring-color: hsl(var(--border));
+}
 .ring-cyan-400 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
@@ -4193,6 +4204,9 @@ video {
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
+.hover\:bg-background\/40:hover {
+  background-color: hsl(var(--background) / 0.4);
+}
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(195 221 253 / var(--tw-bg-opacity, 1));

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.304",
+  "version": "0.8.306",
   "publishConfig": {
     "access": "public",
     "provenance": false