@djangocfg/layouts 2.1.580 → 2.1.581

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.580",
+  "version": "2.1.581",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -90,11 +90,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.580",
-    "@djangocfg/api": "^2.1.580",
-    "@djangocfg/devtools": "^2.1.580",
-    "@djangocfg/i18n": "^2.1.580",
-    "@djangocfg/ui-core": "^2.1.580",
+    "@djangocfg/analytics": "^2.1.581",
+    "@djangocfg/api": "^2.1.581",
+    "@djangocfg/devtools": "^2.1.581",
+    "@djangocfg/i18n": "^2.1.581",
+    "@djangocfg/ui-core": "^2.1.581",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,12 +124,12 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.580",
-    "@djangocfg/api": "^2.1.580",
-    "@djangocfg/devtools": "^2.1.580",
-    "@djangocfg/i18n": "^2.1.580",
-    "@djangocfg/typescript-config": "^2.1.580",
-    "@djangocfg/ui-core": "^2.1.580",
+    "@djangocfg/analytics": "^2.1.581",
+    "@djangocfg/api": "^2.1.581",
+    "@djangocfg/devtools": "^2.1.581",
+    "@djangocfg/i18n": "^2.1.581",
+    "@djangocfg/typescript-config": "^2.1.581",
+    "@djangocfg/ui-core": "^2.1.581",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -7,7 +7,8 @@
  * - `centered` — Apple-style frameless, centered, glow background
  * - `split` — Two-column frosted card on desktop, single-column on mobile
  *
- * Supports: email/phone OTP, OAuth (GitHub), 2FA (TOTP + backup codes)
+ * Supports: email/phone OTP, OAuth (GitHub). A 2FA challenge opens as a dialog
+ * over the page (`TwoFactorChallengeDialog`), not as a step of this layout.
  */
 
 'use client';
@@ -19,9 +20,10 @@ import { useAnalytics } from '@djangocfg/analytics';
 import { useAppT } from '@djangocfg/i18n';
 
 import { Suspense } from '../../components';
+import { TwoFactorChallengeDialog } from '../../snippets/TwoFactor';
 import { AuthBrandPanel } from './components/shared';
 import { OAuthCallback } from './components/oauth';
-import { IdentifierStep, OTPStep, TwoFactorStep } from './components/steps';
+import { IdentifierStep, OTPStep } from './components/steps';
 import { AUTH } from './constants';
 import { AuthFormProvider, useAuthFormContext } from './context';
 import { AuthShell } from './shells';
@@ -80,6 +82,7 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
     // resolved routes.defaultCallback chain at navigation time (AuthSuccess).
     redirectUrl,
     onOAuthSuccess,
+    onOTPSuccess,
     onError,
     className,
     children,
@@ -130,6 +133,7 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
           {/* Full-screen success overlay */}
           <AuthSuccessOverlay />
           <AuthFunnelTracker />
+          <AuthTwoFactorChallenge onVerified={onOTPSuccess} />
 
           <AuthShell variant={variant} mediaSide={mediaSide} background={background} sidebar={resolvedSidebar} className={className}>
             {/* Handle OAuth callback when GitHub auth is enabled */}
@@ -165,13 +169,31 @@ const AuthFunnelTracker: React.FC = memo(function AuthFunnelTracker() {
   return null;
 });
 
-/** Renders custom children only on the identifier step — hides them on otp / 2fa / etc. */
+/** Renders custom children only on the identifier step. */
 const AuthHeaderSlot: React.FC<{ children?: React.ReactNode }> = memo(function AuthHeaderSlot({ children }) {
   const { step } = useAuthFormContext();
   if (!children || step !== 'identifier') return null;
   return <>{children}</>;
 });
 
