@djangocfg/layouts 2.1.109 → 2.1.111

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

@@ -0,0 +1,125 @@
+'use client';
+
+import { Check, Copy } from 'lucide-react';
+import React, { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@djangocfg/ui-core/components';
+
+import { AUTH } from '../../../constants';
+import { AUTH_CONTENT } from '../../../content';
+import { useCopyToClipboard } from '../../../hooks';
+import {
+  AuthButton,
+  AuthContainer,
+  AuthError,
+  AuthHeader,
+  AuthLink,
+  AuthOTPInput,
+} from '../../shared';
+
+interface SetupQRCodeProps {
+  provisioningUri: string;
+  secret: string;
+  isLoading: boolean;
+  error?: string;
+  onConfirm: (code: string) => Promise<unknown>;
+  onSkip?: () => void;
+}
+
+/**
+ * SetupQRCode - QR code scanning step for 2FA setup
+ */
+export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
+  provisioningUri,
+  secret,
+  isLoading,
+  error,
+  onConfirm,
+  onSkip,
+}) => {
+  const [confirmCode, setConfirmCode] = useState('');
+  const { copied, copy } = useCopyToClipboard();
+  const content = AUTH_CONTENT.setup.qrCode;
+
+  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>
+          <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" />
+                    {AUTH_CONTENT.setup.complete.copied}
+                  </>
+                ) : (
+                  <>
+                    <Copy className="w-4 h-4" />
+                    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.OTP_LENGTH}
+        >
+          {content.button}
+        </AuthButton>
+
+        {onSkip && (
+          <div className="auth-actions">
+            <AuthLink onClick={onSkip} disabled={isLoading}>
+              {content.skip}
+            </AuthLink>
+          </div>
+        )}
+      </form>
+    </AuthContainer>
+  );
+};

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

@@ -0,0 +1,91 @@
+'use client';
+
+import React 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
+ *
+ * Delegates rendering to focused sub-components:
+ * - SetupLoading: Initial loading state
+ * - SetupQRCode: QR code scanning
+ * - SetupComplete: Backup codes display
+ */
+export const SetupStep: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
+  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 />;
+};

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

@@ -0,0 +1,92 @@
+'use client';
+
+import React from 'react';
+
+import { Input } from '@djangocfg/ui-core/components';
+
+import { AUTH } from '../../constants';
+import { AUTH_CONTENT } from '../../content';
+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
+ */
+export const TwoFactorStep: React.FC = () => {
+  const {
+    twoFactorCode,
+    useBackupCode,
+    error,
+    is2FALoading,
+    twoFactorWarning,
+    setTwoFactorCode,
+    handle2FASubmit,
+    handleUseBackupCode,
+    handleUseTOTP,
+  } = useAuthFormContext();
+
+  const content = AUTH_CONTENT.twoFactor;
+  const subtitle = useBackupCode ? content.subtitle.backup : content.subtitle.totp;
+
+  return (
+    <AuthContainer step="2fa">
+      <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 font-mono tracking-widest text-center"
+          />
+        ) : (
+          <AuthOTPInput
+            value={twoFactorCode}
+            onChange={setTwoFactorCode}
+            disabled={is2FALoading}
+          />
+        )}
+
+        {twoFactorWarning && (
+          <div className="auth-dev-notice">{twoFactorWarning}</div>
+        )}
+
+        <AuthError message={error} />
+
+        <AuthButton
+          loading={is2FALoading}
+          disabled={!useBackupCode && twoFactorCode.length !== AUTH.OTP_LENGTH}
+        >
+          {content.button}
+        </AuthButton>
+
+        <div className="auth-actions">
+          <AuthLink
+            onClick={useBackupCode ? handleUseTOTP : handleUseBackupCode}
+            disabled={is2FALoading}
+          >
+            {useBackupCode ? content.toggle.toTotp : content.toggle.toBackup}
+          </AuthLink>
+        </div>
+      </form>
+    </AuthContainer>
+  );
+};

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,24 @@
+/**
+ * AuthLayout Constants
+ *
+ * All magic numbers extracted for clarity and maintainability.
+ */
+
+export const AUTH = {
+  // Input lengths
+  OTP_LENGTH: 6,
+  BACKUP_CODE_MAX_LENGTH: 12,
+
+  // Timing (ms)
+  ANIMATION_DURATION: 400,
+  AUTO_SUBMIT_DELAY: 100,
+  COPY_FEEDBACK_DURATION: 2000,
+  REDIRECT_DELAY: 1500,
+  ANIMATION_START_DELAY: 50,
+
+  // Sizes (px)
+  QR_CODE_SIZE: 160,
+
+  // Routes
+  DEFAULT_REDIRECT: '/dashboard',
+} as const;

