@djangocfg/layouts 2.1.411 → 2.1.413

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.411",
+  "version": "2.1.413",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -70,6 +70,11 @@
       "import": "./src/configurator/private/index.ts",
       "require": "./src/configurator/private/index.ts"
     },
+    "./testing": {
+      "types": "./src/testing/index.ts",
+      "import": "./src/testing/index.ts",
+      "require": "./src/testing/index.ts"
+    },
     "./styles": "./src/styles/index.css",
     "./styles/dashboard": "./src/styles/dashboard.css"
   },
@@ -84,13 +89,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.411",
-    "@djangocfg/centrifugo": "^2.1.411",
-    "@djangocfg/debuger": "^2.1.411",
-    "@djangocfg/i18n": "^2.1.411",
-    "@djangocfg/monitor": "^2.1.411",
-    "@djangocfg/ui-core": "^2.1.411",
-    "@djangocfg/ui-nextjs": "^2.1.411",
+    "@djangocfg/api": "^2.1.413",
+    "@djangocfg/centrifugo": "^2.1.413",
+    "@djangocfg/debuger": "^2.1.413",
+    "@djangocfg/i18n": "^2.1.413",
+    "@djangocfg/monitor": "^2.1.413",
+    "@djangocfg/ui-core": "^2.1.413",
+    "@djangocfg/ui-nextjs": "^2.1.413",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -121,15 +126,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.411",
-    "@djangocfg/centrifugo": "^2.1.411",
-    "@djangocfg/debuger": "^2.1.411",
-    "@djangocfg/i18n": "^2.1.411",
-    "@djangocfg/monitor": "^2.1.411",
-    "@djangocfg/typescript-config": "^2.1.411",
-    "@djangocfg/ui-core": "^2.1.411",
-    "@djangocfg/ui-nextjs": "^2.1.411",
-    "@djangocfg/ui-tools": "^2.1.411",
+    "@djangocfg/api": "^2.1.413",
+    "@djangocfg/centrifugo": "^2.1.413",
+    "@djangocfg/debuger": "^2.1.413",
+    "@djangocfg/i18n": "^2.1.413",
+    "@djangocfg/monitor": "^2.1.413",
+    "@djangocfg/typescript-config": "^2.1.413",
+    "@djangocfg/ui-core": "^2.1.413",
+    "@djangocfg/ui-nextjs": "^2.1.413",
+    "@djangocfg/ui-tools": "^2.1.413",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/errors/ErrorBoundary.tsx

@@ -23,6 +23,8 @@ interface ErrorBoundaryState {
 }
 
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  private handlePopState: (() => void) | null = null;
+
   constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -33,17 +35,36 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Call custom error handler if provided
     if (this.props.onError) {
       this.props.onError(error, errorInfo);
     }
 
-    // Log to console in development
     if (isDev) {
       console.error('ErrorBoundary caught an error:', error, errorInfo);
     }
   }
 
