@main12/auth-login 0.1.0 → 0.1.1

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

@@ -2,4 +2,4 @@ import type { AuthLayoutConfig } from '../AuthLayout.js';
 export interface ForgotPasswordPageProps extends AuthLayoutConfig {
     loginUrl?: string;
 }
-export default function ForgotPasswordPage({ loginUrl, logo, poweredBy, cardClassName, backgroundClass, }: ForgotPasswordPageProps): import("react/jsx-runtime").JSX.Element;
+export default function ForgotPasswordPage(props: ForgotPasswordPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/ForgotPasswordPage.js

@@ -1,45 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Button, Input } from '../ui/index.js';
-import { useForgotPasswordFlow } from '../../auth/application/hooks/useForgotPasswordFlow.js';
-import { AuthLayout } from '../AuthLayout.js';
-export default function ForgotPasswordPage({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
-    const { email, error, isLoading, setEmail, handleSubmit } = useForgotPasswordFlow();
-    return /*#__PURE__*/ _jsx(AuthLayout, {
-        logo: logo,
-        title: "Forgot Password",
-        subtitle: "Enter your email and we'll send you a reset code",
-        poweredBy: poweredBy,
-        cardClassName: cardClassName,
-        backgroundClass: backgroundClass,
-        footer: /*#__PURE__*/ _jsx("a", {
-            href: loginUrl,
-            className: "text-sm text-gray-600 hover:text-gray-900 inline-flex items-center gap-1",
-            children: "← Back to Login"
-        }),
-        children: /*#__PURE__*/ _jsxs("form", {
-            onSubmit: handleSubmit,
-            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 animate-[fadeIn_0.2s_ease-out]",
-                    children: error
-                }),
-                /*#__PURE__*/ _jsx(Input, {
-                    type: "email",
-                    label: "Email",
-                    value: email,
-                    onChange: (e)=>setEmail(e.target.value),
-                    isRequired: true
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    type: "submit",
-                    variant: "primary",
-                    isLoading: isLoading,
-                    children: "Send Reset Code"
-                })
-            ]
-        })
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pluginConfig } from '../../config.js';
+import ForgotPasswordPageTailwind from './ForgotPasswordPageTailwind.js';
+import ForgotPasswordPageHero from './ForgotPasswordPageHero.js';
+export default function ForgotPasswordPage(props) {
+    return pluginConfig.style === 'hero-ui' ? /*#__PURE__*/ _jsx(ForgotPasswordPageHero, {
+        ...props
+    }) : /*#__PURE__*/ _jsx(ForgotPasswordPageTailwind, {
+        ...props
     });
 }

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

@@ -0,0 +1,5 @@
+import type { AuthLayoutConfig } from '../AuthLayout.js';
+export interface ForgotPasswordPageHeroProps extends AuthLayoutConfig {
+    loginUrl?: string;
+}
+export default function ForgotPasswordPageHero({ loginUrl, logo, poweredBy, cardClassName, backgroundClass }: ForgotPasswordPageHeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/ForgotPasswordPageHero.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Input } from '@heroui/react';
+import { Icon } from '@iconify/react';
+import { motion } from 'framer-motion';
+import { useForgotPasswordFlow } from '../../auth/application/hooks/useForgotPasswordFlow.js';
+import { AuthLayout } from '../AuthLayout.js';
+export default function ForgotPasswordPageHero({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const { email, error, isLoading, setEmail, handleSubmit } = useForgotPasswordFlow();
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: "Forgot Password",
+        subtitle: "Enter your email and we'll send you a reset code",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsxs("a", {
+            href: loginUrl,
+            className: "text-sm text-gray-600 hover:text-gray-900 inline-flex items-center gap-1",
+            children: [
+                /*#__PURE__*/ _jsx(Icon, {
+                    icon: "lucide:arrow-left",
+                    width: 16
+                }),
+                "Back to Login"
+            ]
+        }),
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+                error && /*#__PURE__*/ _jsx(motion.div, {
+                    className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
+                    initial: {
+                        opacity: 0
+                    },
+                    animate: {
+                        opacity: 1
+                    },
+                    children: error
+                }),
+                /*#__PURE__*/ _jsx(Input, {
+                    type: "email",
+                    label: "Email",
+                    value: email,
+                    onChange: (e)=>setEmail(e.target.value),
+                    variant: "bordered",
+                    size: "lg",
+                    isRequired: true,
+                    classNames: {
+                        input: 'text-gray-900',
+                        label: 'text-gray-600',
+                        inputWrapper: 'border-gray-300 bg-white'
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    fullWidth: true,
+                    size: "lg",
+                    color: "primary",
+                    isLoading: isLoading,
+                    className: "h-12 font-semibold",
+                    children: "Send Reset Code"
+                })
+            ]
+        })
+    });
+}

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

