@djangocfg/layouts 2.1.109 → 2.1.110

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,