+/** Wires the challenge dialog to the form: success shows the success screen, cancel restarts sign-in. */
+const AuthTwoFactorChallenge: React.FC<{ onVerified?: () => void }> = memo(function AuthTwoFactorChallenge({ onVerified }) {
+  const { setStep, setOtp, handleBackToIdentifier } = useAuthFormContext();
+
+  const handleVerified = React.useCallback(() => {
+    setStep('success');
+    onVerified?.();
+  }, [setStep, onVerified]);
+
+  // The email code is spent by now, so going back to it would only fail.
+  const handleCancel = React.useCallback(() => {
+    setOtp('');
+    handleBackToIdentifier();
+  }, [setOtp, handleBackToIdentifier]);
+
+  return <TwoFactorChallengeDialog onVerified={handleVerified} onCancel={handleCancel} />;
+});
+
 const AuthContent: React.FC = memo(function AuthContent() {
   const { step } = useAuthFormContext();
 
@@ -180,10 +202,6 @@ const AuthContent: React.FC = memo(function AuthContent() {
       return <IdentifierStep />;
     case 'otp':
       return <OTPStep />;
-    case '2fa':
-      // Sign-in verifies an *existing* 2FA challenge only. Setting up 2FA is
-      // owned by ProfileLayout, so the flow never renders the setup step.
-      return <TwoFactorStep />;
     case 'success':
       // Success is rendered as full-screen overlay, return null here
       return null;

package/src/layouts/AuthLayout/README.md

@@ -68,8 +68,8 @@ asset swap.
 <AuthLayout logo={<BrandMark className="text-foreground" />} … />
 ```
 
-Supports: email OTP, phone OTP, GitHub OAuth, and **verifying** an existing 2FA
-challenge (TOTP + backup codes).
+Supports: email OTP, phone OTP and GitHub OAuth. A 2FA challenge is not part of
+this layout — see below.
 
 **Consent, not a checkbox.** There is no opt-in terms checkbox — continuing *is*
 the consent. When `termsUrl`/`privacyUrl` are set, a passive line ("By continuing
@@ -77,11 +77,20 @@ you agree to the Terms and Privacy Policy") renders under the submit button with
 links that open in a new tab. The copy is intentionally hardcoded English (legal
 document names stay in English across locales) — see `shared/AuthConsent`.
 
-> **2FA setup is not part of the sign-in flow.** Authentication only verifies
-> identity — it checks the OTP and, if the account already has 2FA, prompts for
-> the TOTP/backup code. *Configuring* 2FA (QR + backup codes) lives in
-> **ProfileLayout** (`TwoFactorSection`). The sign-in flow never shows a setup
-> prompt.
+> **2FA is not a step of the sign-in flow.** When a sign-in step (OTP, password,
+> OAuth callback) receives `requires_2fa`, it calls `beginTwoFactorChallenge` from
+> `@djangocfg/api/auth` and nothing more. `TwoFactorChallengeDialog`
+> (`snippets/TwoFactorDialog`, mounted by `AuthLayout`) opens over the page and
+> owns code entry, the backup-code fallback and lockout hints. The form holds no
+> 2FA state. *Configuring* 2FA (QR + backup codes) is `TwoFactorSetup`, used by
+> **SettingsLayout** (`TwoFactorSection`); both live in `snippets/TwoFactor`.
+
+**Fast code screen.** Submitting the email opens the code screen immediately and
+rolls back to the identifier step if the request fails. The resend link counts
+down from the server's `resend_in` (30s fallback).
+
+**Remembered by default.** Sign-ins last 30 days; `rememberMe={{ enabled: true }}`
+adds a checkbox for apps that want the choice.
 
 ## Usage
 
@@ -180,15 +189,10 @@ The sign-in flow walks these steps:
 |---|---|
 | `identifier` | Email or phone input |
 | `otp` | 4-digit email OTP code entry |
-| `2fa` | TOTP or backup code verification (only if the account already has 2FA) |
 | `success` | Full-screen confirmation → redirect (see below) |
 
 `children` (custom header) are only rendered on the `identifier` step — hidden on all others.
 
-> The `AuthStep` union also includes `'2fa-setup'`, but the sign-in flow never
-> transitions to it. That value backs the standalone setup UI (`SetupStep` /
-> `SetupStepStandalone`) which **ProfileLayout** reuses for configuring 2FA.
-
 ## The success screen
 
 A checkmark, the outcome, and what the wait is for:

package/src/layouts/AuthLayout/components/index.ts

@@ -1,8 +1,6 @@
 // Apple-style step components
 export { IdentifierStep } from './steps/IdentifierStep';
 export { OTPStep } from './steps/OTPStep';
-export { TwoFactorStep } from './steps/TwoFactorStep';
-export { SetupStep, type SetupStepProps } from './steps/SetupStep';
 
 // Shared UI components
 export * from './shared';

package/src/layouts/AuthLayout/components/oauth/OAuthCallback.tsx

@@ -4,7 +4,7 @@ import { AlertCircle, Loader2 } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
 import React, { memo, useEffect, useState } from 'react';
 
-import { useAuth, useGithubAuth } from '@djangocfg/api/auth';
+import { beginTwoFactorChallenge, useAuth, useGithubAuth } from '@djangocfg/api/auth';
 import {
     Card, CardContent, CardDescription, CardHeader, CardTitle
 } from '@djangocfg/ui-core/components';
@@ -18,7 +18,7 @@ export interface OAuthCallbackProps {
   redirectUrl?: string;
 }
 
-type CallbackStatus = 'processing' | 'error';
+type CallbackStatus = 'processing' | 'error' | 'challenge';
 
 /**
  * OAuth Callback Handler Component
@@ -60,7 +60,7 @@ function OAuthCallbackRaw({
 }: OAuthCallbackProps) {
   const searchParams = useSearchParams();
   const { routes } = useAuth();
-  const { setStep, setTwoFactorSessionId, setShouldPrompt2FA } = useAuthFormContext();
+  const { setStep } = useAuthFormContext();
   const [status, setStatus] = useState<CallbackStatus | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
@@ -85,11 +85,10 @@ function OAuthCallbackRaw({
       setErrorMessage(err);
       onError?.(err);
     },
-    onRequires2FA: (sessionId, shouldPrompt) => {
-      // Handle 2FA requirement
-      setTwoFactorSessionId(sessionId);
-      setShouldPrompt2FA(shouldPrompt);
-      setStep('2fa');
+    onRequires2FA: (sessionId) => {
+      // The dialog needs the page; this overlay would cover it.
+      setStatus('challenge');
+      beginTwoFactorChallenge({ sessionId });
     },
     redirectUrl,
     skipRedirect: true, // We handle navigation via success screen
@@ -129,7 +128,7 @@ function OAuthCallbackRaw({
   }, [provider, code, state, error]);
 
   // Don't render if not an OAuth callback
-  if (!provider || (!code && !error)) {
+  if (!provider || (!code && !error) || status === 'challenge') {
     return null;
   }
 

package/src/layouts/AuthLayout/components/shared/AuthOTPInput.tsx

@@ -19,7 +19,7 @@ export interface AuthOTPInputProps {
 /**
  * AuthOTPInput - Reusable OTP input with consistent styling.
  *
- * Used in: OTPStep (email, 4 digits), TwoFactorStep (TOTP, 6 digits), SetupStep (TOTP, 6 digits).
+ * Used in: OTPStep (email, 4 digits).
  *
  * Memoised: re-renders only when value, disabled, autoFocus, size or length
  * change. `onChange` and `onComplete` are compared by reference — callers

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -156,7 +156,7 @@ function IdentifierStepRaw() {
           </label>
         )}
 
-        {rememberMeConfig?.enabled !== false && (
+        {rememberMeConfig?.enabled && (
           <label className="auth-optin">
             <Checkbox
               checked={rememberMe}

package/src/layouts/AuthLayout/components/steps/OTPStep.tsx

@@ -39,6 +39,8 @@ function OTPStepRaw() {
     error,
     isRateLimited,
     rateLimitLabel,
+    resendSeconds,
+    resendLabel,
     webmail,
     setOtp,
     handleOTPSubmit,
@@ -78,6 +80,9 @@ function OTPStepRaw() {
     return `${local[0]}${'*'.repeat(Math.min(local.length - 1, 5))}@${domain}`;
   }, [identifier]);
 
+  const waitLabel = isRateLimited ? rateLimitLabel : resendLabel;
+  const resendLabelText = waitLabel ? `${content.resend} (${waitLabel})` : content.resend;
+
   const autoSubmitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(
@@ -152,8 +157,11 @@ function OTPStepRaw() {
         </AuthButton>
 
         <div className="auth-actions">
-          <AuthLink onClick={handleResendOTP} disabled={isLoading || isRateLimited}>
-            {isRateLimited ? `${content.resend} (${rateLimitLabel})` : content.resend}
+          <AuthLink
+            onClick={handleResendOTP}
+            disabled={isLoading || isRateLimited || resendSeconds > 0}
+          >
+            {resendLabelText}
           </AuthLink>
           <AuthLink onClick={handleBackToIdentifier} disabled={isLoading}>
             {content.changeEmail}

package/src/layouts/AuthLayout/components/steps/index.ts

@@ -1,6 +1,3 @@
 export { IdentifierStep } from './IdentifierStep';
 export { OTPStep } from './OTPStep';
-export { TwoFactorStep } from './TwoFactorStep';
-export { SetupStep } from './SetupStep';
 
-export type { SetupStepProps } from './SetupStep';

package/src/layouts/AuthLayout/constants.ts

@@ -31,10 +31,6 @@ export const AUTH = {
   HOME_URL: '/',
   ANIMATION_DURATION: 400,
   AUTO_SUBMIT_DELAY: 100,
-  COPY_FEEDBACK_DURATION: 2000,
   REDIRECT_DELAY: 1500,
   ANIMATION_START_DELAY: 50,
-
-  // Sizes (px)
-  QR_CODE_SIZE: 160,
 } as const;

package/src/layouts/AuthLayout/index.ts

@@ -21,9 +21,6 @@ export {
 export {
   IdentifierStep,
   OTPStep,
-  TwoFactorStep,
-  SetupStep,
-  type SetupStepProps,
   OAuthCallback,
   type OAuthCallbackProps,
 } from './components';

package/src/layouts/AuthLayout/styles/auth.css

@@ -561,70 +561,6 @@ a.auth-logo:focus-visible {
   width: 100%;
 }
 
-/* ===== QR CODE ===== */
-
-.auth-qr-container {
-  display: flex;
-  justify-content: center;
-  padding: 0.75rem 0;
-}
-
-.auth-qr {
-  padding: 0.875rem;
-  background: white;
-  border-radius: var(--auth-radius);
-  box-shadow: 0 2px 12px hsl(0 0% 0% / 0.1);
-}
-
-.auth-collapsible-centered {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/* ===== SECRET CODE ===== */
-
-.auth-secret-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-}
-
-.auth-secret {
-  padding: 0.5rem 0.875rem;
-  font-family: ui-monospace, 'SF Mono', monospace;
-  font-size: 0.8125rem;
-  letter-spacing: 0.08em;
-  background: var(--muted);
-  border-radius: var(--auth-radius-xs);
-  color: var(--foreground);
-  word-break: break-all;
-  text-align: center;
-}
-
-/* ===== BACKUP CODES ===== */
-
-.auth-backup-codes {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.375rem;
-  padding: 0.875rem;
-  background: color-mix(in oklab, var(--muted) 40%, transparent);
-  border: 1px dashed var(--border);
-  border-radius: var(--auth-radius-sm);
-}
-
-.auth-backup-code {
-  font-family: ui-monospace, 'SF Mono', monospace;
-  font-size: 0.8125rem;
-  letter-spacing: 0.05em;
-  text-align: center;
-  padding: 0.375rem;
-  color: var(--foreground);
-}
-
 /* ===== SUCCESS OVERLAY ===== */
 
 .auth-success-overlay {
@@ -716,44 +652,6 @@ a.auth-logo:focus-visible {
   color: var(--muted-foreground);
 }
 
-/* ===== 2FA BOX ===== */
-
-.auth-2fa-box {
-  padding: 1.5rem 1.25rem 1.25rem;
-  background: var(--card, color-mix(in oklab, var(--muted) 25%, transparent));
-  border: 1px solid var(--border);
-  border-radius: var(--auth-radius);
-  box-shadow:
-    0 2px 12px hsl(0 0% 0% / 0.08),
-    0 0 0 1px color-mix(in oklab, var(--border) 40%, transparent) inset;
-  display: flex;
-  flex-direction: column;
-  gap: 1.125rem;
-}
-
-.auth-2fa-shield {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.75rem;
-  height: 2.75rem;
-  margin: 0 auto;
-  border-radius: 50%;
-  background: color-mix(in oklab, var(--primary) 10%, transparent);
-  color: var(--primary);
-  animation: authLogoIn 0.5s var(--spring-bounce) both;
-}
-
-.auth-2fa-shield svg {
-  width: 1.375rem;
-  height: 1.375rem;
-}
-
-.auth-2fa-box .auth-actions {
-  flex-wrap: wrap;
-  row-gap: 0.625rem;
-}
-
 /* ===== DEV NOTICE ===== */
 
 /* Uses the shared warning surface tokens (defined for both themes) instead of
@@ -771,14 +669,6 @@ a.auth-logo:focus-visible {
 
 /* ===== INSTRUCTION ===== */
 
-.auth-instruction {
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--muted-foreground);
-  text-align: center;
-  margin: 0;
-}
-
 /* ===== RESPONSIVE ===== */
 
 @media (max-width: 480px) {

package/src/layouts/AuthLayout/types.ts

@@ -50,9 +50,12 @@ export interface AuthMarketingConsentConfig {
   defaultChecked?: boolean;
 }
 
-/** Persistent-login checkbox on the identifier step. */
+/**
+ * Persistent-login checkbox on the identifier step. Sign-ins are remembered for
+ * 30 days by default; the checkbox only exists for apps that want the choice.
+ */
 export interface AuthRememberMeConfig {
-  /** Render the checkbox. Default: true. */
+  /** Render the checkbox, checked by default. Default: false (always remembered). */
   enabled?: boolean;
   /** Checkbox label. Default: "Keep me signed in for 30 days". */
   label?: React.ReactNode;

package/src/layouts/SettingsLayout/components/TwoFactorSection/TwoFactorSection.tsx

@@ -16,7 +16,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { SetupStepStandalone } from '../../../AuthLayout/components/steps/SetupStep';
+import { TwoFactorSetup } from '../../../../snippets/TwoFactor';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -180,7 +180,7 @@ export const TwoFactorSection: React.FC = () => {
           </Button>
         </div>
         <div className="flex justify-center py-2">
-          <SetupStepStandalone
+          <TwoFactorSetup
             onComplete={handleSetupDone}
             onSkip={() => setView('status')}
           />

package/src/layouts/_components/locale-switcher/LocaleSwitcherDropdown.tsx

@@ -13,6 +13,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { ICON_FLAG_CLASS } from './iconFlag';
 import { getLocaleMeta } from './localeMeta';
 import type { LocaleSwitcherSharedProps } from './types';
 
@@ -57,7 +58,7 @@ export function LocaleSwitcherDropdown({
             className={cn('overflow-hidden rounded-full p-0', className)}
           >
             {showFlag ? (
-              <LanguageFlag code={locale} className="h-full w-full object-cover" />
+              <LanguageFlag code={locale} rounded className={ICON_FLAG_CLASS} />
             ) : (
               <Globe className="h-4 w-4" aria-hidden />
             )}

package/src/layouts/_components/locale-switcher/LocaleSwitcherTrigger.tsx

@@ -6,6 +6,7 @@ import { Globe } from 'lucide-react';
 import { Button, LanguageFlag } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { ICON_FLAG_CLASS } from './iconFlag';
 import { getLocaleMeta } from './localeMeta';
 
 export interface LocaleSwitcherTriggerProps {
@@ -50,8 +51,7 @@ export const LocaleSwitcherTrigger = React.forwardRef<
   const labelText = showCode ? locale.toUpperCase() : meta.native;
   const isIconOnly = size === 'icon';
 
-  // Icon-only trigger: full-bleed flag inside a circular pill that lines up
-  // with neighbouring avatars / icon buttons. No padding, no inner gap.
+  // Icon-only trigger: a fixed-size flag centred in the button.
   if (isIconOnly) {
     return (
       <Button
@@ -69,7 +69,8 @@ export const LocaleSwitcherTrigger = React.forwardRef<
         {showFlag ? (
           <LanguageFlag
             code={locale}
-            className="h-full w-full object-cover"
+            rounded
+            className={ICON_FLAG_CLASS}
           />
         ) : (
           <Globe className="h-4 w-4" aria-hidden />

package/src/layouts/_components/locale-switcher/iconFlag.ts

@@ -0,0 +1,5 @@
+/**
+ * Flag size inside an icon-only trigger. Fixed on purpose: presets stretch the
+ * button (44px touch targets), and a flag sized from it would be cropped and oversized.
+ */
+export const ICON_FLAG_CLASS = 'h-[18px] w-6 shrink-0';