@pagamio/frontend-commons-lib 0.8.306 → 0.8.307
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/auth/components/LoginPage.js +12 -12
- package/lib/styles.css +3 -14
- package/package.json +1 -1
|
@@ -306,27 +306,27 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
|
|
|
306
306
|
const passwordTabLabel = phoneOtpConfig?.passwordTabLabel ??
|
|
307
307
|
phonePinConfig?.passwordTabLabel ??
|
|
308
308
|
usernamePinConfig?.passwordTabLabel ??
|
|
309
|
-
'Email
|
|
310
|
-
const phoneTabLabel = phoneOtpConfig?.tabLabel ?? phonePinConfig?.tabLabel ??
|
|
311
|
-
const usernameTabLabel = usernamePinConfig?.tabLabel ?? 'Login Number
|
|
312
|
-
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
|
|
313
|
-
? 'bg-
|
|
314
|
-
: 'text-
|
|
309
|
+
'Email';
|
|
310
|
+
const phoneTabLabel = phoneOtpConfig?.tabLabel ?? phonePinConfig?.tabLabel ?? 'Phone';
|
|
311
|
+
const usernameTabLabel = usernamePinConfig?.tabLabel ?? 'Login Number';
|
|
312
|
+
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 flex divide-x divide-border overflow-hidden rounded-lg border border-border", role: "tablist", "aria-label": "Login method", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'password', onClick: () => setActiveTab('password'), className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'password'
|
|
313
|
+
? 'bg-primary text-primary-foreground'
|
|
314
|
+
: 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel }), showPhoneTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'phone', onClick: () => {
|
|
315
315
|
setActiveTab('phone');
|
|
316
316
|
setPhoneStep('enterPhone');
|
|
317
317
|
setPhoneOtpValue('');
|
|
318
318
|
setPhonePinValue('');
|
|
319
319
|
setPhoneError(null);
|
|
320
|
-
}, className: `flex-1
|
|
321
|
-
? 'bg-
|
|
322
|
-
: 'text-
|
|
320
|
+
}, className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'phone'
|
|
321
|
+
? 'bg-primary text-primary-foreground'
|
|
322
|
+
: 'bg-background text-foreground/70 hover:bg-muted'}`, children: phoneTabLabel })), showUsernameTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'username', onClick: () => {
|
|
323
323
|
setActiveTab('username');
|
|
324
324
|
setUsernameStep('enterLoginNumber');
|
|
325
325
|
setLoginNumberPinValue('');
|
|
326
326
|
setUsernameError(null);
|
|
327
|
-
}, className: `flex-1
|
|
328
|
-
? 'bg-
|
|
329
|
-
: 'text-
|
|
327
|
+
}, className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'username'
|
|
328
|
+
? 'bg-primary text-primary-foreground'
|
|
329
|
+
: 'bg-background text-foreground/70 hover:bg-muted'}`, 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: {
|
|
330
330
|
...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
|
|
331
331
|
password: '',
|
|
332
332
|
rememberMe: false,
|
package/lib/styles.css
CHANGED
|
@@ -1927,6 +1927,9 @@ video {
|
|
|
1927
1927
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
1928
1928
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
1929
1929
|
}
|
|
1930
|
+
.divide-border > :not([hidden]) ~ :not([hidden]) {
|
|
1931
|
+
border-color: hsl(var(--border));
|
|
1932
|
+
}
|
|
1930
1933
|
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
|
|
1931
1934
|
--tw-divide-opacity: 1;
|
|
1932
1935
|
border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
|
|
@@ -2486,9 +2489,6 @@ video {
|
|
|
2486
2489
|
.bg-muted\/30 {
|
|
2487
2490
|
background-color: hsl(var(--muted) / 0.3);
|
|
2488
2491
|
}
|
|
2489
|
-
.bg-muted\/60 {
|
|
2490
|
-
background-color: hsl(var(--muted) / 0.6);
|
|
2491
|
-
}
|
|
2492
2492
|
.bg-orange-100 {
|
|
2493
2493
|
--tw-bg-opacity: 1;
|
|
2494
2494
|
background-color: rgb(254 236 220 / var(--tw-bg-opacity, 1));
|
|
@@ -3594,11 +3594,6 @@ video {
|
|
|
3594
3594
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
3595
3595
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
3596
3596
|
}
|
|
3597
|
-
.ring-1 {
|
|
3598
|
-
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
3599
|
-
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
3600
|
-
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
3601
|
-
}
|
|
3602
3597
|
.ring-2 {
|
|
3603
3598
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
3604
3599
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
@@ -3614,9 +3609,6 @@ video {
|
|
|
3614
3609
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
3615
3610
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
3616
3611
|
}
|
|
3617
|
-
.ring-border {
|
|
3618
|
-
--tw-ring-color: hsl(var(--border));
|
|
3619
|
-
}
|
|
3620
3612
|
.ring-cyan-400 {
|
|
3621
3613
|
--tw-ring-opacity: 1;
|
|
3622
3614
|
--tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
|
|
@@ -4204,9 +4196,6 @@ video {
|
|
|
4204
4196
|
.hover\:bg-accent:hover {
|
|
4205
4197
|
background-color: hsl(var(--accent));
|
|
4206
4198
|
}
|
|
4207
|
-
.hover\:bg-background\/40:hover {
|
|
4208
|
-
background-color: hsl(var(--background) / 0.4);
|
|
4209
|
-
}
|
|
4210
4199
|
.hover\:bg-blue-200:hover {
|
|
4211
4200
|
--tw-bg-opacity: 1;
|
|
4212
4201
|
background-color: rgb(195 221 253 / var(--tw-bg-opacity, 1));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pagamio/frontend-commons-lib",
|
|
3
3
|
"description": "Pagamio library for Frontend reusable components like the form engine and table container",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.307",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"provenance": false
|