@main12/auth-login 0.4.2 → 1.0.1

package/dist/components/AuthPagesServer.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
 import AuthPagesClient from './AuthPages.js';
-import { pluginConfig } from '../config.js';
+import { getServerAllowSignup, getServerGoogleOAuthEnabled, pluginConfig } from '../config.js';
 import { detectServerLocale } from './ui/locale.js';
+// Use pluginConfig singleton directly - standard Payload plugin pattern
 /**
  * Server component wrapper for AuthPages.
- * Reads plugin config directly from the shared `pluginConfig` singleton
- * (set by the plugin factory at Payload config build time) and passes it
- * down to the client component. No env vars involved — the plugin's
- * `style`, `googleOAuthEnabled`, etc. options are the single source of truth.
+ * Reads plugin config from environment variables set during plugin initialization,
+ * ensuring the correct settings are used even in linked monorepo setups where
+ * module singletons may not be shared across entry points.
  *
  * Locale is resolved per-request: an explicit `locale` prop always wins,
  * otherwise it's auto-detected from the `NEXT_LOCALE` cookie or
@@ -25,11 +26,17 @@ import { detectServerLocale } from './ui/locale.js';
  * ```
  */ export default async function AuthPages(props) {
     const resolvedLocale = props.locale ?? detectServerLocale(await headers());
+    const resolvedAllowSignup = props.allowSignup ?? getServerAllowSignup();
+    const basePath = props.basePath?.replace(/\/$/, '') ?? '/auth';
+    // Redirect /signup to /login when signup is disabled
+    const currentSlug = Array.isArray(props.slug) ? props.slug[0] : props.slug;
+    if (!resolvedAllowSignup && currentSlug === 'signup') {
+        redirect(`${basePath}/login`);
+    }
     return /*#__PURE__*/ _jsx(AuthPagesClient, {
         ...props,
-        showGoogleOAuth: props.showGoogleOAuth ?? pluginConfig.googleOAuthEnabled,
-        style: props.style ?? pluginConfig.style,
-        allowSignup: props.allowSignup ?? pluginConfig.allowSignup,
+        showGoogleOAuth: props.showGoogleOAuth ?? getServerGoogleOAuthEnabled(),
+        allowSignup: resolvedAllowSignup,
         passwordLogin: pluginConfig.passwordLogin,
         otpLogin: pluginConfig.otpLogin,
         locale: resolvedLocale

package/dist/components/auth-card/AuthCardShell.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface PoweredByConfig {
+    enabled?: boolean;
+    logoUrl?: string;
+    linkUrl?: string;
+    width?: number;
+    height?: number;
+}
+export interface AuthCardShellProps {
+    children: React.ReactNode;
+    logo?: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    footer?: React.ReactNode;
+    poweredBy?: PoweredByConfig;
+    cardClassName?: string;
+    removeBorder?: boolean;
+    removeShadow?: boolean;
+    mobileVariant?: 'plain' | 'card';
+}
+export declare function AuthCardShell({ children, logo, title, subtitle, footer, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, }: AuthCardShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth-card/AuthCardShell.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Card, CardContent, CardFooter } from '../ui/index.js';
+import { PoweredBy } from '../PoweredBy.js';
+import { pluginConfig } from '../../config.js';
+function DefaultLogo() {
+    if (pluginConfig.Logo) {
+        const L = pluginConfig.Logo;
+        return /*#__PURE__*/ _jsx(L, {});
+    }
+    if (pluginConfig.logoUrl) {
+        return /*#__PURE__*/ _jsx("img", {
+            src: pluginConfig.logoUrl,
+            alt: "",
+            width: 180,
+            height: 42,
+            className: "object-contain"
+        });
+    }
+    return null;
+}
+export function AuthCardShell({ children, logo, title, subtitle, footer, poweredBy, cardClassName = '', removeBorder = false, removeShadow = false, mobileVariant = 'plain' }) {
+    const displayLogo = logo || /*#__PURE__*/ _jsx(DefaultLogo, {});
+    const header = (displayLogo || title) && /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col items-center gap-2 pt-8 pb-4 px-8",
+        children: [
+            displayLogo && /*#__PURE__*/ _jsx("div", {
+                className: "flex justify-center mb-3",
+                children: displayLogo
+            }),
+            title && /*#__PURE__*/ _jsx("h1", {
+                className: "text-2xl font-bold text-gray-900 text-center tracking-tight",
+                children: title
+            }),
+            subtitle && /*#__PURE__*/ _jsx("p", {
+                className: "text-gray-600 text-sm text-center",
+                children: subtitle
+            })
+        ]
+    });
+    const cardBorderShadowClass = [
+        removeBorder ? '!border-0' : '',
+        removeShadow ? '!shadow-none' : ''
+    ].filter(Boolean).join(' ');
+    const cardBody = /*#__PURE__*/ _jsxs("div", {
+        className: "w-full max-w-md mx-auto animate-[fadeIn_0.5s_ease-out]",
+        style: {
+            maxWidth: '448px'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Card, {
+                className: `${cardBorderShadowClass} ${cardClassName}`.trim(),
+                children: [
+                    header,
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: children
+                    }),
+                    footer && /*#__PURE__*/ _jsx(CardFooter, {
+                        children: footer
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(PoweredBy, {
+                ...poweredBy
+            })
+        ]
+    });
+    if (mobileVariant === 'card') {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "px-4 py-8 md:py-12",
+            children: cardBody
+        });
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "md:hidden flex flex-col w-full max-w-md mx-auto light [color-scheme:light] px-4 py-8",
+                "data-theme": "light",
+                style: {
+                    maxWidth: '448px'
+                },
+                children: [
+                    header,
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "px-8 pb-6",
+                        children: children
+                    }),
+                    footer && /*#__PURE__*/ _jsx("div", {
+                        className: "px-8 pb-8 flex justify-center",
+                        children: footer
+                    }),
+                    /*#__PURE__*/ _jsx(PoweredBy, {
+                        ...poweredBy
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "hidden md:flex items-center justify-center px-4 py-12 w-full h-full",
+                children: cardBody
+            })
+        ]
+    });
+}

