@djangocfg/layouts 2.1.579 → 2.1.581

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

@@ -1,141 +0,0 @@
-'use client';
-
-import { Check, Copy } from 'lucide-react';
-import React, { memo, useMemo, useState } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
-
-import { useAppT } from '@djangocfg/i18n';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@djangocfg/ui-core/components';
-
-import { AUTH } from '../../../constants';
-import { useCopyToClipboard } from '../../../hooks';
-import {
-  AuthButton,
-  AuthContainer,
-  AuthError,
-  AuthHeader,
-  AuthLink,
-  AuthOTPInput,
-} from '../../shared';
-
-interface SetupQRCodeProps {
-  provisioningUri: string;
-  secret: string;
-  isLoading: boolean;
-  error?: string | null;
-  onConfirm: (code: string) => Promise<unknown>;
-  onSkip?: () => void;
-}
-
-/**
- * SetupQRCode - QR code scanning step for 2FA setup.
- *
- * Memoised: re-renders only when `provisioningUri`, `secret`, `isLoading`,
- * `error`, `onConfirm` or `onSkip` change. `onConfirm` and `onSkip` are
- * compared by reference — callers should stabilise them with useCallback.
- */
-function SetupQRCodeRaw({
-  provisioningUri,
-  secret,
-  isLoading,
-  error,
-  onConfirm,
-  onSkip,
-}: SetupQRCodeProps) {
-  const [confirmCode, setConfirmCode] = useState('');
-  const { copied, copy } = useCopyToClipboard();
-  const t = useAppT();
-  const content = useMemo(() => ({
-    title: t('layouts.auth.setup.qrCode.title'),
-    subtitle: t('layouts.auth.setup.qrCode.subtitle'),
-    manualEntry: t('layouts.auth.setup.qrCode.manualEntry'),
-    confirmPrompt: t('layouts.auth.setup.qrCode.confirmPrompt'),
-    button: t('layouts.auth.setup.qrCode.button'),
-    skip: t('layouts.auth.setup.qrCode.skip'),
-    copied: t('layouts.auth.setup.complete.copied'),
-    copy: 'Copy',
-  }), [t]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    await onConfirm(confirmCode);
-  };
-
-  const handleCopySecret = () => {
-    copy(secret);
-  };
-
-  return (
-    <AuthContainer step="2fa-setup">
-      <AuthHeader title={content.title} subtitle={content.subtitle} />
-
-      <form onSubmit={handleSubmit} className="auth-form-group">
-        <div className="auth-qr-container">
-          <div className="auth-qr">
-            <QRCodeSVG
-              value={provisioningUri}
-              size={AUTH.QR_CODE_SIZE}
-              level="M"
-              marginSize={0}
-            />
-          </div>
-        </div>
-
-        <Collapsible className="auth-collapsible-centered">
-          <CollapsibleTrigger asChild>
-            <AuthLink>{content.manualEntry}</AuthLink>
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            <div className="auth-secret-container">
-              <code className="auth-secret">{secret}</code>
-              <AuthLink onClick={handleCopySecret}>
-                {copied ? (
-                  <>
-                    <Check className="w-4 h-4" />
-                    {content.copied}
-                  </>
-                ) : (
-                  <>
-                    <Copy className="w-4 h-4" />
-                    {content.copy}
-                  </>
-                )}
-              </AuthLink>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-
-        <p className="auth-instruction">{content.confirmPrompt}</p>
-
-        <AuthOTPInput
-          value={confirmCode}
-          onChange={setConfirmCode}
-          disabled={isLoading}
-        />
-
-        <AuthError message={error} />
-
-        <AuthButton
-          loading={isLoading}
-          disabled={confirmCode.length !== AUTH.TOTP_LENGTH}
-        >
-          {content.button}
-        </AuthButton>
-
-        {onSkip && (
-          <div className="auth-actions">
-            <AuthLink onClick={onSkip} disabled={isLoading}>
-              {content.skip}
-            </AuthLink>
-          </div>
-        )}
-      </form>
-    </AuthContainer>
-  );
-}
-
-export const SetupQRCode = memo(SetupQRCodeRaw);

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

