@main12/auth-login 0.4.2 → 1.0.1

package/dist/components/pages/LoginPageTailwind.js

@@ -5,8 +5,9 @@ import { useSearchParams } from 'next/navigation';
 import { Button, Input, Divider, Spinner } from '../ui/index.js';
 import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
+import { AuthCard } from '../AuthCard.js';
 import { getUiTranslations } from '../ui/translations.js';
-function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
+function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, backgroundClass, locale, messages }) {
     const searchParams = useSearchParams();
     const resolvedRedirect = searchParams.get('redirect') || redirectTo;
     const t = getUiTranslations(locale, messages).login;
@@ -16,207 +17,212 @@ function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = tru
     });
     const stepTitle = step === 'otp-prompt' ? t.otpPromptTitle : step === 'email' ? t.title : t.passwordStepTitle;
     const stepSubtitle = step === 'otp-prompt' ? t.otpPromptSubtitle : step === 'email' ? t.subtitle : t.passwordStepSubtitle;
-    return /*#__PURE__*/ _jsxs(AuthLayout, {
-        logo: logo,
-        title: stepTitle,
-        subtitle: stepSubtitle,
-        poweredBy: poweredBy,
-        cardClassName: cardClassName,
+    return /*#__PURE__*/ _jsx(AuthLayout, {
         backgroundClass: backgroundClass,
-        footer: signupUrl ? /*#__PURE__*/ _jsxs("p", {
-            className: "text-center text-gray-600 text-sm",
-            children: [
-                t.noAccount,
-                ' ',
-                /*#__PURE__*/ _jsx("a", {
-                    href: signupUrl,
-                    className: "text-gray-900 font-medium hover:underline",
-                    children: t.signUpLink
-                })
-            ]
-        }) : undefined,
-        children: [
-            step === 'email' && /*#__PURE__*/ _jsxs("div", {
-                className: "animate-[fadeIn_0.3s_ease-out]",
+        children: /*#__PURE__*/ _jsxs(AuthCard, {
+            logo: logo,
+            title: stepTitle,
+            subtitle: stepSubtitle,
+            poweredBy: poweredBy,
+            cardClassName: cardClassName,
+            removeBorder: removeBorder,
+            removeShadow: removeShadow,
+            mobileVariant: mobileVariant,
+            footer: signupUrl ? /*#__PURE__*/ _jsxs("p", {
+                className: "text-center text-gray-600 text-sm",
                 children: [
-                    showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsxs(Button, {
-                                fullWidth: true,
-                                variant: "secondary",
-                                size: "lg",
-                                className: "mb-4",
-                                onPress: handleGoogleLogin,
-                                children: [
-                                    /*#__PURE__*/ _jsxs("svg", {
-                                        width: "20",
-                                        height: "20",
-                                        viewBox: "0 0 48 48",
-                                        children: [
-                                            /*#__PURE__*/ _jsx("path", {
-                                                fill: "#EA4335",
-                                                d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-                                            }),
-                                            /*#__PURE__*/ _jsx("path", {
-                                                fill: "#4285F4",
-                                                d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-                                            }),
-                                            /*#__PURE__*/ _jsx("path", {
-                                                fill: "#FBBC05",
-                                                d: "M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.01 24.01 0 0 0 0 21.56l7.98-6.19z"
-                                            }),
-                                            /*#__PURE__*/ _jsx("path", {
-                                                fill: "#34A853",
-                                                d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-                                            })
-                                        ]
-                                    }),
-                                    t.continueWithGoogle
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "flex items-center gap-4 my-4",
-                                children: [
-                                    /*#__PURE__*/ _jsx(Divider, {
-                                        className: "flex-1"
-                                    }),
-                                    /*#__PURE__*/ _jsx("span", {
-                                        className: "text-gray-500 text-sm",
-                                        children: t.or
-                                    }),
-                                    /*#__PURE__*/ _jsx(Divider, {
-                                        className: "flex-1"
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("form", {
-                        onSubmit: handleEmailSubmit,
-                        className: "space-y-4",
-                        children: [
-                            error && /*#__PURE__*/ _jsx("div", {
-                                className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
-                                children: error
-                            }),
-                            /*#__PURE__*/ _jsx(Input, {
-                                type: "email",
-                                label: t.emailLabel,
-                                value: email,
-                                onValueChange: setEmail,
-                                isRequired: true,
-                                variant: "secondary"
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                type: "submit",
-                                variant: "primary",
-                                isLoading: isLoading,
-                                children: t.continue
-                            })
-                        ]
+                    t.noAccount,
+                    ' ',
+                    /*#__PURE__*/ _jsx("a", {
+                        href: signupUrl,
+                        className: "text-gray-900 font-medium hover:underline",
+                        children: t.signUpLink
                     })
                 ]
-            }),
-            step === 'password' && /*#__PURE__*/ _jsxs("div", {
-                className: "animate-[fadeIn_0.3s_ease-out]",
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "text-gray-900 text-sm",
-                                children: email
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: handleEditEmail,
-                                className: "text-gray-600 text-sm font-medium hover:text-gray-900",
-                                children: t.edit
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("form", {
-                        onSubmit: handlePasswordSubmit,
-                        className: "space-y-4",
-                        children: [
-                            error && /*#__PURE__*/ _jsx("div", {
-                                className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
-                                children: error
-                            }),
-                            /*#__PURE__*/ _jsx(Input, {
-                                type: showPassword ? 'text' : 'password',
-                                label: t.passwordLabel,
-                                value: password,
-                                onValueChange: setPassword,
-                                isRequired: true,
-                                autoFocus: true,
-                                variant: "secondary"
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                className: "text-left",
-                                children: /*#__PURE__*/ _jsx("a", {
-                                    href: "/forgot-password",
-                                    className: "text-sm text-gray-700 hover:text-gray-900 hover:underline",
-                                    children: t.forgotPassword
+            }) : undefined,
+            children: [
+                step === 'email' && /*#__PURE__*/ _jsxs("div", {
+                    className: "animate-[fadeIn_0.3s_ease-out]",
+                    children: [
+                        showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsxs(Button, {
+                                    fullWidth: true,
+                                    variant: "secondary",
+                                    size: "lg",
+                                    className: "mb-4",
+                                    onPress: handleGoogleLogin,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("svg", {
+                                            width: "20",
+                                            height: "20",
+                                            viewBox: "0 0 48 48",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("path", {
+                                                    fill: "#EA4335",
+                                                    d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+                                                }),
+                                                /*#__PURE__*/ _jsx("path", {
+                                                    fill: "#4285F4",
+                                                    d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+                                                }),
+                                                /*#__PURE__*/ _jsx("path", {
+                                                    fill: "#FBBC05",
+                                                    d: "M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.01 24.01 0 0 0 0 21.56l7.98-6.19z"
+                                                }),
+                                                /*#__PURE__*/ _jsx("path", {
+                                                    fill: "#34A853",
+                                                    d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+                                                })
+                                            ]
+                                        }),
+                                        t.continueWithGoogle
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex items-center gap-4 my-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Divider, {
+                                            className: "flex-1"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-gray-500 text-sm",
+                                            children: t.or
+                                        }),
+                                        /*#__PURE__*/ _jsx(Divider, {
+                                            className: "flex-1"
+                                        })
+                                    ]
                                 })
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                type: "submit",
-                                variant: "primary",
-                                isLoading: isLoading,
-                                children: t.continue
-                            })
-                        ]
-                    })
-                ]
-            }),
-            step === 'otp-prompt' && /*#__PURE__*/ _jsxs("div", {
-                className: "animate-[fadeIn_0.3s_ease-out]",
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "text-gray-900 text-sm",
-                                children: email
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: handleEditEmail,
-                                className: "text-gray-600 text-sm font-medium hover:text-gray-900",
-                                children: t.edit
-                            })
-                        ]
-                    }),
-                    error && /*#__PURE__*/ _jsx("div", {
-                        className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm mb-4",
-                        children: error
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4",
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            className: "flex gap-3",
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("form", {
+                            onSubmit: handleEmailSubmit,
+                            className: "space-y-4",
+                            children: [
+                                error && /*#__PURE__*/ _jsx("div", {
+                                    className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
+                                    children: error
+                                }),
+                                /*#__PURE__*/ _jsx(Input, {
+                                    type: "email",
+                                    label: t.emailLabel,
+                                    value: email,
+                                    onValueChange: setEmail,
+                                    isRequired: true,
+                                    variant: "secondary"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    variant: "primary",
+                                    isLoading: isLoading,
+                                    children: t.continue
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                step === 'password' && /*#__PURE__*/ _jsxs("div", {
+                    className: "animate-[fadeIn_0.3s_ease-out]",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
                             children: [
                                 /*#__PURE__*/ _jsx("span", {
-                                    className: "text-blue-500 text-lg",
-                                    children: "✉"
+                                    className: "text-gray-900 text-sm",
+                                    children: email
+                                }),
+                                /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: handleEditEmail,
+                                    className: "text-gray-600 text-sm font-medium hover:text-gray-900",
+                                    children: t.edit
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("form", {
+                            onSubmit: handlePasswordSubmit,
+                            className: "space-y-4",
+                            children: [
+                                error && /*#__PURE__*/ _jsx("div", {
+                                    className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
+                                    children: error
                                 }),
-                                /*#__PURE__*/ _jsx("p", {
-                                    className: "text-sm text-blue-700",
-                                    children: t.verificationNotice
+                                /*#__PURE__*/ _jsx(Input, {
+                                    type: showPassword ? 'text' : 'password',
+                                    label: t.passwordLabel,
+                                    value: password,
+                                    onValueChange: setPassword,
+                                    isRequired: true,
+                                    autoFocus: true,
+                                    variant: "secondary"
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "text-left",
+                                    children: /*#__PURE__*/ _jsx("a", {
+                                        href: "/forgot-password",
+                                        className: "text-sm text-gray-700 hover:text-gray-900 hover:underline",
+                                        children: t.forgotPassword
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    variant: "primary",
+                                    isLoading: isLoading,
+                                    children: t.continue
                                 })
                             ]
                         })
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        variant: "primary",
-                        isLoading: isSendingOtp,
-                        onPress: handleSendOtp,
-                        children: isSendingOtp ? t.sendingCode : t.sendCode
-                    })
-                ]
-            })
-        ]
+                    ]
+                }),
+                step === 'otp-prompt' && /*#__PURE__*/ _jsxs("div", {
+                    className: "animate-[fadeIn_0.3s_ease-out]",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "text-gray-900 text-sm",
+                                    children: email
+                                }),
+                                /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: handleEditEmail,
+                                    className: "text-gray-600 text-sm font-medium hover:text-gray-900",
+                                    children: t.edit
+                                })
+                            ]
+                        }),
+                        error && /*#__PURE__*/ _jsx("div", {
+                            className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm mb-4",
+                            children: error
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-3",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-blue-500 text-lg",
+                                        children: "✉"
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: "text-sm text-blue-700",
+                                        children: t.verificationNotice
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "primary",
+                            isLoading: isSendingOtp,
+                            onPress: handleSendOtp,
+                            children: isSendingOtp ? t.sendingCode : t.sendCode
+                        })
+                    ]
+                })
+            ]
+        })
     });
 }
 export default function LoginPage(props) {

package/dist/components/pages/SetPasswordPage.d.ts

@@ -1,5 +1,6 @@
 import type { AuthLayoutConfig } from '../AuthLayout';
-export interface SetPasswordPageProps extends AuthLayoutConfig {
+import type { AuthCardConfig } from '../AuthCard';
+export interface SetPasswordPageProps extends AuthLayoutConfig, AuthCardConfig {
     redirectTo?: string;
 }
 export default function SetPasswordPage(props: SetPasswordPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/SetPasswordPageHero.d.ts

@@ -1,5 +1,6 @@
 import type { AuthLayoutConfig } from '../AuthLayout';
-export interface SetPasswordPageHeroProps extends AuthLayoutConfig {
+import type { AuthCardConfig } from '../AuthCard';
+export interface SetPasswordPageHeroProps extends AuthLayoutConfig, AuthCardConfig {
     redirectTo?: string;
 }
-export default function SetPasswordPageHero({ redirectTo, logo, poweredBy, cardClassName, backgroundClass, locale, messages }: SetPasswordPageHeroProps): import("react/jsx-runtime").JSX.Element;
+export default function SetPasswordPageHero({ redirectTo, logo, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, backgroundClass, locale, messages }: SetPasswordPageHeroProps): import("react/jsx-runtime").JSX.Element;