@main12/auth-login 0.1.0 → 0.1.1

package/dist/components/pages/SetPasswordPageHero.js

@@ -0,0 +1,93 @@
+'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 { useSetPasswordFlow } from '../../auth/application/hooks/useSetPasswordFlow.js';
+import { AuthLayout } from '../AuthLayout.js';
+export default function SetPasswordPageHero({ redirectTo = '/', logo, poweredBy, cardClassName, backgroundClass }) {
+    const { password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit } = useSetPasswordFlow({
+        redirectTo
+    });
+    const bars = Array.from({
+        length: 5
+    }, (_, i)=>i < strength.score);
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: "Set Your Password",
+        subtitle: "Create a secure password for your account",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        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: showPassword ? 'text' : 'password',
+                    label: "New Password",
+                    value: password,
+                    onValueChange: setPassword,
+                    variant: "bordered",
+                    size: "lg",
+                    isRequired: true,
+                    autoFocus: true,
+                    classNames: {
+                        input: 'text-gray-900',
+                        label: 'text-gray-600',
+                        inputWrapper: 'border-gray-300 bg-white'
+                    },
+                    endContent: /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>setShowPassword(!showPassword),
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            icon: showPassword ? 'lucide:eye-off' : 'lucide:eye',
+                            className: "text-gray-400",
+                            width: 20
+                        })
+                    })
+                }),
+                password.length > 0 && /*#__PURE__*/ _jsx("div", {
+                    className: "flex gap-1",
+                    children: bars.map((a, i)=>/*#__PURE__*/ _jsx("div", {
+                            className: `h-1 flex-1 rounded-full ${a ? 'bg-[#D5E855]' : 'bg-gray-200'}`
+                        }, i))
+                }),
+                /*#__PURE__*/ _jsx(Input, {
+                    type: showPassword ? 'text' : 'password',
+                    label: "Confirm Password",
+                    value: confirmPassword,
+                    onValueChange: setConfirmPassword,
+                    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: "Set Password"
+                })
+            ]
+        })
+    });
+}

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

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

package/dist/components/pages/SetPasswordPageTailwind.js

@@ -0,0 +1,74 @@
+'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 { useSetPasswordFlow } from '../../auth/application/hooks/useSetPasswordFlow.js';
+import { AuthLayout } from '../AuthLayout.js';
+export default function SetPasswordPage({ redirectTo = '/', logo, poweredBy, cardClassName, backgroundClass }) {
+    const { password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit } = useSetPasswordFlow({
+        redirectTo
+    });
+    const strengthBars = Array.from({
+        length: 5
+    }, (_, i)=>i < strength.score);
+    return /*#__PURE__*/ _jsx(AuthLayout, {
+        logo: logo,
+        title: "Set Your Password",
+        subtitle: "Create a secure password for your account",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        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__*/ _jsxs("div", {
+                    className: "relative",
+                    children: [
+                        /*#__PURE__*/ _jsx(Input, {
+                            type: showPassword ? 'text' : 'password',
+                            label: "New 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 ? '🙈' : '👁'
+                        })
+                    ]
+                }),
+                password.length > 0 && /*#__PURE__*/ _jsx("div", {
+                    className: "flex gap-1",
+                    children: strengthBars.map((active, i)=>/*#__PURE__*/ _jsx("div", {
+                            className: `h-1 flex-1 rounded-full ${active ? 'bg-[#D5E855]' : 'bg-gray-200'}`
+                        }, i))
+                }),
+                password.length > 0 && !strength.isValid && /*#__PURE__*/ _jsx("p", {
+                    className: "text-xs text-gray-500",
+                    children: "At least 8 chars with 3 of: uppercase, lowercase, number, special character"
+                }),
+                /*#__PURE__*/ _jsx(Input, {
+                    type: showPassword ? 'text' : 'password',
+                    label: "Confirm Password",
+                    value: confirmPassword,
+                    onValueChange: setConfirmPassword,
+                    isRequired: true
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    variant: "primary",
+                    isLoading: isLoading,
+                    children: "Set Password"
+                })
+            ]
+        })
+    });
+}

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

@@ -7,4 +7,4 @@ export interface SignupPageProps extends AuthLayoutConfig {
     showGoogleOAuth?: boolean;
     loginUrl?: string;
 }