@@ -1,145 +0,0 @@
-'use client';
-
-import React, { memo } from 'react';
-
-import { useTwoFactorSetup } from '@djangocfg/api/auth';
-
-import { useAuthFormContext } from '../../../context';
-import { SetupComplete } from './SetupComplete';
-import { SetupLoading } from './SetupLoading';
-import { SetupQRCode } from './SetupQRCode';
-
-export interface SetupStepProps {
-  onComplete?: () => void;
-  onSkip?: () => void;
-}
-
-/**
- * SetupStep - Orchestrator for 2FA setup flow (requires AuthFormContext).
- * For use outside AuthLayout use SetupStepStandalone.
- *
- * Memoised: re-renders only when `onComplete` or `onSkip` references
- * change. Callers should stabilise these callbacks with useCallback.
- */
-function SetupStepRaw({ onComplete, onSkip }: SetupStepProps) {
-  const { setStep } = useAuthFormContext();
-
-  const handleComplete = () => {
-    onComplete?.();
-    setStep('success');
-  };
-
-  const handleSkip = () => {
-    onSkip?.();
-    setStep('success');
-  };
-
-  const {
-    isLoading,
-    error,
-    setupData,
-    backupCodes,
-    backupCodesWarning,
-    setupStep,
-    startSetup,
-    confirmSetup,
-  } = useTwoFactorSetup({
-    onComplete: handleComplete,
-    onError: () => {},
-  });
-
-  // Start setup on mount
-  React.useEffect(() => {
-    if (setupStep === 'idle') {
-      startSetup();
-    }
-  }, [setupStep, startSetup]);
-
-  // Loading state
-  if (isLoading && !setupData) {
-    return <SetupLoading />;
-  }
-
-  // Complete - show backup codes
-  if (setupStep === 'complete' && backupCodes) {
-    return (
-      <SetupComplete
-        backupCodes={backupCodes}
-        backupCodesWarning={backupCodesWarning}
-        onDone={handleComplete}
-      />
-    );
-  }
-
-  // Setup - show QR code
-  if (setupData) {
-    return (
-      <SetupQRCode
-        provisioningUri={setupData.provisioningUri}
-        secret={setupData.secret}
-        isLoading={isLoading}
-        error={error}
-        onConfirm={confirmSetup}
-        onSkip={onSkip ? handleSkip : undefined}
-      />
-    );
-  }
-
-  // Fallback to loading
-  return <SetupLoading />;
-}
-
-export const SetupStep = memo(SetupStepRaw);
-
-/**
- * SetupStepStandalone — same flow as SetupStep but without AuthFormContext.
- * Use this inside ProfileLayout or any page outside AuthLayout.
- *
- * Memoised: re-renders only when `onComplete` or `onSkip` references
- * change. Callers should stabilise these callbacks with useCallback.
- */
-function SetupStepStandaloneRaw({ onComplete, onSkip }: SetupStepProps) {
-  const {
-    isLoading,
-    error,
-    setupData,
-    backupCodes,
-    backupCodesWarning,
-    setupStep,
-    startSetup,
-    confirmSetup,
-  } = useTwoFactorSetup({ onComplete, onError: () => {} });
-
-  React.useEffect(() => {
-    if (setupStep === 'idle') startSetup();
-  }, [setupStep, startSetup]);
-
-  if (isLoading && !setupData) return <SetupLoading />;
-
-  if (setupStep === 'complete' && backupCodes) {
-    return (
-      <SetupComplete
-        backupCodes={backupCodes}
-        backupCodesWarning={backupCodesWarning}
-        onDone={() => onComplete?.()}
-      />
-    );
-  }
-
-  if (setupData) {
-    return (
-      <SetupQRCode
-        provisioningUri={setupData.provisioningUri}
-        secret={setupData.secret}
-        isLoading={isLoading}
-        error={error}
-        onConfirm={confirmSetup}
-        onSkip={onSkip}
-      />
-    );
-  }
-
-  return <SetupLoading />;
-}
-
-export const SetupStepStandalone = memo(SetupStepStandaloneRaw);

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

