@djangocfg/layouts 2.1.227 → 2.1.229

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

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from 'react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 import { Checkbox } from '@djangocfg/ui-core/components';
 
 export interface TermsCheckboxProps {
@@ -25,7 +25,7 @@ export const TermsCheckbox: React.FC<TermsCheckboxProps> = ({
   disabled = false,
   className = '',
 }) => {
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const labels = useMemo(() => ({
     agree: t('layouts.auth.terms.agree'),
     and: t('layouts.auth.terms.and'),

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

@@ -6,7 +6,6 @@ export { AuthError } from './AuthError';
 export { AuthButton } from './AuthButton';
 export { AuthLink } from './AuthLink';
 export { AuthOTPInput } from './AuthOTPInput';
-export { ChannelToggle } from './ChannelToggle';
 export { TermsCheckbox } from './TermsCheckbox';
 
 export type { AuthContainerProps } from './AuthContainer';
@@ -17,5 +16,4 @@ export type { AuthErrorProps } from './AuthError';
 export type { AuthButtonProps } from './AuthButton';
 export type { AuthLinkProps } from './AuthLink';
 export type { AuthOTPInputProps } from './AuthOTPInput';
-export type { ChannelToggleProps } from './ChannelToggle';
 export type { TermsCheckboxProps } from './TermsCheckbox';

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

@@ -1,12 +1,13 @@
 'use client';
 
 import { Github } from 'lucide-react';
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { useGithubAuth } from '@djangocfg/api/auth';
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
-import { Input, PhoneInput } from '@djangocfg/ui-core/components';
+import { useAppT } from '@djangocfg/i18n';
+import { Input } from '@djangocfg/ui-core/components';
 
+import { useAuthLayoutContext } from '../../AuthLayout';
 import { useAuthFormContext } from '../../context';
 import {
   AuthButton,
@@ -15,54 +16,49 @@ import {
   AuthError,
   AuthFooter,
   AuthHeader,
-  ChannelToggle,
   TermsCheckbox,
 } from '../shared';
 
 /**
- * IdentifierStep - Apple-style email/phone input step
+ * IdentifierStep - Apple-style email input step
  *
  * Clean, minimal design with:
  * - Optional logo
- * - Channel toggle (email/phone)
- * - Single input field
+ * - Single email input field
  * - Terms checkbox
  * - OAuth options
  */
 export const IdentifierStep: React.FC = () => {
+  const { hideHeader } = useAuthLayoutContext();
+
   const {
     identifier,
-    channel,
     isLoading,
     acceptedTerms,
     error,
+    isRateLimited,
+    rateLimitLabel,
     logoUrl,
     termsUrl,
     privacyUrl,
     supportUrl,
-    enablePhoneAuth,
     enableGithubAuth,
     sourceUrl,
     setIdentifier,
-    setChannel,
     setAcceptedTerms,
     setError,
     handleIdentifierSubmit,
-    detectChannelFromIdentifier,
-    validateIdentifier,
   } = useAuthFormContext();
 
   // Translations
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const content = useMemo(() => ({
     title: t('layouts.auth.identifier.title'),
     subtitle: {
       email: t('layouts.auth.identifier.subtitle.email'),
-      phone: t('layouts.auth.identifier.subtitle.phone'),
     },
     placeholder: {
       email: t('layouts.auth.identifier.placeholder.email'),
-      phone: t('layouts.auth.identifier.placeholder.phone'),
     },
     button: t('layouts.auth.identifier.button'),
     oauth: {
@@ -76,75 +72,24 @@ export const IdentifierStep: React.FC = () => {
     onError: setError,
   });
 
-  // Force email if phone disabled
-  useEffect(() => {
-    if (!enablePhoneAuth && channel === 'phone') {
-      setChannel('email');
-      if (identifier && detectChannelFromIdentifier(identifier) === 'phone') {
-        setIdentifier('');
-      }
-    }
-  }, [enablePhoneAuth, channel, identifier, setChannel, setIdentifier, detectChannelFromIdentifier]);
-
-  // Handle identifier change with auto-detection
-  const handleChange = (value: string) => {
-    setIdentifier(value);
-    const detected = detectChannelFromIdentifier(value);
-    if (detected && detected !== channel) {
-      if (detected === 'phone' && !enablePhoneAuth) return;
-      setChannel(detected);
-    }
-  };
-
-  // Handle channel switch
-  const handleChannelChange = (newChannel: 'email' | 'phone') => {
-    if (newChannel === 'phone' && !enablePhoneAuth) return;
-    setChannel(newChannel);
-    if (identifier && !validateIdentifier(identifier, newChannel)) {
-      setIdentifier('');
-    }
-  };
-
-  const subtitle = channel === 'phone' ? content.subtitle.phone : content.subtitle.email;
   const hasTerms = Boolean(termsUrl || privacyUrl);
 
   return (
     <AuthContainer step="identifier">
-      <AuthHeader logo={logoUrl} title={content.title} subtitle={subtitle} />
+      {!hideHeader && <AuthHeader logo={logoUrl} title={content.title} subtitle={content.subtitle.email} />}
 
       <form onSubmit={handleIdentifierSubmit} className="auth-form-group">
-        {enablePhoneAuth && (
-          <ChannelToggle
-            channel={channel}
-            onChange={handleChannelChange}
-            disabled={isLoading}
-          />
-        )}
-
-        {channel === 'phone' ? (
-          <div className="auth-phone-input">
-            <PhoneInput
-              value={identifier}
-              onChange={(value) => handleChange(value || '')}
-              disabled={isLoading}
-              placeholder={content.placeholder.phone}
-              defaultCountry="US"
-              className="auth-input"
-            />
-          </div>
-        ) : (
-          <Input
-            type="email"
-            value={identifier}
-            onChange={(e) => handleChange(e.target.value)}
-            placeholder={content.placeholder.email}
-            disabled={isLoading}
-            required
-            autoFocus
-            autoComplete="off"
-            className="auth-input"
-          />
-        )}
+        <Input
+          type="email"
+          value={identifier}
+          onChange={(e) => setIdentifier(e.target.value)}
+          placeholder={content.placeholder.email}
+          disabled={isLoading}
+          required
+          autoFocus
+          autoComplete="off"
+          className="auth-input"
+        />
 
         <TermsCheckbox
           checked={acceptedTerms}
@@ -158,9 +103,9 @@ export const IdentifierStep: React.FC = () => {
 
         <AuthButton
           loading={isLoading}
-          disabled={!identifier || (hasTerms && !acceptedTerms)}
+          disabled={!identifier || (hasTerms && !acceptedTerms) || isRateLimited}
         >
-          {content.button}
+          {isRateLimited ? `${content.button} (${rateLimitLabel})` : content.button}
         </AuthButton>
       </form>
 

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

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 
 import { config } from '../../../../utils';
 import { AUTH } from '../../constants';
@@ -30,10 +30,11 @@ type SubmitState = 'idle' | 'submitting';
 export const OTPStep: React.FC = () => {
   const {
     identifier,
-    channel,
     otp,
     isLoading,
     error,
+    isRateLimited,
+    rateLimitLabel,
     setOtp,
     handleOTPSubmit,
     handleResendOTP,
@@ -44,26 +45,22 @@ export const OTPStep: React.FC = () => {
   const [submitState, setSubmitState] = useState<SubmitState>('idle');
 
   // Translations
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const content = useMemo(() => ({
     title: t('layouts.auth.otp.title'),
     subtitle: t('layouts.auth.otp.subtitle'),
     button: t('layouts.auth.otp.button'),
     resend: t('layouts.auth.otp.resend'),
     changeEmail: t('layouts.auth.otp.changeEmail'),
-    changePhone: t('layouts.auth.otp.changePhone'),
     devMode: t('layouts.auth.dev.anyCodeWorks'),
   }), [t]);
 
   // Mask identifier for privacy
   const maskedIdentifier = useMemo(() => {
-    if (channel === 'phone') {
-      return identifier.slice(-4).padStart(identifier.length, '*');
-    }
     const [local, domain] = identifier.split('@');
     if (!local || !domain) return identifier;
     return `${local[0]}${'*'.repeat(Math.min(local.length - 1, 5))}@${domain}`;
-  }, [identifier, channel]);
+  }, [identifier]);
 
   // Auto-submit on complete (state machine approach)
   const handleOTPComplete = useCallback(
@@ -85,8 +82,6 @@ export const OTPStep: React.FC = () => {
     [handleOTPSubmit, isLoading, isAutoSubmittingFromUrl, submitState]
   );
 
-  const changeIdentifierLabel = channel === 'phone' ? content.changePhone : content.changeEmail;
-
   return (
     <AuthContainer step="otp">
       <AuthHeader
@@ -114,11 +109,11 @@ export const OTPStep: React.FC = () => {
         </AuthButton>
 
         <div className="auth-actions">
-          <AuthLink onClick={handleResendOTP} disabled={isLoading}>
-            {content.resend}
+          <AuthLink onClick={handleResendOTP} disabled={isLoading || isRateLimited}>
+            {isRateLimited ? `${content.resend} (${rateLimitLabel})` : content.resend}
           </AuthLink>
           <AuthLink onClick={handleBackToIdentifier} disabled={isLoading}>
-            {changeIdentifierLabel}
+            {content.changeEmail}
           </AuthLink>
         </div>
       </form>

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

@@ -3,7 +3,7 @@
 import { Check, Copy } from 'lucide-react';
 import React, { useMemo } from 'react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 
 import { useCopyToClipboard } from '../../../hooks';
 import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
@@ -23,7 +23,7 @@ export const SetupComplete: React.FC<SetupCompleteProps> = ({
   onDone,
 }) => {
   const { copied, copy } = useCopyToClipboard();
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const content = useMemo(() => ({
     title: t('layouts.auth.setup.complete.title'),
     subtitle: t('layouts.auth.setup.complete.subtitle'),

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

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from 'react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 
 import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
 
@@ -10,7 +10,7 @@ import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
  * SetupLoading - Loading state for 2FA setup
  */
 export const SetupLoading: React.FC = () => {
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const content = useMemo(() => ({
     title: t('layouts.auth.setup.loading.title'),
     button: t('layouts.auth.setup.loading.button'),

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

@@ -4,7 +4,7 @@ import { Check, Copy } from 'lucide-react';
 import React, { useMemo, useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 import {
   Collapsible,
   CollapsibleContent,
@@ -44,7 +44,7 @@ export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
 }) => {
   const [confirmCode, setConfirmCode] = useState('');
   const { copied, copy } = useCopyToClipboard();
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const content = useMemo(() => ({
     title: t('layouts.auth.setup.qrCode.title'),
     subtitle: t('layouts.auth.setup.qrCode.subtitle'),

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

@@ -2,8 +2,7 @@
 
 import React, { useMemo } from 'react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
-import { Input } from '@djangocfg/ui-core/components';
+import { useAppT } from '@djangocfg/i18n';
 
 import { AUTH } from '../../constants';
 import { useAuthFormContext } from '../../context';
@@ -31,14 +30,16 @@ export const TwoFactorStep: React.FC = () => {
     error,
     is2FALoading,
     twoFactorWarning,
+    twoFactorAttemptsRemaining,
     setTwoFactorCode,
     handle2FASubmit,
     handleUseBackupCode,
     handleUseTOTP,
+    handleBackToIdentifier,
   } = useAuthFormContext();
 
   // Translations
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const content = useMemo(() => ({
     title: t('layouts.auth.twoFactor.title'),
     subtitle: {
@@ -53,57 +54,75 @@ export const TwoFactorStep: React.FC = () => {
       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">
-      <AuthHeader title={content.title} subtitle={subtitle} />
+      <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 font-mono tracking-widest text-center"
-          />
-        ) : (
-          <AuthOTPInput
-            value={twoFactorCode}
-            onChange={setTwoFactorCode}
-            disabled={is2FALoading}
-          />
-        )}
+        <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>
-        )}
+          {twoFactorWarning && (
+            <div className="auth-dev-notice">{twoFactorWarning}</div>
+          )}
 
-        <AuthError message={error} />
+          <AuthError message={error} />
 
-        <AuthButton
-          loading={is2FALoading}
-          disabled={!useBackupCode && twoFactorCode.length !== AUTH.OTP_LENGTH}
-        >
-          {content.button}
-        </AuthButton>
+          {twoFactorAttemptsRemaining !== null && twoFactorAttemptsRemaining <= 3 && (
+            <div className="auth-dev-notice">
+              {twoFactorAttemptsRemaining} attempt{twoFactorAttemptsRemaining !== 1 ? 's' : ''} remaining
+            </div>
+          )}
 
-        <div className="auth-actions">
-          <AuthLink
-            onClick={useBackupCode ? handleUseTOTP : handleUseBackupCode}
-            disabled={is2FALoading}
+          <AuthButton
+            loading={is2FALoading}
+            disabled={!useBackupCode && twoFactorCode.length !== AUTH.OTP_LENGTH}
           >
-            {useBackupCode ? content.toggle.toTotp : content.toggle.toBackup}
-          </AuthLink>
-        </div>
-      </form>
+            {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>
   );
 };

package/src/layouts/AuthLayout/context.tsx

@@ -14,7 +14,6 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   supportUrl,
   termsUrl,
   privacyUrl,
-  enablePhoneAuth = false,
   enableGithubAuth = false,
   enable2FASetup = true,
   logoUrl,
@@ -46,7 +45,6 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
     supportUrl,
     termsUrl,
     privacyUrl,
-    enablePhoneAuth,
     enableGithubAuth,
     enable2FASetup,
     logoUrl,

package/src/layouts/AuthLayout/index.ts

@@ -3,13 +3,12 @@
  */
 
 // Main layout
-export { AuthLayout } from './AuthLayout';
-export type { AuthLayoutProps } from './AuthLayout';
+export { AuthLayout, useAuthLayoutContext } from './AuthLayout';
 
 // Context and hooks
 export { AuthFormProvider, useAuthFormContext } from './context';
 
-// Apple-style step components
+// Step components
 export {
   IdentifierStep,
   OTPStep,
@@ -23,12 +22,16 @@ export {
 // Shared UI components
 export * from './components/shared';
 
-// Types (re-exported from @djangocfg/api/auth)
+// Types — all from single source: ./types
 export type {
-  AuthChannel,
+  // Auth logic (re-exported from @djangocfg/api/auth)
   AuthStep,
   AuthFormState,
-  AuthFormContextType,
+  AuthFormReturn,
+  UseAuthFormOptions,
+  // Layout UI types (owned by this package)
   AuthLayoutConfig,
+  AuthFormContextType,
+  AuthLayoutProps,
   AuthHelpProps,
 } from './types';