package/dist/components/auth-card/FormRenderer.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type DeepPartial, type UiTranslations } from '../ui/translations';
+import { type PoweredByConfig } from './AuthCardShell';
+export interface FormRendererProps {
+    slug: string | string[];
+    redirectTo?: string;
+    onPasswordLogin?: (credentials: {
+        email: string;
+        password: string;
+    }) => Promise<void>;
+    onSignup?: (data: {
+        name: string;
+        email: string;
+    }) => Promise<void>;
+    basePath?: string;
+    showGoogleOAuth?: boolean;
+    allowSignup?: boolean;
+    passwordLogin?: boolean;
+    otpLogin?: boolean;
+    locale?: string;
+    messages?: Record<string, DeepPartial<UiTranslations>>;
+    logo?: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    footer?: React.ReactNode;
+    poweredBy?: PoweredByConfig;
+    cardClassName?: string;
+    removeBorder?: boolean;
+    removeShadow?: boolean;
+    mobileVariant?: 'plain' | 'card';
+}
+export declare function FormRenderer({ slug, redirectTo, onPasswordLogin, onSignup, basePath, showGoogleOAuth, allowSignup, passwordLogin, otpLogin, locale, messages, logo, title: titleOverride, subtitle: subtitleOverride, footer, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant, }: FormRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth-card/FormRenderer.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { pluginConfig, initClientConfig } from '../../config.js';
+import { detectClientLocale } from '../ui/locale.js';
+import { getUiTranslations } from '../ui/translations.js';
+import { AUTH_FORMS } from '../forms/index.js';
+import { FORM_CONFIGS } from './formConfigs.js';
+import { AuthCardShell } from './AuthCardShell.js';
+const defaultPasswordLogin = async ({ email, password })=>{
+    const res = await fetch('/api/users/login', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            email,
+            password
+        })
+    });
+    if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.errors?.[0]?.message || 'Login failed');
+    }
+};
+const defaultSignup = async ({ name, email })=>{
+    const res = await fetch('/api/auth/signup', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            name,
+            email
+        })
+    });
+    if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.message || 'Signup failed');
+    }
+};
+export function FormRenderer({ slug, redirectTo = '/admin', onPasswordLogin = defaultPasswordLogin, onSignup = defaultSignup, basePath = '/auth', showGoogleOAuth, allowSignup = true, passwordLogin = true, otpLogin = true, locale, messages, logo, title: titleOverride, subtitle: subtitleOverride, footer, poweredBy, cardClassName, removeBorder, removeShadow, mobileVariant }) {
+    initClientConfig({
+        style: pluginConfig.style,
+        googleOAuthEnabled: showGoogleOAuth ?? pluginConfig.googleOAuthEnabled,
+        passwordLogin,
+        otpLogin
+    });
+    const resolvedLocale = locale ?? detectClientLocale();
+    const t = getUiTranslations(resolvedLocale, messages);
+    const normalizedSlug = Array.isArray(slug) ? slug[0] : slug;
+    const base = basePath.replace(/\/$/, '');
+    const [dynamicTitle, setDynamicTitle] = useState(undefined);
+    const [dynamicSubtitle, setDynamicSubtitle] = useState(undefined);
+    const effectiveSlug = !allowSignup && normalizedSlug === 'signup' ? 'login' : normalizedSlug in AUTH_FORMS ? normalizedSlug : 'login';
+    const config = FORM_CONFIGS[effectiveSlug];
+    const FormComponent = AUTH_FORMS[effectiveSlug];
+    const propsContext = {
+        redirectTo,
+        onPasswordLogin,
+        onSignup,
+        basePath: base,
+        showGoogleOAuth: showGoogleOAuth ?? pluginConfig.googleOAuthEnabled,
+        allowSignup,
+        locale: resolvedLocale,
+        messages,
+        setDynamicTitle,
+        setDynamicSubtitle
+    };
+    const translationSection = t[config.translationKey];
+    const title = titleOverride ?? dynamicTitle ?? translationSection.title;
+    const subtitle = subtitleOverride ?? dynamicSubtitle ?? translationSection.subtitle;
+    const formProps = config.getProps(propsContext);
+    return /*#__PURE__*/ _jsx(AuthCardShell, {
+        logo: logo,
+        title: title,
+        subtitle: subtitle,
+        footer: footer,
+        poweredBy: poweredBy,
+        cardClassName: cardClassName,
+        removeBorder: removeBorder,
+        removeShadow: removeShadow,
+        mobileVariant: mobileVariant,
+        children: /*#__PURE__*/ _jsx(FormComponent, {
+            ...formProps
+        })
+    });
+}

