@main12/auth-login 0.1.0

package/dist/components/pages/SignupPage.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"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/components/pages/VerifyOtpPage.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/VerifyOtpPage.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/components/ui/index.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+interface ButtonProps {
+    children: React.ReactNode;
+    type?: 'button' | 'submit';
+    fullWidth?: boolean;
+    size?: 'sm' | 'lg';
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    onPress?: () => void;
+    onClick?: () => void;
+    variant?: 'primary' | 'bordered' | 'ghost' | 'tertiary';
+    className?: string;
+}
+export declare const Button: React.FC<ButtonProps>;
+interface InputProps {
+    type?: string;
+    label?: string;
+    value: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: string) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    placeholder?: string;
+    className?: string;
+    name?: string;
+}
+export declare const Input: React.FC<InputProps>;
+interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Card: React.FC<CardProps>;
+export declare const CardHeader: React.FC<CardProps>;
+export declare const CardContent: React.FC<CardProps>;
+export declare const CardFooter: React.FC<CardProps>;
+export declare const CardTitle: React.FC<CardProps>;
+export declare const CardDescription: React.FC<CardProps>;
+export declare const Divider: React.FC<{
+    className?: string;
+}>;
+interface SpinnerProps {
+    size?: 'sm' | 'lg';
+    className?: string;
+}
+export declare const Spinner: React.FC<SpinnerProps>;
+interface OtpInputProps {
+    length?: number;
+    value: string;
+    onChange?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+    isDisabled?: boolean;
+    autoFocus?: boolean;
+}
+export declare const OtpInput: React.FC<OtpInputProps>;
+export {};