+  componentDidUpdate(_prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState) {
+    if (this.state.hasError && !prevState.hasError) {
+      this.handlePopState = () => {
+        window.location.reload();
+      };
+      window.addEventListener('popstate', this.handlePopState);
+    } else if (!this.state.hasError && prevState.hasError) {
+      if (this.handlePopState) {
+        window.removeEventListener('popstate', this.handlePopState);
+        this.handlePopState = null;
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.handlePopState) {
+      window.removeEventListener('popstate', this.handlePopState);
+      this.handlePopState = null;
+    }
+  }
+
   render() {
     if (this.state.hasError) {
       const title = getT('layouts.errors.somethingWentWrong');

package/src/components/errors/ErrorLayout.tsx

@@ -258,10 +258,9 @@ export function ErrorLayout({
   const handleGoBack = () => {
     if (document.referrer && document.referrer !== window.location.href) {
       window.location.href = document.referrer;
-    } else if (window.history.length > 1) {
-      window.history.back();
     } else {
-      window.location.href = '/';
+      window.history.back();
+      setTimeout(() => window.location.reload(), 100);
     }
   };
 

package/src/layouts/AuthLayout/context.tsx

@@ -6,7 +6,9 @@ import { useAuthForm } from '@djangocfg/api/auth';
 
 import type { AuthFormContextType, AuthLayoutProps } from './types';
 
-const AuthFormContext = createContext<AuthFormContextType | undefined>(undefined);
+// Exported so test/mock providers (storybook) can supply their own value
+// without re-implementing AuthFormProvider end-to-end.
+export const AuthFormContext = createContext<AuthFormContextType | undefined>(undefined);
 
 /**
  * AuthFormProvider — wraps useAuthForm and merges UI config into context.

package/src/layouts/AuthLayout/shells/CenteredShell.tsx

@@ -2,22 +2,14 @@
 
 import React, { memo } from 'react';
 
-import { GlowBackground } from '@djangocfg/ui-core/components';
-
 import type { ShellRenderProps } from './types';
 
 /**
- * CenteredShell — Apple-style frameless auth layout.
- *
- * Features:
- * - Full viewport centering
- * - Glow background (default)
- * - Optional custom background image/gradient via shell props
- * - No visible card chrome
+ * CenteredShell — frameless auth layout, full viewport centering.
  *
- * Memoised: re-renders only when bgStyle/overlayStyle references or
- * children change. The background layer is cheap to recreate; the main
- * win is preserving the content subtree when parent re-renders.
+ * Default background is plain `var(--background)` — the form chrome
+ * carries the design. Callers can still supply a custom
+ * image/gradient/overlay via `bgStyle` / `overlayStyle`.
  */
 function CenteredShellRaw({
   children,
@@ -29,19 +21,15 @@ function CenteredShellRaw({
 
   return (
     <div className={`auth-shell-centered ${className || ''}`}>
-      {/* Background layer */}
-      {hasCustomBg ? (
+      {hasCustomBg && (
         <>
           <div className="auth-shell-centered__bg" style={bgStyle} />
           {overlayStyle && (
             <div className="auth-shell-centered__overlay" style={overlayStyle} />
           )}
         </>
-      ) : (
-        <GlowBackground />
       )}
 
-      {/* Content */}
       <div className="auth-shell-centered__content">
         {children}
       </div>

package/src/testing/MockAuthFormProvider.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import React, { useMemo, useRef, useState } from 'react';
+
+import type {
+  AuthFormReturn,
+  AuthStep,
+} from '@djangocfg/api/auth';
+
+import { AuthFormContext } from '../layouts/AuthLayout/context';
+import type { AuthFormContextType, AuthLayoutConfig } from '../layouts/AuthLayout/types';
+
+// Storybook-only provider. Reproduces the AuthFormContext shape with
+// in-memory state and no-op async handlers, so step components and the
+// full AuthLayout can be exercised without hitting @djangocfg/api/auth.
+
+export interface MockAuthFormProviderProps extends Partial<AuthLayoutConfig> {
+  children: React.ReactNode;
+
+  // Initial state — every field has a sensible default. Override per story.
+  step?: AuthStep;
+  identifier?: string;
+  otp?: string;
+  isLoading?: boolean;
+  acceptedTerms?: boolean;
+  error?: string;
+  twoFactorSessionId?: string | null;
+  shouldPrompt2FA?: boolean;
+  twoFactorCode?: string;
+  useBackupCode?: boolean;
+  rateLimitSeconds?: number;
+  is2FALoading?: boolean;
+  twoFactorWarning?: string | null;
+  twoFactorAttemptsRemaining?: number | null;
+}
+
+function formatRateLimit(seconds: number): string {
+  if (seconds <= 0) return '';
+  if (seconds >= 60) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${String(s).padStart(2, '0')}`;
+  }
+  return `${seconds}s`;
+}
+
+export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
+  children,
+
+  // Layout config
+  sourceUrl = 'https://example.com',
+  supportUrl,
+  termsUrl,
+  privacyUrl,
+  enableGithubAuth = false,
+  enable2FASetup = true,
+  logoUrl,
+  redirectUrl = '/dashboard',
+
+  // Initial state
+  step: initialStep = 'identifier',
+  identifier: initialIdentifier = '',
+  otp: initialOtp = '',
+  isLoading: initialLoading = false,
+  acceptedTerms: initialAcceptedTerms = false,
+  error: initialError = '',
+  twoFactorSessionId: initialTwoFactorSessionId = null,
+  shouldPrompt2FA: initialShouldPrompt2FA = false,
+  twoFactorCode: initialTwoFactorCode = '',
+  useBackupCode: initialUseBackupCode = false,
+  rateLimitSeconds: initialRateLimitSeconds = 0,
+  is2FALoading = false,
+  twoFactorWarning = null,
+  twoFactorAttemptsRemaining = null,
+}) => {
+  const [step, setStep] = useState<AuthStep>(initialStep);
+  const [identifier, setIdentifier] = useState(initialIdentifier);
+  const [otp, setOtp] = useState(initialOtp);
+  const [isLoading, setIsLoading] = useState(initialLoading);
+  const [acceptedTerms, setAcceptedTerms] = useState(initialAcceptedTerms);
+  const [error, setError] = useState(initialError);
+  const [twoFactorSessionId, setTwoFactorSessionId] = useState<string | null>(initialTwoFactorSessionId);
+  const [shouldPrompt2FA, setShouldPrompt2FA] = useState(initialShouldPrompt2FA);
+  const [twoFactorCode, setTwoFactorCode] = useState(initialTwoFactorCode);
+  const [useBackupCode, setUseBackupCode] = useState(initialUseBackupCode);
+  const [rateLimitSeconds, setRateLimitSeconds] = useState(initialRateLimitSeconds);
+
+  const isAutoSubmittingFromUrl = useRef(false);
+
+  const value: AuthFormContextType = useMemo(() => {
+    const stop = (e: React.FormEvent) => {
+      e.preventDefault?.();
+    };
+
+    return {
+      // State
+      identifier,
+      otp,
+      isLoading,
+      acceptedTerms,
+      step,
+      error,
+      twoFactorSessionId,
+      shouldPrompt2FA,
+      twoFactorCode,
+      useBackupCode,
+      rateLimitSeconds,
+      isRateLimited: rateLimitSeconds > 0,
+      rateLimitLabel: formatRateLimit(rateLimitSeconds),
+
+      // State handlers
+      setIdentifier,
+      setOtp,
+      setAcceptedTerms,
+      setError,
+      clearError: () => setError(''),
+      setStep,
+      setIsLoading,
+      setTwoFactorSessionId,
+      setShouldPrompt2FA,
+      setTwoFactorCode,
+      setUseBackupCode,
+      startRateLimitCountdown: (seconds: number) => setRateLimitSeconds(seconds),
+
+      // Submit handlers — all no-op (preventDefault only) so the visible
+      // step never changes from under the storyteller. To preview a
+      // different step, render a new story with `step="..."`.
+      handleIdentifierSubmit: async (e) => stop(e),
+      handleOTPSubmit: async (e) => stop(e),
+      handleResendOTP: async () => {},
+      handleBackToIdentifier: () => setStep('identifier'),
+      forceOTPStep: () => setStep('otp'),
+      handle2FASubmit: async (e) => stop(e),
+      handleUseBackupCode: () => setUseBackupCode(true),
+      handleUseTOTP: () => setUseBackupCode(false),
+
+      // Validation — accept anything that looks email-ish or 10+ digits.
+      validateIdentifier: (id: string) =>
+        /.+@.+\..+/.test(id) || /^\+?\d{10,}$/.test(id),
+
+      // Auto-submit ref
+      isAutoSubmittingFromUrl,
+
+      // 2FA state (read-only here; tests/stories override via props)
+      is2FALoading,
+      twoFactorWarning,
+      twoFactorAttemptsRemaining,
+
+      // Layout config
+      sourceUrl,
+      supportUrl,
+      termsUrl,
+      privacyUrl,
+      enableGithubAuth,
+      enable2FASetup,
+      logoUrl,
+      redirectUrl,
+    };
+  }, [
+    identifier,
+    otp,
+    isLoading,
+    acceptedTerms,
+    step,
+    error,
+    twoFactorSessionId,
+    shouldPrompt2FA,
+    twoFactorCode,
+    useBackupCode,
+    rateLimitSeconds,
+    is2FALoading,
+    twoFactorWarning,
+    twoFactorAttemptsRemaining,
+    sourceUrl,
+    supportUrl,
+    termsUrl,
+    privacyUrl,
+    enableGithubAuth,
+    enable2FASetup,
+    logoUrl,
+    redirectUrl,
+  ]);
+
+  return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;
+};

package/src/testing/MockAuthProvider.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+
+import {
+  AuthContext,
+  type AuthContextType,
+  type UserProfile,
+} from '@djangocfg/api/auth';
+
+// Storybook-only auth provider. Reproduces the AuthContext shape with
+// fixed in-memory values so components that call `useAuth()` (Profile,
+// PrivateLayout, etc.) can render without hitting the real auth API.
+
+export interface MockAuthProviderProps {
+  children: React.ReactNode;
+  user?: UserProfile | null;
+  isLoading?: boolean;
+  /** Override `isAuthenticated`. Defaults to `!!user`. */
+  isAuthenticated?: boolean;
+  /** Override `isAdminUser`. Defaults to `false`. */
+  isAdminUser?: boolean;
+}
+
+const noopAsync = async () => {};
+
+export function buildMockUser(overrides: Partial<UserProfile> = {}): UserProfile {
+  return {
+    id: 1,
+    email: 'jane.cooper@example.com',
+    username: 'jane.cooper',
+    first_name: 'Jane',
+    last_name: 'Cooper',
+    full_name: 'Jane Cooper',
+    is_active: true,
+    is_staff: false,
+    is_superuser: false,
+    date_joined: '2025-01-15T10:00:00Z',
+    last_login: '2026-05-20T14:30:00Z',
+    initials: 'JC',
+    display_username: 'jane.cooper',
+    company: null,
+    phone: null,
+    position: null,
+    unanswered_messages_count: 0,
+    avatar: null,
+    ...overrides,
+  } as UserProfile;
+}
+
+export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
+  children,
+  user: initialUser = buildMockUser(),
+  isLoading = false,
+  isAuthenticated,
+  isAdminUser = false,
+}) => {
+  const [user, setUser] = useState<UserProfile | null>(initialUser);
+
+  const value = useMemo<AuthContextType>(() => ({
+    user,
+    isLoading,
+    isAuthenticated: isAuthenticated ?? Boolean(user),
+    isAdminUser,
+
+    loadCurrentProfile: noopAsync,
+    checkAuthAndRedirect: noopAsync,
+
+    getToken: () => 'mock-access-token',
+    getRefreshToken: () => 'mock-refresh-token',
+
+    getSavedEmail: () => user?.email ?? null,
+    saveEmail: () => {},
+    clearSavedEmail: () => {},
+
+    requestOTP: async () => ({ success: true, message: 'mock' }),
+    verifyOTP: async () => ({ success: true, message: 'mock', user: user ?? undefined }),
+    refreshToken: async () => ({ success: true, message: 'mock' }),
+    logout: () => {},
+
+    saveRedirectUrl: () => {},
+    getRedirectUrl: () => '/dashboard',
+    clearRedirectUrl: () => {},
+    hasRedirectUrl: () => false,
+
+    // Edits update local state so the form reflects the change in
+    // Storybook just like a real backend round-trip would.
+    updateProfile: async (data) => {
+      const next = { ...(user ?? buildMockUser()), ...data } as UserProfile;
+      setUser(next);
+      return next;
+    },
+    uploadAvatar: async () => user ?? buildMockUser(),
+  }), [user, isLoading, isAuthenticated, isAdminUser]);
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};

package/src/testing/index.ts

@@ -0,0 +1,28 @@
+// Storybook / test-only helpers. Public consumers should NOT import
+// from this entrypoint in production code.
+
+export {
+  MockAuthFormProvider,
+  type MockAuthFormProviderProps,
+} from './MockAuthFormProvider';
+
+export {
+  MockAuthProvider,
+  buildMockUser,
+  type MockAuthProviderProps,
+} from './MockAuthProvider';
+
+// Auth step type, re-exported so storybook stories don't have to depend
+// on @djangocfg/api/auth directly.
+export type { AuthStep } from '@djangocfg/api/auth';
+
+// Re-export auth internals so storybook can mount step components
+// directly under MockAuthFormProvider without going through the full
+// AuthLayout (which mounts its own real AuthFormProvider).
+export { AuthShell } from '../layouts/AuthLayout/shells';
+export {
+  IdentifierStep,
+  OTPStep,
+  TwoFactorStep,
+  SetupStep,
+} from '../layouts/AuthLayout/components/steps';