package/dist/components/auth-card/formConfigs.d.ts

@@ -0,0 +1,25 @@
+import type { UiTranslations, DeepPartial } from '../ui/translations';
+import type { AuthFormSlug } from '../forms/index';
+export interface FormPropsContext {
+    redirectTo: string;
+    onPasswordLogin: (credentials: {
+        email: string;
+        password: string;
+    }) => Promise<void>;
+    onSignup: (data: {
+        name: string;
+        email: string;
+    }) => Promise<void>;
+    basePath: string;
+    showGoogleOAuth: boolean;
+    allowSignup: boolean;
+    locale: string;
+    messages?: Record<string, DeepPartial<UiTranslations>>;
+    setDynamicTitle: (title: string | undefined) => void;
+    setDynamicSubtitle: (subtitle: string | undefined) => void;
+}
+export interface FormConfig {
+    translationKey: keyof UiTranslations;
+    getProps: (ctx: FormPropsContext) => Record<string, any>;
+}
+export declare const FORM_CONFIGS: Record<AuthFormSlug, FormConfig>;

package/dist/components/auth-card/formConfigs.js

@@ -0,0 +1,56 @@
+export const FORM_CONFIGS = {
+    'login': {
+        translationKey: 'login',
+        getProps: (ctx)=>({
+                onPasswordLogin: ctx.onPasswordLogin,
+                redirectTo: ctx.redirectTo,
+                showGoogleOAuth: ctx.showGoogleOAuth,
+                signupUrl: ctx.allowSignup ? `${ctx.basePath}/signup` : undefined,
+                locale: ctx.locale,
+                messages: ctx.messages,
+                onStepChange: (_, title, subtitle)=>{
+                    ctx.setDynamicTitle(title);
+                    ctx.setDynamicSubtitle(subtitle);
+                }
+            })
+    },
+    'signup': {
+        translationKey: 'signup',
+        getProps: (ctx)=>({
+                onSignup: ctx.onSignup,
+                showGoogleOAuth: ctx.showGoogleOAuth,
+                loginUrl: `${ctx.basePath}/login`,
+                verifyOtpUrl: `${ctx.basePath}/verify-otp`,
+                locale: ctx.locale,
+                messages: ctx.messages
+            })
+    },
+    'forgot-password': {
+        translationKey: 'forgotPassword',
+        getProps: (ctx)=>({
+                loginUrl: `${ctx.basePath}/login`,
+                locale: ctx.locale,
+                messages: ctx.messages
+            })
+    },
+    'verify-otp': {
+        translationKey: 'verifyOtp',
+        getProps: (ctx)=>({
+                loginUrl: `${ctx.basePath}/login`,
+                locale: ctx.locale,
+                messages: ctx.messages,
+                onPurposeChange: (_, title, subtitle)=>{
+                    ctx.setDynamicTitle(title);
+                    ctx.setDynamicSubtitle(subtitle);
+                }
+            })
+    },
+    'set-password': {
+        translationKey: 'setPassword',
+        getProps: (ctx)=>({
+                redirectTo: ctx.redirectTo,
+                locale: ctx.locale,
+                messages: ctx.messages
+            })
+    }
+};