@@ -1,133 +0,0 @@
-'use client';
-
-import React, { memo, useMemo } from 'react';
-
-import { useAppT } from '@djangocfg/i18n';
-
-import { AUTH } from '../../constants';
-import { useAuthFormContext } from '../../context';
-import {
-  AuthButton,
-  AuthContainer,
-  AuthError,
-  AuthHeader,
-  AuthLink,
-  AuthOTPInput,
-} from '../shared';
-
-/**
- * TwoFactorStep - Apple-style 2FA verification.
- *
- * Minimal design with:
- * - TOTP code input (default)
- * - Backup code input (alternate)
- * - Clean toggle between modes
- *
- * Memoised: no props; reads from context. Prevents re-renders when
- * AuthContent switches steps or sibling branches update.
- */
-function TwoFactorStepRaw() {
-  const {
-    twoFactorCode,
-    useBackupCode,
-    error,
-    is2FALoading,
-    twoFactorWarning,
-    twoFactorAttemptsRemaining,
-    setTwoFactorCode,
-    handle2FASubmit,
-    handleUseBackupCode,
-    handleUseTOTP,
-    handleBackToIdentifier,
-  } = useAuthFormContext();
-
-  // Translations
-  const t = useAppT();
-  const content = useMemo(() => ({
-    title: t('layouts.auth.twoFactor.title'),
-    subtitle: {
-      totp: t('layouts.auth.twoFactor.subtitle.totp'),
-      backup: t('layouts.auth.twoFactor.subtitle.backup'),
-    },
-    placeholder: {
-      backup: t('layouts.auth.twoFactor.placeholder.backup'),
-    },
-    button: t('layouts.auth.twoFactor.button'),
-    toggle: {
-      toBackup: t('layouts.auth.twoFactor.toggle.toBackup'),
-      toTotp: t('layouts.auth.twoFactor.toggle.toTotp'),
-    },
-    changeEmail: t('layouts.auth.otp.changeEmail'),
-  }), [t]);
-
-  const subtitle = useBackupCode ? content.subtitle.backup : content.subtitle.totp;
-
-  return (
-    <AuthContainer step="2fa">
-      <div className="auth-2fa-box">
-        <div className="auth-2fa-shield" aria-hidden="true">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-          </svg>
-        </div>
-
-        <AuthHeader title={content.title} subtitle={subtitle} />
-
-        <form onSubmit={handle2FASubmit} className="auth-form-group">
-          {useBackupCode ? (
-            <input
-              type="text"
-              value={twoFactorCode}
-              onChange={(e) => setTwoFactorCode(e.target.value.toUpperCase())}
-              placeholder={content.placeholder.backup}
-              disabled={is2FALoading}
-              maxLength={AUTH.BACKUP_CODE_MAX_LENGTH}
-              autoComplete="off"
-              autoFocus
-              className="auth-input"
-            />
-          ) : (
-            <AuthOTPInput
-              value={twoFactorCode}
-              onChange={setTwoFactorCode}
-              disabled={is2FALoading}
-            />
-          )}
-
-          {twoFactorWarning && (
-            <div className="auth-dev-notice">{twoFactorWarning}</div>
-          )}
-
-          <AuthError message={error} />
-
-          {twoFactorAttemptsRemaining !== null && twoFactorAttemptsRemaining <= 3 && (
-            <div className="auth-dev-notice">
-              {twoFactorAttemptsRemaining} attempt{twoFactorAttemptsRemaining !== 1 ? 's' : ''} remaining
-            </div>
-          )}
-
-          <AuthButton
-            loading={is2FALoading}
-            disabled={!useBackupCode && twoFactorCode.length !== AUTH.TOTP_LENGTH}
-          >
-            {content.button}
-          </AuthButton>
-
-          <div className="auth-actions">
-            <AuthLink
-              onClick={useBackupCode ? handleUseTOTP : handleUseBackupCode}
-              disabled={is2FALoading}
-            >
-              {useBackupCode ? content.toggle.toTotp : content.toggle.toBackup}
-            </AuthLink>
-            <AuthLink onClick={handleBackToIdentifier} disabled={is2FALoading}>
-              {content.changeEmail}
-            </AuthLink>
-          </div>
-        </form>
-      </div>
-    </AuthContainer>
-  );
-}
-
-export const TwoFactorStep = memo(TwoFactorStepRaw);

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

@@ -1 +0,0 @@
-export { useCopyToClipboard } from './useCopyToClipboard';

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

@@ -1,51 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { AUTH } from '../constants';
-
-interface UseCopyToClipboardResult {
-  copied: boolean;
-  copy: (text: string) => Promise<void>;
-}
-
-/**
- * useCopyToClipboard - Copy text with temporary feedback state
- *
- * @param duration - How long to show "copied" state (default: 2000ms)
- */
-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);
-        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');
-      }
-    },
-    [duration]
-  );
-
-  return { copied, copy };
-};