@main12/auth-login 0.1.0 → 0.1.1

package/dist/components/pages/VerifyOtpPage.js

@@ -1,87 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Suspense } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { Button, OtpInput, Spinner } from '../ui/index.js';
-import { useVerifyOtpFlow } from '../../auth/application/hooks/useVerifyOtpFlow.js';
-import { AuthLayout } from '../AuthLayout.js';
-function VerifyOtpContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
-    const searchParams = useSearchParams();
-    const email = searchParams.get('email') || '';
-    const purpose = searchParams.get('purpose') || 'login';
-    const redirectTo = searchParams.get('redirect') || '/';
-    const { otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode } = useVerifyOtpFlow({
-        email,
-        purpose,
-        redirectTo
-    });
-    if (!email) return null;
-    const isPasswordReset = purpose === 'password-reset';
-    return /*#__PURE__*/ _jsx(AuthLayout, {
-        logo: logo,
-        title: isPasswordReset ? 'Reset Password' : 'Check Your Email',
-        subtitle: isPasswordReset ? 'Enter the code to reset your password' : 'We sent a 6-digit code to',
-        poweredBy: poweredBy,
-        cardClassName: cardClassName,
-        backgroundClass: backgroundClass,
-        footer: /*#__PURE__*/ _jsx("a", {
-            href: loginUrl,
-            className: "text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1",
-            children: "← Back to Login"
-        }),
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col items-center gap-4",
-            children: [
-                /*#__PURE__*/ _jsx("p", {
-                    className: "text-gray-700 text-sm font-medium",
-                    children: email
-                }),
-                /*#__PURE__*/ _jsx(OtpInput, {
-                    value: otp,
-                    onValueChange: setOtp,
-                    isDisabled: isLoading,
-                    autoFocus: true
-                }),
-                error && /*#__PURE__*/ _jsx("div", {
-                    className: "w-full 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(Button, {
-                    variant: "primary",
-                    isLoading: isLoading,
-                    isDisabled: otp.length !== 6,
-                    onPress: handleSubmit,
-                    children: "Verify"
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: "text-center",
-                    children: [
-                        /*#__PURE__*/ _jsx("p", {
-                            className: "text-gray-600 text-sm mb-2",
-                            children: "Didn't receive a code?"
-                        }),
-                        /*#__PURE__*/ _jsx("button", {
-                            onClick: handleResendCode,
-                            disabled: isResending || resendCooldown > 0,
-                            className: "text-[#0071e3] font-medium text-sm hover:underline disabled:opacity-50 disabled:cursor-not-allowed",
-                            children: isResending ? 'Sending...' : resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Code'
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pluginConfig } from '../../config.js';
+import VerifyOtpPageTailwind from './VerifyOtpPageTailwind.js';
+import VerifyOtpPageHero from './VerifyOtpPageHero.js';
 export default function VerifyOtpPage(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(VerifyOtpContent, {
-            ...props
-        })
+    return pluginConfig.style === 'hero-ui' ? /*#__PURE__*/ _jsx(VerifyOtpPageHero, {
+        ...props
+    }) : /*#__PURE__*/ _jsx(VerifyOtpPageTailwind, {
+        ...props
     });
 }

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

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

package/dist/components/pages/VerifyOtpPageHero.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Button, InputOtp, Spinner as HSpinner } from '@heroui/react';
+import { Icon } from '@iconify/react';
+import { motion } from 'framer-motion';
+import { useVerifyOtpFlow } from '../../auth/application/hooks/useVerifyOtpFlow.js';
+import { AuthLayout } from '../AuthLayout.js';
+function VerifyOtpHeroContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const searchParams = useSearchParams();
+    const email = searchParams.get('email') || '';
+    const purpose = searchParams.get('purpose') || 'login';
+    const redirectTo = searchParams.get('redirect') || '/';
+    const { otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode } = useVerifyOtpFlow({
+        email,
+        purpose,
+        redirectTo
+    });
+    if (!email) return null;
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: purpose === 'password-reset' ? 'Reset Password' : 'Check Your Email',
+        subtitle: purpose === 'password-reset' ? 'Enter the code to reset your password' : 'We sent a 6-digit code to',
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsxs("a", {
+            href: loginUrl,
+            className: "text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1",
+            children: [
+                /*#__PURE__*/ _jsx(Icon, {
+                    icon: "lucide:arrow-left",
+                    width: 16
+                }),
+                "Back to Login"
+            ]
+        }),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col items-center gap-4",
+            children: [
+                /*#__PURE__*/ _jsx("p", {
+                    className: "text-gray-700 text-sm font-medium",
+                    children: email
+                }),
+                /*#__PURE__*/ _jsx(InputOtp, {
+                    length: 6,
+                    value: otp,
+                    onValueChange: setOtp,
+                    isDisabled: isLoading,
+                    autoFocus: true
+                }),
+                error && /*#__PURE__*/ _jsx(motion.div, {
+                    className: "w-full 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(Button, {
+                    fullWidth: true,
+                    size: "lg",
+                    color: "primary",
+                    isLoading: isLoading,
+                    isDisabled: otp.length !== 6,
+                    onPress: handleSubmit,
+                    className: "h-12 font-semibold",
+                    children: "Verify"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "text-center",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-gray-600 text-sm mb-2",
+                            children: "Didn't receive a code?"
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            onClick: handleResendCode,
+                            disabled: isResending || resendCooldown > 0,
+                            className: "text-primary font-medium text-sm hover:underline disabled:opacity-50",
+                            children: isResending ? 'Sending...' : resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Code'
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export default function VerifyOtpPageHero(props) {
+    return /*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx("div", {
+            className: "min-h-screen flex items-center justify-center",
+            children: /*#__PURE__*/ _jsx(HSpinner, {
+                size: "lg"
+            })
+        }),
+        children: /*#__PURE__*/ _jsx(VerifyOtpHeroContent, {
+            ...props
+        })
+    });
+}

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

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

package/dist/components/pages/VerifyOtpPageTailwind.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Button, OtpInput, Spinner } from '../ui/index.js';
+import { useVerifyOtpFlow } from '../../auth/application/hooks/useVerifyOtpFlow.js';
+import { AuthLayout } from '../AuthLayout.js';
+function VerifyOtpContent({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const searchParams = useSearchParams();
+    const email = searchParams.get('email') || '';
+    const purpose = searchParams.get('purpose') || 'login';
+    const redirectTo = searchParams.get('redirect') || '/';
+    const { otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode } = useVerifyOtpFlow({
+        email,
+        purpose,
+        redirectTo
+    });
+    if (!email) return null;
+    const isPasswordReset = purpose === 'password-reset';
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: isPasswordReset ? 'Reset Password' : 'Check Your Email',
+        subtitle: isPasswordReset ? 'Enter the code to reset your password' : 'We sent a 6-digit code to',
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsx("a", {
+            href: loginUrl,
+            className: "text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1",
+            children: "← Back to Login"
+        }),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col items-center gap-4",
+            children: [
+                /*#__PURE__*/ _jsx("p", {
+                    className: "text-gray-700 text-sm font-medium",
+                    children: email
+                }),
+                /*#__PURE__*/ _jsx(OtpInput, {
+                    value: otp,
+                    onValueChange: setOtp,
+                    isDisabled: isLoading,
+                    autoFocus: true
+                }),
+                error && /*#__PURE__*/ _jsx("div", {
+                    className: "w-full 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(Button, {
+                    variant: "primary",
+                    isLoading: isLoading,
+                    isDisabled: otp.length !== 6,
+                    onPress: handleSubmit,
+                    children: "Verify"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "text-center",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-gray-600 text-sm mb-2",
+                            children: "Didn't receive a code?"
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            onClick: handleResendCode,
+                            disabled: isResending || resendCooldown > 0,
+                            className: "text-[#0071e3] font-medium text-sm hover:underline disabled:opacity-50 disabled:cursor-not-allowed",
+                            children: isResending ? 'Sending...' : resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Code'
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export default function VerifyOtpPage(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(VerifyOtpContent, {
+            ...props
+        })
+    });
+}

package/dist/config.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared plugin configuration — set by the plugin factory at init time,
+ * read by all client components at render time.
+ */
+export type AuthStyle = 'tailwind' | 'hero-ui';
+export declare const pluginConfig: {
+    style: AuthStyle;
+};

package/dist/config.js

@@ -0,0 +1,6 @@
+/**
+ * Shared plugin configuration — set by the plugin factory at init time,
+ * read by all client components at render time.
+ */ export const pluginConfig = {
+    style: 'tailwind'
+};

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import type { Config } from 'payload';
+import { pluginConfig, type AuthStyle } from './config.js';
 export interface AuthLoginPluginOptions {
-    /** Enable/disable the plugin */
     enabled?: boolean;
-    /** Project name used in emails */
     projectName?: string;
-    /** Contact email used in email footers */
     contactEmail?: string;
-    /** Domain for links in emails */
     domain?: string;
+    /** UI style for auth pages: 'tailwind' (default) or 'hero-ui' */
+    style?: AuthStyle;
 }
 export declare const authLoginPlugin: (options?: AuthLoginPluginOptions) => (config: Config) => Config;
+export { pluginConfig };

package/dist/index.js

@@ -1,6 +1,9 @@
 import { authEndpoints } from './endpoints/authEndpoints.js';
+import { pluginConfig } from './config.js';
 export const authLoginPlugin = (options = {})=>(config)=>{
         if (options.enabled === false) return config;
+        // Set global style config — all page components read this at render time
+        pluginConfig.style = options.style || 'tailwind';
         // Register auth API endpoints
         config.endpoints = [
             ...config.endpoints || [],
@@ -10,7 +13,8 @@ export const authLoginPlugin = (options = {})=>(config)=>{
         const incomingOnInit = config.onInit;
         config.onInit = async (payload)=>{
             if (incomingOnInit) await incomingOnInit(payload);
-            payload.logger.info(`[auth-login] Plugin initialized for ${options.projectName || 'project'}`);
+            payload.logger.info(`[auth-login] Initialized (style: ${pluginConfig.style}) for ${options.projectName || 'project'}`);
         };
         return config;
     };
+export { pluginConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@main12/auth-login",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Reusable Payload CMS auth plugin — login, signup, OTP, forgot password, branded emails, Powered by Main12",
   "license": "MIT",
   "type": "module",
@@ -42,6 +42,8 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
+    "@heroui/react": "^2.8.10",
+    "@iconify/react": "^6.0.2",
     "@payloadcms/db-sqlite": "3.82.1",
     "@payloadcms/next": "3.82.1",
     "@payloadcms/richtext-lexical": "3.82.1",
@@ -54,6 +56,7 @@
     "copyfiles": "2.4.1",
     "cross-env": "10.1.0",
     "eslint": "^9.23.0",
+    "framer-motion": "^12.43.0",
     "next": "16.2.7",
     "payload": "3.82.1",
     "react": "19.2.6",
@@ -112,4 +115,4 @@
     ]
   },
   "registry": "https://registry.npmjs.org/"
-}
+}