package/src/layouts/AuthLayout/content.ts

@@ -0,0 +1,78 @@
+/**
+ * AuthLayout Content
+ *
+ * All UI strings centralized for easy updates and i18n.
+ */
+
+export const AUTH_CONTENT = {
+  identifier: {
+    title: 'Sign in',
+    subtitle: {
+      email: 'Enter your email to continue',
+      phone: 'Enter your phone number to continue',
+    },
+    placeholder: {
+      email: 'email@example.com',
+      phone: 'Enter your phone number',
+    },
+    button: 'Continue',
+    oauth: {
+      github: 'Continue with GitHub',
+    },
+  },
+
+  otp: {
+    title: 'Enter code',
+    subtitle: 'We sent a code to',
+    button: 'Verify',
+    resend: 'Resend code',
+    changeIdentifier: (channel: string) => `Change ${channel}`,
+  },
+
+  twoFactor: {
+    title: 'Two-factor authentication',
+    subtitle: {
+      totp: 'Enter the 6-digit code from your authenticator',
+      backup: 'Enter one of your backup codes',
+    },
+    placeholder: {
+      backup: 'XXXXXXXX',
+    },
+    button: 'Verify',
+    toggle: {
+      toBackup: 'Use backup code',
+      toTotp: 'Use authenticator app',
+    },
+  },
+
+  setup: {
+    loading: {
+      title: 'Setting up...',
+      button: 'Loading',
+    },
+    qrCode: {
+      title: 'Set up 2FA',
+      subtitle: 'Scan this QR code with your authenticator app',
+      manualEntry: "Can't scan? Enter manually",
+      confirmPrompt: 'Enter the 6-digit code to confirm',
+      button: 'Enable 2FA',
+      skip: 'Skip for now',
+    },
+    complete: {
+      title: '2FA enabled',
+      subtitle: 'Save these backup codes securely',
+      instruction: 'Each code can only be used once',
+      copyAll: 'Copy all codes',
+      copied: 'Copied',
+      done: 'Done',
+    },
+  },
+
+  success: {
+    message: 'Signed in successfully',
+  },
+
+  dev: {
+    anyCodeWorks: 'Dev Mode: Any code works',
+  },
+} as const;

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

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

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { useCallback, 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);
+
+  const copy = useCallback(
+    async (text: string) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), duration);
+      } catch {
+        // Clipboard API not available
+        console.warn('Clipboard API not available');
+      }
+    },
+    [duration]
+  );
+
+  return { copied, copy };
+};

package/src/layouts/AuthLayout/index.ts

@@ -9,16 +9,20 @@ export type { AuthLayoutProps } from './AuthLayout';
 // Context and hooks
 export { AuthFormProvider, useAuthFormContext } from './context';
 
-// Components
+// Apple-style step components
 export {
-  IdentifierForm,
-  OTPForm,
-  AuthHelp,
-  OAuthProviders,
+  IdentifierStep,
+  OTPStep,
+  TwoFactorStep,
+  SetupStep,
+  type SetupStepProps,
   OAuthCallback,
   type OAuthCallbackProps,
 } from './components';
 
+// Shared UI components
+export * from './components/shared';
+
 // Types (re-exported from @djangocfg/api/auth)
 export type {
   AuthChannel,