@djangocfg/layouts 2.1.345 → 2.1.347

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.345",
+  "version": "2.1.347",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -84,13 +84,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.345",
-    "@djangocfg/centrifugo": "^2.1.345",
-    "@djangocfg/debuger": "^2.1.345",
-    "@djangocfg/i18n": "^2.1.345",
-    "@djangocfg/monitor": "^2.1.345",
-    "@djangocfg/ui-core": "^2.1.345",
-    "@djangocfg/ui-nextjs": "^2.1.345",
+    "@djangocfg/api": "^2.1.347",
+    "@djangocfg/centrifugo": "^2.1.347",
+    "@djangocfg/debuger": "^2.1.347",
+    "@djangocfg/i18n": "^2.1.347",
+    "@djangocfg/monitor": "^2.1.347",
+    "@djangocfg/ui-core": "^2.1.347",
+    "@djangocfg/ui-nextjs": "^2.1.347",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -120,15 +120,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.345",
-    "@djangocfg/centrifugo": "^2.1.345",
-    "@djangocfg/debuger": "^2.1.345",
-    "@djangocfg/i18n": "^2.1.345",
-    "@djangocfg/monitor": "^2.1.345",
-    "@djangocfg/typescript-config": "^2.1.345",
-    "@djangocfg/ui-core": "^2.1.345",
-    "@djangocfg/ui-nextjs": "^2.1.345",
-    "@djangocfg/ui-tools": "^2.1.345",
+    "@djangocfg/api": "^2.1.347",
+    "@djangocfg/centrifugo": "^2.1.347",
+    "@djangocfg/debuger": "^2.1.347",
+    "@djangocfg/i18n": "^2.1.347",
+    "@djangocfg/monitor": "^2.1.347",
+    "@djangocfg/typescript-config": "^2.1.347",
+    "@djangocfg/ui-core": "^2.1.347",
+    "@djangocfg/ui-nextjs": "^2.1.347",
+    "@djangocfg/ui-tools": "^2.1.347",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AuthLayout/README.md

@@ -100,7 +100,7 @@ import { AuthLayout } from '@djangocfg/layouts';
 | Step | Description |
 |---|---|
 | `identifier` | Email or phone input |
-| `otp` | 6-digit OTP code entry |
+| `otp` | 4-digit email OTP code entry |
 | `2fa` | TOTP or backup code verification |
 | `2fa-setup` | QR code + backup codes setup |
 | `success` | Full-screen success overlay → redirect |

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

@@ -13,12 +13,13 @@ export interface AuthOTPInputProps {
   disabled?: boolean;
   autoFocus?: boolean;
   size?: 'sm' | 'default' | 'lg';
+  length?: number;
 }
 
 /**
  * AuthOTPInput - Reusable OTP input with consistent styling
  *
- * Used in: OTPStep, TwoFactorStep, SetupStep
+ * Used in: OTPStep (email, 4 digits), TwoFactorStep (TOTP, 6 digits), SetupStep (TOTP, 6 digits)
  */
 export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
   value,
@@ -27,10 +28,11 @@ export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
   disabled = false,
   autoFocus = true,
   size,
+  length = AUTH.TOTP_LENGTH,
 }) => (
   <div className="auth-otp-container auth-otp-wrapper">
     <OTPInput
-      length={AUTH.OTP_LENGTH}
+      length={length}
       validationMode="numeric"
       pasteBehavior="clean"
       value={value}

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

@@ -66,7 +66,7 @@ export const OTPStep: React.FC = () => {
   const handleOTPComplete = useCallback(
     async (completedValue: string) => {
       if (submitState !== 'idle' || isLoading || isAutoSubmittingFromUrl.current) return;
-      if (completedValue.length !== AUTH.OTP_LENGTH) return;
+      if (completedValue.length !== AUTH.EMAIL_OTP_LENGTH) return;
 
       setSubmitState('submitting');
       const fakeEvent = { preventDefault: () => {} } as React.FormEvent;
@@ -96,6 +96,8 @@ export const OTPStep: React.FC = () => {
           onChange={setOtp}
           onComplete={handleOTPComplete}
           disabled={isLoading}
+          length={AUTH.EMAIL_OTP_LENGTH}
+          size="lg"
         />
 
         {config.isDevelopment && (
@@ -104,7 +106,7 @@ export const OTPStep: React.FC = () => {
 
         <AuthError message={error} />
 
-        <AuthButton loading={isLoading} disabled={otp.length < AUTH.OTP_LENGTH}>
+        <AuthButton loading={isLoading} disabled={otp.length < AUTH.EMAIL_OTP_LENGTH}>
           {content.button}
         </AuthButton>
 

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupQRCode.tsx

@@ -117,7 +117,7 @@ export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
 
         <AuthButton
           loading={isLoading}
-          disabled={confirmCode.length !== AUTH.OTP_LENGTH}
+          disabled={confirmCode.length !== AUTH.TOTP_LENGTH}
         >
           {content.button}
         </AuthButton>

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

@@ -105,7 +105,7 @@ export const TwoFactorStep: React.FC = () => {
 
           <AuthButton
             loading={is2FALoading}
-            disabled={!useBackupCode && twoFactorCode.length !== AUTH.OTP_LENGTH}
+            disabled={!useBackupCode && twoFactorCode.length !== AUTH.TOTP_LENGTH}
           >
             {content.button}
           </AuthButton>

package/src/layouts/AuthLayout/constants.ts

@@ -1,13 +1,18 @@
 /**
  * AuthLayout Constants
  *
- * All magic numbers extracted for clarity and maintainability.
+ * Code lengths come from the shared single source of truth in
+ * `@djangocfg/api/auth` (AUTH_CONSTANTS). Layout-only values (timings, sizes,
+ * routes) live here.
  */
 
+import { AUTH_CONSTANTS } from '@djangocfg/api/auth';
+
 export const AUTH = {
-  // Input lengths
-  OTP_LENGTH: 6,
-  BACKUP_CODE_MAX_LENGTH: 12,
+  // Input lengths (re-exported from @djangocfg/api/auth)
+  EMAIL_OTP_LENGTH: AUTH_CONSTANTS.EMAIL_OTP_LENGTH,
+  TOTP_LENGTH: AUTH_CONSTANTS.TOTP_LENGTH,
+  BACKUP_CODE_MAX_LENGTH: AUTH_CONSTANTS.BACKUP_CODE_MAX_LENGTH,
 
   // Timing (ms)
   ANIMATION_DURATION: 400,