package/dist/components/auth-card/index.d.ts

@@ -0,0 +1,3 @@
+export { AuthCardShell, type AuthCardShellProps, type PoweredByConfig } from './AuthCardShell';
+export { FormRenderer, type FormRendererProps } from './FormRenderer';
+export { FORM_CONFIGS, type FormConfig, type FormPropsContext } from './formConfigs';

package/dist/components/auth-card/index.js

@@ -0,0 +1,3 @@
+export { AuthCardShell } from './AuthCardShell.js';
+export { FormRenderer } from './FormRenderer.js';
+export { FORM_CONFIGS } from './formConfigs.js';

package/dist/components/forms/ForgotPasswordForm.d.ts

@@ -0,0 +1,7 @@
+import { type DeepPartial, type UiTranslations } from '../ui/translations';
+export interface ForgotPasswordFormProps {
+    loginUrl?: string;
+    locale?: string;
+    messages?: Record<string, DeepPartial<UiTranslations>>;
+}
+export declare function ForgotPasswordForm({ loginUrl, locale, messages, }: ForgotPasswordFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/ForgotPasswordForm.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Input } from '../ui/index.js';
+import { useForgotPasswordFlow } from '../../auth/application/hooks/useForgotPasswordFlow.js';
+import { getUiTranslations } from '../ui/translations.js';
+export function ForgotPasswordForm({ loginUrl = '/login', locale, messages }) {
+    const { email, error, isLoading, setEmail, handleSubmit } = useForgotPasswordFlow();
+    const translations = getUiTranslations(locale, messages);
+    const t = translations.forgotPassword;
+    const errors = translations.errors;
+    // Helper to translate error keys
+    const getErrorMessage = (err)=>{
+        if (!err) return null;
+        if (err in errors) return errors[err];
+        return err;
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        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: getErrorMessage(error)
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        type: "email",
+                        label: t.emailLabel,
+                        value: email,
+                        onChange: (e)=>setEmail(e.target.value),
+                        isRequired: true
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        variant: "primary",
+                        isLoading: isLoading,
+                        children: t.sendResetCode
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "text-center mt-6",
+                children: /*#__PURE__*/ _jsxs("a", {
+                    href: loginUrl,
+                    className: "text-sm text-gray-600 hover:text-gray-900 inline-flex items-center gap-1",
+                    children: [
+                        "← ",
+                        t.backToLogin
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/components/forms/LoginForm.d.ts

@@ -0,0 +1,15 @@
+import { type DeepPartial, type UiTranslations } from '../ui/translations';
+export interface LoginFormProps {
+    onPasswordLogin: (credentials: {
+        email: string;
+        password: string;
+    }) => Promise<void>;
+    redirectTo?: string;
+    showGoogleOAuth?: boolean;
+    signupUrl?: string;
+    locale?: string;
+    messages?: Record<string, DeepPartial<UiTranslations>>;
+    /** Callback to update the card title based on current step */
+    onStepChange?: (step: 'email' | 'password' | 'otp-prompt', title: string, subtitle: string) => void;
+}
+export declare function LoginForm(props: LoginFormProps): import("react/jsx-runtime").JSX.Element;