package/dist/components/ui/index.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const variantClasses = {
+    primary: 'bg-[#D5E855] text-gray-900 hover:bg-[#C9DC4A] font-semibold',
+    bordered: 'border border-gray-300 text-gray-700 hover:bg-gray-50 bg-white',
+    ghost: 'text-gray-600 hover:text-gray-900 bg-transparent',
+    tertiary: 'text-gray-600 hover:text-gray-900 bg-transparent underline'
+};
+export const Button = ({ children, type = 'button', fullWidth = true, size = 'lg', isLoading, isDisabled, onPress, onClick, variant = 'primary', className = '' })=>/*#__PURE__*/ _jsxs("button", {
+        type: type,
+        disabled: isDisabled || isLoading,
+        onClick: onPress || onClick,
+        className: `
+      ${fullWidth ? 'w-full' : ''}
+      ${size === 'lg' ? 'h-12 px-6 text-base' : 'h-8 px-3 text-sm'}
+      rounded-full transition-all duration-200 flex items-center justify-center gap-2
+      disabled:opacity-50 disabled:cursor-not-allowed
+      ${variantClasses[variant] || variantClasses.primary}
+      ${className}
+    `.trim(),
+        children: [
+            isLoading ? /*#__PURE__*/ _jsx(Spinner, {
+                size: "sm"
+            }) : null,
+            children
+        ]
+    });
+export const Input = ({ type = 'text', label, value, onChange, onValueChange, isRequired, isDisabled, autoFocus, autoComplete, placeholder, className = '', name })=>/*#__PURE__*/ _jsxs("div", {
+        className: "w-full",
+        children: [
+            label && /*#__PURE__*/ _jsxs("label", {
+                className: "block text-sm font-medium text-gray-600 mb-1",
+                children: [
+                    label,
+                    isRequired ? ' *' : ''
+                ]
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                type: type,
+                value: value,
+                onChange: onChange || (onValueChange ? (e)=>onValueChange(e.target.value) : undefined),
+                required: isRequired,
+                disabled: isDisabled,
+                autoFocus: autoFocus,
+                autoComplete: autoComplete,
+                placeholder: placeholder,
+                name: name,
+                className: `w-full h-12 px-4 bg-white border border-gray-300 hover:border-gray-400 rounded-xl text-gray-900 text-base transition-colors outline-none focus:border-[#D5E855] focus:ring-2 focus:ring-[#D5E855]/30 ${className}`
+            })
+        ]
+    });
+export const Card = ({ children, className = '' })=>/*#__PURE__*/ _jsx("div", {
+        className: `bg-white rounded-2xl shadow-2xl ${className}`,
+        children: children
+    });
+export const CardHeader = ({ children, className = '' })=>/*#__PURE__*/ _jsx("div", {
+        className: `flex flex-col items-center gap-2 pt-8 pb-2 px-6 ${className}`,
+        children: children
+    });
+export const CardContent = ({ children, className = '' })=>/*#__PURE__*/ _jsx("div", {
+        className: `px-6 pb-4 ${className}`,
+        children: children
+    });
+export const CardFooter = ({ children, className = '' })=>/*#__PURE__*/ _jsx("div", {
+        className: `px-6 pb-6 flex justify-center ${className}`,
+        children: children
+    });
+export const CardTitle = ({ children, className = '' })=>/*#__PURE__*/ _jsx("h1", {
+        className: `text-xl font-semibold text-gray-900 ${className}`,
+        children: children
+    });
+export const CardDescription = ({ children, className = '' })=>/*#__PURE__*/ _jsx("p", {
+        className: `text-gray-600 text-sm text-center ${className}`,
+        children: children
+    });
+export const Divider = ({ className = '' })=>/*#__PURE__*/ _jsx("hr", {
+        className: `border-0 h-px bg-gray-200 ${className}`
+    });
+export const Spinner = ({ size = 'lg', className = '' })=>/*#__PURE__*/ _jsx("div", {
+        className: `inline-block animate-spin rounded-full border-2 border-current border-t-transparent ${size === 'lg' ? 'w-6 h-6' : 'w-4 h-4'} ${className}`,
+        role: "status",
+        children: /*#__PURE__*/ _jsx("span", {
+            className: "sr-only",
+            children: "Loading..."
+        })
+    });
+export const OtpInput = ({ length = 6, value, onChange, onValueChange, isDisabled, autoFocus })=>{
+    const setValue = onChange || onValueChange || (()=>{});
+    const inputs = Array.from({
+        length
+    }, (_, i)=>i);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex justify-center gap-2",
+        children: inputs.map((i)=>/*#__PURE__*/ _jsx("input", {
+                type: "text",
+                inputMode: "numeric",
+                maxLength: 1,
+                value: value[i] || '',
+                disabled: isDisabled,
+                autoFocus: autoFocus && i === 0,
+                onChange: (e)=>{
+                    const char = e.target.value.replace(/[^0-9]/g, '').slice(0, 1);
+                    const newVal = value.split('');
+                    newVal[i] = char;
+                    setValue(newVal.join(''));
+                    // Auto-focus next
+                    if (char && i < length - 1) {
+                        const next = e.target.parentElement?.nextElementSibling?.querySelector('input');
+                        next?.focus();
+                    }
+                },
+                onKeyDown: (e)=>{
+                    if (e.key === 'Backspace' && !value[i] && i > 0) {
+                        const prev = e.target.parentElement?.previousElementSibling?.querySelector('input');
+                        prev?.focus();
+                    }
+                },
+                className: "w-12 h-14 text-center text-2xl font-semibold text-gray-900 border-2 border-gray-300 rounded-xl focus:border-[#D5E855] focus:ring-2 focus:ring-[#D5E855]/30 outline-none transition-all bg-white"
+            }, i))
+    });
+};

package/dist/endpoints/authEndpoints.d.ts

@@ -0,0 +1,22 @@
+import type { Endpoint } from 'payload';
+/**
+ * POST /api/auth/check-email — Check if user exists and has password
+ */
+export declare const checkEmailEndpoint: Endpoint;
+/**
+ * POST /api/auth/otp/send — Generate OTP, store it, send email via Payload
+ */
+export declare const sendOtpEndpoint: Endpoint;
+/**
+ * POST /api/auth/otp/verify — Verify OTP and login the user
+ */
+export declare const verifyOtpEndpoint: Endpoint;
+/**
+ * POST /api/auth/set-password — Set/update password for authenticated user
+ */
+export declare const setPasswordEndpoint: Endpoint;
+/**
+ * POST /api/auth/signup — Create new user + send welcome email
+ */
+export declare const signupEndpoint: Endpoint;
+export declare const authEndpoints: Endpoint[];