-export default function SignupPage({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass, }: SignupPageProps): import("react/jsx-runtime").JSX.Element;
+export default function SignupPage(props: SignupPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/SignupPage.js

@@ -1,129 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import { Button, Input, Divider } from '../ui/index.js';
-import { AuthLayout } from '../AuthLayout.js';
-export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
-    const [name, setName] = React.useState('');
-    const [email, setEmail] = React.useState('');
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [error, setError] = React.useState(null);
-    const handleSubmit = async (e)=>{
-        e.preventDefault();
-        setIsLoading(true);
-        setError(null);
-        try {
-            await onSignup({
-                name,
-                email
-            });
-            window.location.href = `/verify-otp?email=${encodeURIComponent(email)}&purpose=signup`;
-        } catch (err) {
-            setError(err.message || 'Signup failed');
-        } finally{
-            setIsLoading(false);
-        }
-    };
-    return /*#__PURE__*/ _jsxs(AuthLayout, {
-        logo: logo,
-        title: "Create Account",
-        subtitle: "Enter your details to get started",
-        poweredBy: poweredBy,
-        cardClassName: cardClassName,
-        backgroundClass: backgroundClass,
-        footer: /*#__PURE__*/ _jsxs("p", {
-            className: "text-center text-gray-600 text-sm",
-            children: [
-                "Already have an account?",
-                ' ',
-                /*#__PURE__*/ _jsx("a", {
-                    href: loginUrl,
-                    className: "text-gray-900 font-medium hover:underline",
-                    children: "Sign in"
-                })
-            ]
-        }),
-        children: [
-            showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsxs(Button, {
-                        fullWidth: true,
-                        variant: "bordered",
-                        size: "lg",
-                        className: "mb-4",
-                        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: 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, {
-                        label: "Full Name",
-                        value: name,
-                        onValueChange: setName,
-                        isRequired: true
-                    }),
-                    /*#__PURE__*/ _jsx(Input, {
-                        type: "email",
-                        label: "Email",
-                        value: email,
-                        onValueChange: setEmail,
-                        isRequired: true
-                    }),
-                    /*#__PURE__*/ _jsxs("p", {
-                        className: "text-xs text-gray-600 text-center",
-                        children: [
-                            "By signing up, you agree to our",
-                            ' ',
-                            /*#__PURE__*/ _jsx("a", {
-                                href: "/terms",
-                                className: "text-gray-900 hover:underline",
-                                children: "Terms of Service"
-                            }),
-                            " and",
-                            ' ',
-                            /*#__PURE__*/ _jsx("a", {
-                                href: "/privacy",
-                                className: "text-gray-900 hover:underline",
-                                children: "Privacy Policy"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        type: "submit",
-                        variant: "primary",
-                        isLoading: isLoading,
-                        children: "Create Account"
-                    })
-                ]
-            })
-        ]
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pluginConfig } from '../../config.js';
+import SignupPageTailwind from './SignupPageTailwind.js';
+import SignupPageHero from './SignupPageHero.js';
+export default function SignupPage(props) {
+    return pluginConfig.style === 'hero-ui' ? /*#__PURE__*/ _jsx(SignupPageHero, {
+        ...props
+    }) : /*#__PURE__*/ _jsx(SignupPageTailwind, {
+        ...props
     });
 }

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

@@ -0,0 +1,10 @@
+import type { AuthLayoutConfig } from '../AuthLayout.js';
+export interface SignupPageHeroProps extends AuthLayoutConfig {
+    onSignup: (data: {
+        name: string;
+        email: string;
+    }) => Promise<void>;
+    showGoogleOAuth?: boolean;
+    loginUrl?: string;
+}
+export default function SignupPageHero({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass }: SignupPageHeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/SignupPageHero.js

@@ -0,0 +1,150 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Input, Divider } from '@heroui/react';
+import { Icon } from '@iconify/react';
+import { motion } from 'framer-motion';
+import { AuthLayout } from '../AuthLayout.js';
+export default function SignupPageHero({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const [name, setName] = React.useState('');
+    const [email, setEmail] = React.useState('');
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        setIsLoading(true);
+        setError(null);
+        try {
+            await onSignup({
+                name,
+                email
+            });
+            window.location.href = `/verify-otp?email=${encodeURIComponent(email)}&purpose=signup`;
+        } catch (err) {
+            setError(err.message || 'Signup failed');
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(AuthLayout, {
+        logo: logo,
+        title: "Create Account",
+        subtitle: "Enter your details to get started",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsxs("p", {
+            className: "text-center text-gray-600 text-sm",
+            children: [
+                "Already have an account? ",
+                /*#__PURE__*/ _jsx("a", {
+                    href: loginUrl,
+                    className: "text-gray-900 font-medium hover:underline",
+                    children: "Sign in"
+                })
+            ]
+        }),
+        children: [
+            showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        fullWidth: true,
+                        variant: "bordered",
+                        size: "lg",
+                        className: "mb-4 h-12 border-gray-300 rounded-full text-gray-700 hover:bg-gray-50",
+                        startContent: /*#__PURE__*/ _jsx(Icon, {
+                            icon: "flat-color-icons:google",
+                            width: 20
+                        }),
+                        children: "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: 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: "text",
+                        label: "Full Name",
+                        value: name,
+                        onValueChange: setName,
+                        variant: "bordered",
+                        size: "lg",
+                        isRequired: true,
+                        classNames: {
+                            input: 'text-gray-900',
+                            label: 'text-gray-600',
+                            inputWrapper: 'border-gray-300 bg-white'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        type: "email",
+                        label: "Email",
+                        value: email,
+                        onValueChange: setEmail,
+                        variant: "bordered",
+                        size: "lg",
+                        isRequired: true,
+                        classNames: {
+                            input: 'text-gray-900',
+                            label: 'text-gray-600',
+                            inputWrapper: 'border-gray-300 bg-white'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "text-xs text-gray-600 text-center",
+                        children: [
+                            "By signing up, you agree to our ",
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/terms",
+                                className: "text-gray-900 hover:underline",
+                                children: "Terms"
+                            }),
+                            " and ",
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/privacy",
+                                className: "text-gray-900 hover:underline",
+                                children: "Privacy"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        fullWidth: true,
+                        size: "lg",
+                        color: "primary",
+                        isLoading: isLoading,
+                        className: "h-12 font-semibold",
+                        children: "Create Account"
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,10 @@
+import type { AuthLayoutConfig } from '../AuthLayout.js';
+export interface SignupPageProps extends AuthLayoutConfig {
+    onSignup: (data: {
+        name: string;
+        email: string;
+    }) => Promise<void>;
+    showGoogleOAuth?: boolean;
+    loginUrl?: string;
+}
+export default function SignupPage({ onSignup, showGoogleOAuth, loginUrl, logo, poweredBy, cardClassName, backgroundClass, }: SignupPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/SignupPageTailwind.js

@@ -0,0 +1,129 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Input, Divider } from '../ui/index.js';
+import { AuthLayout } from '../AuthLayout.js';
+export default function SignupPage({ onSignup, showGoogleOAuth = true, loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+    const [name, setName] = React.useState('');
+    const [email, setEmail] = React.useState('');
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        setIsLoading(true);
+        setError(null);
+        try {
+            await onSignup({
+                name,
+                email
+            });
+            window.location.href = `/verify-otp?email=${encodeURIComponent(email)}&purpose=signup`;
+        } catch (err) {
+            setError(err.message || 'Signup failed');
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(AuthLayout, {
+        logo: logo,
+        title: "Create Account",
+        subtitle: "Enter your details to get started",
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        backgroundClass: backgroundClass,
+        footer: /*#__PURE__*/ _jsxs("p", {
+            className: "text-center text-gray-600 text-sm",
+            children: [
+                "Already have an account?",
+                ' ',
+                /*#__PURE__*/ _jsx("a", {
+                    href: loginUrl,
+                    className: "text-gray-900 font-medium hover:underline",
+                    children: "Sign in"
+                })
+            ]
+        }),
+        children: [
+            showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Button, {
+                        fullWidth: true,
+                        variant: "bordered",
+                        size: "lg",
+                        className: "mb-4",
+                        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: 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, {
+                        label: "Full Name",
+                        value: name,
+                        onValueChange: setName,
+                        isRequired: true
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        type: "email",
+                        label: "Email",
+                        value: email,
+                        onValueChange: setEmail,
+                        isRequired: true
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "text-xs text-gray-600 text-center",
+                        children: [
+                            "By signing up, you agree to our",
+                            ' ',
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/terms",
+                                className: "text-gray-900 hover:underline",
+                                children: "Terms of Service"
+                            }),
+                            " and",
+                            ' ',
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/privacy",
+                                className: "text-gray-900 hover:underline",
+                                children: "Privacy Policy"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        variant: "primary",
+                        isLoading: isLoading,
+                        children: "Create Account"
+                    })
+                ]
+            })
+        ]
+    });
+}