@@ -0,0 +1,5 @@
+import type { AuthLayoutConfig } from '../AuthLayout.js';
+export interface ForgotPasswordPageProps extends AuthLayoutConfig {
+    loginUrl?: string;
+}
+export default function ForgotPasswordPage({ loginUrl, logo, poweredBy, cardClassName, backgroundClass, }: ForgotPasswordPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/ForgotPasswordPageTailwind.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Input } from '../ui/index.js';
+import { useForgotPasswordFlow } from '../../auth/application/hooks/useForgotPasswordFlow.js';
+import { AuthLayout } from '../AuthLayout.js';
+export default function ForgotPasswordPage({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const { email, error, isLoading, setEmail, handleSubmit } = useForgotPasswordFlow();
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: "Forgot Password",
+        subtitle: "Enter your email and we'll send you a reset code",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsx("a", {
+            href: loginUrl,
+            className: "text-sm text-gray-600 hover:text-gray-900 inline-flex items-center gap-1",
+            children: "← Back to Login"
+        }),
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: handleSubmit,
+            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 animate-[fadeIn_0.2s_ease-out]",
+                    children: error
+                }),
+                /*#__PURE__*/ _jsx(Input, {
+                    type: "email",
+                    label: "Email",
+                    value: email,
+                    onChange: (e)=>setEmail(e.target.value),
+                    isRequired: true
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    variant: "primary",
+                    isLoading: isLoading,
+                    children: "Send Reset Code"
+                })
+            ]
+        })
+    });
+}

package/dist/components/pages/LoginPage.js

@@ -1,222 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { Suspense } from 'react';
-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';
-function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass }) {
-    const searchParams = useSearchParams();
-    const resolvedRedirect = searchParams.get('redirect') || redirectTo;
-    const { step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin } = useLoginFlow({
-        redirectTo: resolvedRedirect,
-        onPasswordLogin
-    });
-    const stepTitle = step === 'otp-prompt' ? 'Verify Identity' : step === 'email' ? 'Welcome Back' : 'Enter Password';
-    const stepSubtitle = step === 'otp-prompt' ? "We need to verify it's you." : step === 'email' ? 'Sign in with your email to continue.' : 'Enter your password to sign in.';
-    return /*#__PURE__*/ _jsxs(AuthLayout, {
-        logo: logo,
-        title: stepTitle,
-        subtitle: stepSubtitle,
-        poweredBy: poweredBy,
-        cardClassName: cardClassName,
-        backgroundClass: backgroundClass,
-        footer: /*#__PURE__*/ _jsxs("p", {
-            className: "text-center text-gray-600 text-sm",
-            children: [
-                "Don't have an account?",
-                ' ',
-                /*#__PURE__*/ _jsx("a", {
-                    href: signupUrl,
-                    className: "text-gray-900 font-medium hover:underline",
-                    children: "Sign up"
-                })
-            ]
-        }),
-        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: "bordered",
-                                size: "lg",
-                                className: "mb-4",
-                                onPress: handleGoogleLogin,
-                                children: [
-                                    /*#__PURE__*/ _jsx("span", {
-                                        className: "text-lg",
-                                        children: "G"
-                                    }),
-                                    " Continue with Google"
-                                ]
-                            }),
-                            /*#__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: "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: "Email",
-                                value: email,
-                                onValueChange: setEmail,
-                                isRequired: true
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                type: "submit",
-                                variant: "primary",
-                                isLoading: isLoading,
-                                children: "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-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: "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__*/ _jsxs("div", {
-                                className: "relative",
-                                children: [
-                                    /*#__PURE__*/ _jsx(Input, {
-                                        type: showPassword ? 'text' : 'password',
-                                        label: "Password",
-                                        value: password,
-                                        onValueChange: setPassword,
-                                        isRequired: true,
-                                        autoFocus: true
-                                    }),
-                                    /*#__PURE__*/ _jsx("button", {
-                                        type: "button",
-                                        onClick: ()=>setShowPassword(!showPassword),
-                                        className: "absolute right-4 top-9 text-gray-400 hover:text-gray-600",
-                                        children: showPassword ? '🙈' : '👁'
-                                    })
-                                ]
-                            }),
-                            /*#__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: "Forgot password?"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                type: "submit",
-                                variant: "primary",
-                                isLoading: isLoading,
-                                children: "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: "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: "We'll send a verification code to this email."
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        variant: "primary",
-                        isLoading: isSendingOtp,
-                        onPress: handleSendOtp,
-                        children: isSendingOtp ? 'Sending...' : 'Send Code'
-                    })
-                ]
-            })
-        ]
-    });
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pluginConfig } from '../../config.js';
+import LoginPageTailwind from './LoginPageTailwind.js';
+import LoginPageHero from './LoginPageHero.js';
 export default function LoginPage(props) {
-    return /*#__PURE__*/ _jsx(Suspense, {
-        fallback: /*#__PURE__*/ _jsx("div", {
-            className: "min-h-screen flex items-center justify-center",
-            children: /*#__PURE__*/ _jsx(Spinner, {
-                size: "lg"
-            })
-        }),
-        children: /*#__PURE__*/ _jsx(LoginContent, {
-            ...props
-        })
+    return pluginConfig.style === 'hero-ui' ? /*#__PURE__*/ _jsx(LoginPageHero, {
+        ...props
+    }) : /*#__PURE__*/ _jsx(LoginPageTailwind, {
+        ...props
     });
 }

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

@@ -0,0 +1,11 @@
+import type { AuthLayoutConfig } from '../AuthLayout.js';
+export interface LoginPageHeroProps extends AuthLayoutConfig {
+    onPasswordLogin: (credentials: {
+        email: string;
+        password: string;
+    }) => Promise<void>;
+    redirectTo?: string;
+    showGoogleOAuth?: boolean;
+    signupUrl?: string;
+}
+export default function LoginPageHero(props: LoginPageHeroProps): import("react/jsx-runtime").JSX.Element;