@djangocfg/layouts 2.1.548 → 2.1.549

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.548",
+  "version": "2.1.549",
   "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.548",
-    "@djangocfg/api": "^2.1.548",
-    "@djangocfg/devtools": "^2.1.548",
-    "@djangocfg/i18n": "^2.1.548",
-    "@djangocfg/ui-core": "^2.1.548",
+    "@djangocfg/analytics": "^2.1.549",
+    "@djangocfg/api": "^2.1.549",
+    "@djangocfg/devtools": "^2.1.549",
+    "@djangocfg/i18n": "^2.1.549",
+    "@djangocfg/ui-core": "^2.1.549",
     "@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.548",
-    "@djangocfg/api": "^2.1.548",
-    "@djangocfg/devtools": "^2.1.548",
-    "@djangocfg/i18n": "^2.1.548",
-    "@djangocfg/typescript-config": "^2.1.548",
-    "@djangocfg/ui-core": "^2.1.548",
+    "@djangocfg/analytics": "^2.1.549",
+    "@djangocfg/api": "^2.1.549",
+    "@djangocfg/devtools": "^2.1.549",
+    "@djangocfg/i18n": "^2.1.549",
+    "@djangocfg/typescript-config": "^2.1.549",
+    "@djangocfg/ui-core": "^2.1.549",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 
@@ -78,6 +78,15 @@ function OTPStepRaw() {
     return `${local[0]}${'*'.repeat(Math.min(local.length - 1, 5))}@${domain}`;
   }, [identifier]);
 
+  const autoSubmitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (autoSubmitTimerRef.current) clearTimeout(autoSubmitTimerRef.current);
+    },
+    []
+  );
+
   // Auto-submit on complete (state machine approach)
   const handleOTPComplete = useCallback(
     async (completedValue: string) => {
@@ -87,7 +96,11 @@ function OTPStepRaw() {
       setSubmitState('submitting');
       const fakeEvent = { preventDefault: () => {} } as React.FormEvent;
 
-      setTimeout(async () => {
+      // Tracked so leaving the step cancels it. This component unmounts when
+      // the user goes back to the identifier, and an uncancelled timer would
+      // submit the code they just abandoned.
+      autoSubmitTimerRef.current = setTimeout(async () => {
+        autoSubmitTimerRef.current = null;
         try {
           await handleOTPSubmit(fakeEvent);
         } finally {

package/src/layouts/AuthLayout/hooks/useCopyToClipboard.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { AUTH } from '../constants';
 
@@ -18,13 +18,27 @@ export const useCopyToClipboard = (
   duration = AUTH.COPY_FEEDBACK_DURATION
 ): UseCopyToClipboardResult => {
   const [copied, setCopied] = useState(false);
+  // One timer, cleared on unmount. Copying twice in quick succession stacked
+  // two, so the first cleared the flag while the second copy was still fresh.
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
 
   const copy = useCallback(
     async (text: string) => {
       try {
         await navigator.clipboard.writeText(text);
         setCopied(true);
-        setTimeout(() => setCopied(false), duration);
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          timerRef.current = null;
+          setCopied(false);
+        }, duration);
       } catch {
         // Clipboard API not available
         console.warn('Clipboard API not available');

package/src/testing/MockAuthFormProvider.tsx

@@ -77,6 +77,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
 }) => {
   const [step, setStep] = useState<AuthStep>(initialStep);
   const [identifier, setIdentifier] = useState(initialIdentifier);
+  const [password, setPassword] = useState('');
   const [otp, setOtp] = useState(initialOtp);
   const [isLoading, setIsLoading] = useState(initialLoading);
   const [acceptedTerms, setAcceptedTerms] = useState(initialAcceptedTerms);
@@ -100,6 +101,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
     return {
       // State
       identifier,
+      password,
       otp,
       isLoading,
       acceptedTerms,
@@ -118,6 +120,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
 
       // State handlers
       setIdentifier,
+      setPassword,
       setOtp,
       setAcceptedTerms,
       setRememberMe,
@@ -137,6 +140,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       // step never changes from under the storyteller. To preview a
       // different step, render a new story with `step="..."`.
       handleIdentifierSubmit: async (e) => stop(e),
+      handlePasswordSubmit: async (e) => stop(e),
       handleOTPSubmit: async (e) => stop(e),
       handleResendOTP: async () => {},
       handleBackToIdentifier: () => setStep('identifier'),