@maxal_studio/kratosjs-react 1.0.0

package/dist/auth/LoginPage.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { AuthApiClient } from './authApiClient';
+import { useAuth } from './AuthContext';
+import { useAuthChallengeRegistry } from '../contexts/AuthChallengeRegistryContext';
+import { Icon } from '../components/utils/Icon';
+import { cn } from '../utils/classNames';
+import { Button, IconButton, Input, Label, ErrorAlert, Spinner } from '../components/ui';
+import { PanelBrandMark } from '../components/layout/PanelBrandMark';
+import { Moon, Sun, ArrowLeft } from 'lucide-react';
+import { useTranslation } from '../i18n/useTranslation';
+import { LocaleSwitcher } from '../i18n/LocaleSwitcher';
+import { Slot } from '../slots/Slot';
+import { translate } from '../i18n/activeLocale';
+function useDarkMode() {
+    const [darkMode, setDarkMode] = useState(() => {
+        const stored = localStorage.getItem('darkMode');
+        if (stored !== null) {
+            return stored === 'true';
+        }
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    });
+    useEffect(() => {
+        document.documentElement.classList.toggle('dark', darkMode);
+        localStorage.setItem('darkMode', String(darkMode));
+    }, [darkMode]);
+    return [darkMode, setDarkMode];
+}
+/** Returns the i18n key for the login subtitle (translated at the call site). */
+function getSubtitleKey(providers, selectedProvider) {
+    if (providers.length > 1 && !selectedProvider) {
+        return 'core:auth.choose_provider';
+    }
+    const provider = selectedProvider ?? providers[0];
+    if (provider?.type === 'oauth') {
+        return 'core:auth.continue';
+    }
+    return 'core:auth.enter_credentials';
+}
+function ProviderButton({ provider, onSelect }) {
+    const hasCustomStyle = Boolean(provider.buttonStyle?.backgroundColor);
+    return (_jsx(Button, { type: "button", variant: hasCustomStyle ? 'primary' : 'secondary', className: cn('w-full h-11', hasCustomStyle && 'border-transparent'), style: hasCustomStyle
+            ? {
+                backgroundColor: provider.buttonStyle.backgroundColor,
+                color: provider.buttonStyle.textColor || '#ffffff',
+                borderColor: provider.buttonStyle.borderColor || provider.buttonStyle.backgroundColor,
+            }
+            : undefined, icon: provider.icon ? (_jsx(Icon, { name: provider.icon, className: cn('h-4 w-4', !hasCustomStyle && 'text-fg') })) : undefined, onClick: () => onSelect(provider), children: provider.label }));
+}
+/**
+ * Renders the active login challenge (e.g. 2FA) using the plugin-registered component for
+ * its `type`. Owns the per-attempt submitting/error state and wires the challenge UI to
+ * `verifyChallenge` / `cancelChallenge` from the auth context.
+ */
+function ChallengeStep({ challenge }) {
+    const { t } = useTranslation();
+    const { verifyChallenge, cancelChallenge } = useAuth();
+    const registry = useAuthChallengeRegistry();
+    const ChallengeComponent = registry[challenge.type];
+    const [error, setError] = useState(null);
+    const [submitting, setSubmitting] = useState(false);
+    if (!ChallengeComponent) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(ErrorAlert, { message: `No UI is registered for challenge type "${challenge.type}".` }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "-ml-2 h-8 px-2 text-fg-secondary", icon: _jsx(ArrowLeft, { className: "h-4 w-4" }), onClick: cancelChallenge, children: t('core:auth.back_to_signin') })] }));
+    }
+    const handleSubmit = async (payload) => {
+        setSubmitting(true);
+        setError(null);
+        try {
+            await verifyChallenge(payload);
+        }
+        catch (err) {
+            setError(err.message || t('core:auth.verification_failed'));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsx(ChallengeComponent, { data: challenge.data, onSubmit: handleSubmit, onCancel: cancelChallenge, error: error, submitting: submitting }));
+}
+/**
+ * LoginPage - Displays authentication providers and handles login
+ */
+export function LoginPage({ apiBaseUrl, onSuccess }) {
+    const { t } = useTranslation();
+    const { login, pendingChallenge } = useAuth();
+    const [providers, setProviders] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedProvider, setSelectedProvider] = useState(null);
+    const [credentials, setCredentials] = useState({ email: '', password: '' });
+    const [submitting, setSubmitting] = useState(false);
+    const [panelBranding, setPanelBranding] = useState({});
+    const [darkMode, setDarkMode] = useDarkMode();
+    const apiClient = useMemo(() => new AuthApiClient(apiBaseUrl), [apiBaseUrl]);
+    const showProviderPicker = providers.length > 1 && !selectedProvider;
+    const activeProvider = selectedProvider ?? (providers.length === 1 ? providers[0] : null);
+    const showCredentialsForm = activeProvider?.type === 'credentials';
+    const showOAuthPrompt = activeProvider?.type === 'oauth' && !showProviderPicker;
+    const showBackLink = providers.length > 1 && selectedProvider?.type === 'credentials';
+    const subtitle = useMemo(() => t(getSubtitleKey(providers, selectedProvider)), [providers, selectedProvider, t]);
+    // Load panel branding for the login screen (meta endpoint allows unauthenticated access)
+    useEffect(() => {
+        const fetchBranding = async () => {
+            try {
+                const response = await fetch(`${apiBaseUrl}/meta`);
+                if (!response.ok)
+                    return;
+                const meta = await response.json();
+                setPanelBranding({
+                    title: meta.title,
+                    icon: meta.icon,
+                    favicon: meta.favicon,
+                });
+            }
+            catch {
+                // Branding is optional — fall back to defaults
+            }
+        };
+        fetchBranding();
+    }, [apiBaseUrl]);
+    // Fetch available providers
+    useEffect(() => {
+        const fetchProviders = async () => {
+            try {
+                const providerList = await apiClient.getProviders();
+                setProviders(providerList);
+                if (providerList.length === 1) {
+                    setSelectedProvider(providerList[0]);
+                }
+            }
+            catch (err) {
+                setError(err.message || t('core:auth.providers_load_failed'));
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchProviders();
+    }, [apiClient]);
+    const handleProviderSelect = (provider) => {
+        if (provider.type === 'oauth') {
+            const redirectUri = encodeURIComponent(window.location.origin + window.location.pathname);
+            const authUrl = `${apiBaseUrl}/auth/oauth/${provider.name}?redirect_uri=${redirectUri}`;
+            window.location.href = authUrl;
+            return;
+        }
+        setSelectedProvider(provider);
+        setError(null);
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!activeProvider)
+            return;
+        setSubmitting(true);
+        setError(null);
+        try {
+            await login(activeProvider.name, credentials);
+            onSuccess?.();
+        }
+        catch (err) {
+            setError(err.message || t('core:auth.login_failed'));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    if (loading) {
+        return (_jsx("div", { className: "flex min-h-screen items-center justify-center bg-base px-6", children: _jsxs("div", { className: "text-center", children: [_jsx(Spinner, { size: "lg", className: "mx-auto text-accent" }), _jsx("p", { className: "mt-4 text-sm text-fg-secondary", children: translate('core:auth.preparing') })] }) }));
+    }
+    return (_jsxs("div", { className: "relative flex min-h-screen items-center justify-center bg-base px-6 py-12", children: [_jsxs("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", "aria-hidden": "true", children: [_jsx("div", { className: "absolute -top-32 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-accent-soft/50 blur-3xl" }), _jsx("div", { className: "absolute bottom-0 right-0 h-72 w-72 translate-x-1/4 translate-y-1/4 rounded-full bg-accent-soft/25 blur-3xl" })] }), _jsx(IconButton, { variant: "secondary", size: "sm", "aria-label": darkMode ? t('core:panel.toggle_light') : t('core:panel.toggle_dark'), title: darkMode ? t('core:panel.toggle_light') : t('core:panel.toggle_dark'), onClick: () => setDarkMode(!darkMode), className: "absolute right-4 top-4 z-10 sm:right-6 sm:top-6", children: darkMode ? _jsx(Sun, { className: "h-4 w-4 text-warning" }) : _jsx(Moon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "relative w-full max-w-[420px]", children: [_jsxs("header", { className: "mb-8 text-center", children: [_jsx("div", { className: "mx-auto mb-5 flex justify-center", children: _jsx(PanelBrandMark, { icon: panelBranding.icon, favicon: panelBranding.favicon, size: "lg" }) }), _jsx("h1", { className: "text-2xl font-semibold tracking-tight text-fg", children: pendingChallenge
+                                    ? t('core:auth.verify_identity')
+                                    : panelBranding.title
+                                        ? t('core:auth.sign_in_to', { title: panelBranding.title })
+                                        : t('core:auth.welcome_back') }), _jsx("p", { className: "mt-2 text-sm text-fg-secondary", children: pendingChallenge ? 'Complete the additional step to finish signing in' : subtitle })] }), _jsx(Slot, { name: "login.top", as: "div", className: "mb-6 space-y-4 empty:hidden" }), _jsxs("div", { className: "rounded-xl border border-border bg-surface p-6 shadow-soft sm:p-8", children: [pendingChallenge && _jsx(ChallengeStep, { challenge: pendingChallenge }), !pendingChallenge && error && (_jsx(ErrorAlert, { message: error, onDismiss: () => setError(null), className: "mb-6" })), !pendingChallenge && showProviderPicker && (_jsx("div", { className: "space-y-3", children: providers.map(provider => (_jsx(ProviderButton, { provider: provider, onSelect: handleProviderSelect }, provider.name))) })), !pendingChallenge && showOAuthPrompt && activeProvider && (_jsxs("div", { className: "space-y-4", children: [_jsx(ProviderButton, { provider: activeProvider, onSelect: handleProviderSelect }), _jsxs("p", { className: "text-center text-xs text-fg-muted", children: ["You will be redirected to ", activeProvider.label, " to complete sign in."] })] })), !pendingChallenge && showCredentialsForm && (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-5", children: [showBackLink && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "-ml-2 h-8 px-2 text-fg-secondary", icon: _jsx(ArrowLeft, { className: "h-4 w-4" }), onClick: () => {
+                                            setSelectedProvider(null);
+                                            setError(null);
+                                            setCredentials({ email: '', password: '' });
+                                        }, children: t('core:auth.back_to_options') })), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", required: true, children: t('core:auth.email') }), _jsx(Input, { id: "email", type: "email", required: true, value: credentials.email, onChange: e => setCredentials({ ...credentials, email: e.target.value }), placeholder: t('core:auth.email_placeholder'), autoComplete: "email", autoFocus: true })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "password", required: true, children: t('core:auth.password') }), _jsx(Input, { id: "password", type: "password", required: true, value: credentials.password, onChange: e => setCredentials({ ...credentials, password: e.target.value }), placeholder: t('core:auth.password_placeholder'), autoComplete: "current-password" })] }), _jsx(Button, { type: "submit", loading: submitting, className: "w-full h-11", children: t('core:auth.sign_in') })] })), !pendingChallenge && !showProviderPicker && !showOAuthPrompt && !showCredentialsForm && (_jsx("p", { className: "text-center text-sm text-fg-secondary", children: t('core:auth.no_providers') }))] }), _jsx(Slot, { name: "login.belowForm", as: "div", className: "mt-6 space-y-4 empty:hidden" }), _jsx("div", { className: "mt-6 flex justify-center", children: _jsx(LocaleSwitcher, {}) })] })] }));
+}

package/dist/auth/ProtectedRoute.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ProtectedRouteProps {
+    children: React.ReactNode;
+    apiBaseUrl: string;
+    fallback?: React.ReactNode;
+}
+/**
+ * ProtectedRoute - Wraps content that requires authentication
+ * Shows LoginPage if not authenticated, otherwise shows children
+ */
+export declare function ProtectedRoute({ children, apiBaseUrl, fallback }: ProtectedRouteProps): React.JSX.Element;
+export {};

package/dist/auth/ProtectedRoute.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAuth } from './AuthContext';
+import { Loader2 } from 'lucide-react';
+import { LoginPage } from './LoginPage';
+import { translate } from '../i18n/activeLocale';
+/**
+ * ProtectedRoute - Wraps content that requires authentication
+ * Shows LoginPage if not authenticated, otherwise shows children
+ */
+export function ProtectedRoute({ children, apiBaseUrl, fallback }) {
+    const { user, loading } = useAuth();
+    if (loading) {
+        return (_jsx("div", { className: "min-h-screen bg-base flex items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx(Loader2, { className: "w-12 h-12 text-accent animate-spin mx-auto" }), _jsx("p", { className: "mt-4 text-fg-secondary", children: translate('core:common.loading_ellipsis') })] }) }));
+    }
+    if (!user) {
+        if (fallback) {
+            return _jsx(_Fragment, { children: fallback });
+        }
+        return _jsx(LoginPage, { apiBaseUrl: apiBaseUrl });
+    }
+    return _jsx(_Fragment, { children: children });
+}

package/dist/auth/authApiClient.d.ts

@@ -0,0 +1,24 @@
+import { AuthUser, AuthProvider, AuthTokens, LoginCredentials, LoginResult } from './types';
+/**
+ * API client for authentication endpoints.
+ * Tokens are managed via HTTP-only cookies set by the server — no localStorage involved.
+ */
+export declare class AuthApiClient {
+    private apiBaseUrl;
+    constructor(apiBaseUrl: string);
+    getProviders(): Promise<AuthProvider[]>;
+    /**
+     * Attempt login. Returns a discriminated result: `authenticated` (session cookie set)
+     * or `challenge` (a verification step like 2FA is required before tokens are issued).
+     */
+    login(provider: string, credentials: LoginCredentials): Promise<LoginResult>;
+    /**
+     * Respond to a pending login challenge. Returns the next `LoginResult` — either
+     * `authenticated` (all steps cleared) or another `challenge` (chained step).
+     */
+    verifyChallenge(challengeToken: string, type: string, payload: unknown): Promise<LoginResult>;
+    getCurrentUser(): Promise<AuthUser | null>;
+    refreshToken(): Promise<AuthTokens | null>;
+    logout(): Promise<void>;
+    getAuthHeaders(): HeadersInit;
+}

package/dist/auth/authApiClient.js

@@ -0,0 +1,95 @@
+/**
+ * API client for authentication endpoints.
+ * Tokens are managed via HTTP-only cookies set by the server — no localStorage involved.
+ */
+export class AuthApiClient {
+    constructor(apiBaseUrl) {
+        this.apiBaseUrl = apiBaseUrl;
+    }
+    async getProviders() {
+        const response = await fetch(`${this.apiBaseUrl}/auth/providers`, {
+            credentials: 'include',
+        });
+        if (!response.ok) {
+            throw new Error('Failed to fetch providers');
+        }
+        const data = await response.json();
+        return data.providers || [];
+    }
+    /**
+     * Attempt login. Returns a discriminated result: `authenticated` (session cookie set)
+     * or `challenge` (a verification step like 2FA is required before tokens are issued).
+     */
+    async login(provider, credentials) {
+        const response = await fetch(`${this.apiBaseUrl}/auth/login`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({ provider, ...credentials }),
+        });
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Login failed');
+        }
+        return response.json();
+    }
+    /**
+     * Respond to a pending login challenge. Returns the next `LoginResult` — either
+     * `authenticated` (all steps cleared) or another `challenge` (chained step).
+     */
+    async verifyChallenge(challengeToken, type, payload) {
+        const response = await fetch(`${this.apiBaseUrl}/auth/challenge`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({ challengeToken, type, payload }),
+        });
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Verification failed');
+        }
+        return response.json();
+    }
+    async getCurrentUser() {
+        const response = await fetch(`${this.apiBaseUrl}/auth/me`, {
+            credentials: 'include',
+        });
+        if (!response.ok) {
+            if (response.status === 401) {
+                const error = new Error('Unauthorized');
+                error.status = 401;
+                throw error;
+            }
+            throw new Error('Failed to get current user');
+        }
+        const data = await response.json();
+        return data.user || null;
+    }
+    async refreshToken() {
+        const response = await fetch(`${this.apiBaseUrl}/auth/refresh`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({}),
+        });
+        if (!response.ok) {
+            return null;
+        }
+        const data = await response.json();
+        return data.tokens || null;
+    }
+    async logout() {
+        try {
+            await fetch(`${this.apiBaseUrl}/auth/logout`, {
+                method: 'POST',
+                credentials: 'include',
+            });
+        }
+        catch {
+            // Ignore errors — server-side cookie clearing is best-effort
+        }
+    }
+    getAuthHeaders() {
+        return {};
+    }
+}

package/dist/auth/types.d.ts

@@ -0,0 +1,103 @@
+import type { ComponentType } from 'react';
+/**
+ * Authenticated user interface
+ */
+export interface AuthUser {
+    /** Unique identifier */
+    id: string;
+    /** Email address */
+    email: string;
+    /** Display name */
+    name?: string;
+    /** Role/title (e.g., 'admin', 'editor') */
+    role?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Preferred theme */
+    theme?: string;
+    /** Provider-specific metadata */
+    _auth?: Record<string, any>;
+    /** Additional custom fields */
+    [key: string]: any;
+}
+/**
+ * Authentication provider configuration
+ */
+export interface AuthProvider {
+    /** Provider name */
+    name: string;
+    /** Display label */
+    label: string;
+    /** Icon name (Lucide) */
+    icon?: string;
+    /** Provider type */
+    type: 'credentials' | 'oauth';
+    /** Button styling */
+    buttonStyle?: {
+        backgroundColor?: string;
+        textColor?: string;
+        borderColor?: string;
+    };
+    /** Required fields for credentials type */
+    fields?: string[];
+}
+/**
+ * Authentication tokens
+ */
+export interface AuthTokens {
+    /** JWT access token */
+    accessToken: string;
+    /** JWT refresh token */
+    refreshToken: string;
+    /** Access token expiration in seconds */
+    expiresIn: number;
+}
+/**
+ * Login credentials
+ */
+export interface LoginCredentials {
+    email: string;
+    password: string;
+}
+/**
+ * A pending login challenge returned by the server (e.g. 2FA). The `challengeToken` is an
+ * opaque continuation token the client must echo back to `/auth/challenge` — never decode
+ * it for trust decisions. `data` carries non-secret hints for the challenge UI.
+ */
+export interface PendingChallenge {
+    type: string;
+    challengeToken: string;
+    data?: unknown;
+}
+/**
+ * Discriminated result of a login attempt or a challenge verification, mirroring the
+ * backend `LoginResult`. `authenticated` → the session cookie is set; `challenge` → one or
+ * more steps remain and no session cookie was set.
+ */
+export type LoginResult = {
+    status: 'authenticated';
+    user: AuthUser;
+    tokens: {
+        expiresIn: number;
+    };
+} | {
+    status: 'challenge';
+    challenge: PendingChallenge;
+};
+/**
+ * Props passed to a challenge UI component registered under `authChallenges`.
+ */
+export interface AuthChallengeProps {
+    /** Non-secret data sent by the server with the challenge. */
+    data?: unknown;
+    /** Submit the user's response; resolves when verified (or rejects on error). */
+    onSubmit: (payload: unknown) => Promise<void>;
+    /** Abandon the challenge and return to the login form. */
+    onCancel: () => void;
+    /** Verification error to display, if any. */
+    error?: string | null;
+    /** Whether a verification request is in flight. */
+    submitting?: boolean;
+}
+/** A React component that renders a challenge step. */
+export type AuthChallengeComponent = ComponentType<AuthChallengeProps>;

package/dist/auth/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ActionFormModal.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SerializedForm } from '@maxal_studio/kratosjs';
+export interface ActionFormModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    actionName: string;
+    actionLabel?: string;
+    formSchema: SerializedForm;
+    recordIds: string[];
+    isBulk?: boolean;
+    requiresConfirmation?: boolean;
+    modalDescription?: string;
+    apiBaseUrl: string;
+    resourceSlug: string;
+    onSuccess?: () => void;
+    depth?: number;
+    onCloseAll?: () => void;
+}
+/**
+ * Thin wrapper over ResourceFormModal for actions that collect form input.
+ */
+export declare function ActionFormModal(props: ActionFormModalProps): React.JSX.Element;

package/dist/components/ActionFormModal.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ResourceFormModal } from './modals/ResourceFormModal';
+/**
+ * Thin wrapper over ResourceFormModal for actions that collect form input.
+ */
+export function ActionFormModal(props) {
+    return (_jsx(ResourceFormModal, { isOpen: props.isOpen, onClose: props.onClose, mode: "action", resourceSlug: props.resourceSlug, apiBaseUrl: props.apiBaseUrl, formSchema: props.formSchema, recordIds: props.recordIds, actionName: props.actionName, actionLabel: props.actionLabel, isBulk: props.isBulk, requiresConfirmation: props.requiresConfirmation, modalDescription: props.modalDescription, onSuccess: props.onSuccess, depth: props.depth, onCloseAll: props.onCloseAll }));
+}

package/dist/components/AdminPanel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AdminPanelProps } from '../types';
+export interface PageMetadata {
+    slug: string;
+    label: string;
+    icon?: string;
+    navigationGroup?: string;
+    navigationSort?: number;
+    hidden?: boolean;
+}
+export declare function AdminPanel({ apiBaseUrl, panelId, customFields, customColumns, customWidgets, customBlocks, customAuthChallenges, customSlots, i18nConfig, }: AdminPanelProps): React.JSX.Element;