@djangocfg/layouts 2.1.108 → 2.1.110

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

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+
+import { Checkbox } from '@djangocfg/ui-core/components';
+
+export interface TermsCheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  termsUrl?: string;
+  privacyUrl?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * TermsCheckbox - Compact terms acceptance checkbox
+ */
+export const TermsCheckbox: React.FC<TermsCheckboxProps> = ({
+  checked,
+  onChange,
+  termsUrl,
+  privacyUrl,
+  disabled = false,
+  className = '',
+}) => {
+  // Don't render if no links provided
+  if (!termsUrl && !privacyUrl) {
+    return null;
+  }
+
+  return (
+    <div className={`auth-terms ${className}`}>
+      <Checkbox
+        id="auth-terms"
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+        className="auth-terms-checkbox"
+      />
+      <label htmlFor="auth-terms">
+        I agree to the{' '}
+        {termsUrl && (
+          <a href={termsUrl} target="_blank" rel="noopener noreferrer">
+            Terms
+          </a>
+        )}
+        {termsUrl && privacyUrl && ' and '}
+        {privacyUrl && (
+          <a href={privacyUrl} target="_blank" rel="noopener noreferrer">
+            Privacy Policy
+          </a>
+        )}
+      </label>
+    </div>
+  );
+};

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

@@ -0,0 +1,21 @@
+export { AuthContainer } from './AuthContainer';
+export { AuthHeader } from './AuthHeader';
+export { AuthFooter } from './AuthFooter';
+export { AuthDivider } from './AuthDivider';
+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';
+export type { AuthHeaderProps } from './AuthHeader';
+export type { AuthFooterProps } from './AuthFooter';
+export type { AuthDividerProps } from './AuthDivider';
+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

@@ -0,0 +1,171 @@
+'use client';
+
+import { Github } from 'lucide-react';
+import React, { useEffect } from 'react';
+
+import { useGithubAuth } from '@djangocfg/api/auth';
+import { Input, PhoneInput } from '@djangocfg/ui-core/components';
+
+import { AUTH_CONTENT } from '../../content';
+import { useAuthFormContext } from '../../context';
+import {
+  AuthButton,
+  AuthContainer,
+  AuthDivider,
+  AuthError,
+  AuthFooter,
+  AuthHeader,
+  ChannelToggle,
+  TermsCheckbox,
+} from '../shared';
+
+/**
+ * IdentifierStep - Apple-style email/phone input step
+ *
+ * Clean, minimal design with:
+ * - Optional logo
+ * - Channel toggle (email/phone)
+ * - Single input field
+ * - Terms checkbox
+ * - OAuth options
+ */
+export const IdentifierStep: React.FC = () => {
+  const {
+    identifier,
+    channel,
+    isLoading,
+    acceptedTerms,
+    error,
+    logoUrl,
+    termsUrl,
+    privacyUrl,
+    supportUrl,
+    enablePhoneAuth,
+    enableGithubAuth,
+    sourceUrl,
+    setIdentifier,
+    setChannel,
+    setAcceptedTerms,
+    setError,
+    handleIdentifierSubmit,
+    detectChannelFromIdentifier,
+    validateIdentifier,
+  } = useAuthFormContext();
+
+  // GitHub OAuth
+  const { isLoading: isGithubLoading, startGithubAuth } = useGithubAuth({
+    sourceUrl,
+    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 content = AUTH_CONTENT.identifier;
+  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} />
+
+      <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
+            className="auth-input"
+          />
+        )}
+
+        <TermsCheckbox
+          checked={acceptedTerms}
+          onChange={setAcceptedTerms}
+          termsUrl={termsUrl}
+          privacyUrl={privacyUrl}
+          disabled={isLoading}
+        />
+
+        <AuthError message={error} />
+
+        <AuthButton
+          loading={isLoading}
+          disabled={!identifier || (hasTerms && !acceptedTerms)}
+        >
+          {content.button}
+        </AuthButton>
+      </form>
+
+      {enableGithubAuth && (
+        <>
+          <AuthDivider />
+          <AuthButton
+            type="button"
+            variant="secondary"
+            loading={isGithubLoading}
+            onClick={startGithubAuth}
+          >
+            <Github className="w-5 h-5" />
+            {content.oauth.github}
+          </AuthButton>
+        </>
+      )}
+
+      <AuthFooter
+        termsUrl={termsUrl}
+        privacyUrl={privacyUrl}
+        supportUrl={supportUrl}
+      />
+    </AuthContainer>
+  );
+};

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

@@ -0,0 +1,114 @@
+'use client';
+
+import React, { useCallback, useState } from 'react';
+
+import { config } from '../../../../utils';
+import { AUTH } from '../../constants';
+import { AUTH_CONTENT } from '../../content';
+import { useAuthFormContext } from '../../context';
+import {
+  AuthButton,
+  AuthContainer,
+  AuthError,
+  AuthHeader,
+  AuthLink,
+  AuthOTPInput,
+} from '../shared';
+
+type SubmitState = 'idle' | 'submitting';
+
+/**
+ * OTPStep - Apple-style OTP verification
+ *
+ * Minimal design focused on the OTP input:
+ * - Clear title
+ * - Masked identifier for privacy
+ * - Large OTP input
+ * - Text links for actions
+ */
+export const OTPStep: React.FC = () => {
+  const {
+    identifier,
+    channel,
+    otp,
+    isLoading,
+    error,
+    setOtp,
+    handleOTPSubmit,
+    handleResendOTP,
+    handleBackToIdentifier,
+    isAutoSubmittingFromUrl,
+  } = useAuthFormContext();
+
+  const [submitState, setSubmitState] = useState<SubmitState>('idle');
+
+  // Mask identifier for privacy
+  const maskedIdentifier = React.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]);
+
+  // Auto-submit on complete (state machine approach)
+  const handleOTPComplete = useCallback(
+    async (completedValue: string) => {
+      if (submitState !== 'idle' || isLoading || isAutoSubmittingFromUrl.current) return;
+      if (completedValue.length !== AUTH.OTP_LENGTH) return;
+
+      setSubmitState('submitting');
+      const fakeEvent = { preventDefault: () => {} } as React.FormEvent;
+
+      setTimeout(async () => {
+        try {
+          await handleOTPSubmit(fakeEvent);
+        } finally {
+          setSubmitState('idle');
+        }
+      }, AUTH.AUTO_SUBMIT_DELAY);
+    },
+    [handleOTPSubmit, isLoading, isAutoSubmittingFromUrl, submitState]
+  );
+
+  const content = AUTH_CONTENT.otp;
+
+  return (
+    <AuthContainer step="otp">
+      <AuthHeader
+        title={content.title}
+        subtitle={content.subtitle}
+        identifier={maskedIdentifier}
+      />
+
+      <form onSubmit={handleOTPSubmit} className="auth-form-group">
+        <AuthOTPInput
+          value={otp}
+          onChange={setOtp}
+          onComplete={handleOTPComplete}
+          disabled={isLoading}
+        />
+
+        {config.isDevelopment && (
+          <div className="auth-dev-notice">{AUTH_CONTENT.dev.anyCodeWorks}</div>
+        )}
+
+        <AuthError message={error} />
+
+        <AuthButton loading={isLoading} disabled={otp.length < AUTH.OTP_LENGTH}>
+          {content.button}
+        </AuthButton>
+
+        <div className="auth-actions">
+          <AuthLink onClick={handleResendOTP} disabled={isLoading}>
+            {content.resend}
+          </AuthLink>
+          <AuthLink onClick={handleBackToIdentifier} disabled={isLoading}>
+            {content.changeIdentifier(channel)}
+          </AuthLink>
+        </div>
+      </form>
+    </AuthContainer>
+  );
+};

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

@@ -0,0 +1,70 @@
+'use client';
+
+import { Check, Copy } from 'lucide-react';
+import React from 'react';
+
+import { AUTH_CONTENT } from '../../../content';
+import { useCopyToClipboard } from '../../../hooks';
+import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
+
+interface SetupCompleteProps {
+  backupCodes: string[];
+  backupCodesWarning?: string;
+  onDone: () => void;
+}
+
+/**
+ * SetupComplete - Backup codes display after 2FA setup
+ */
+export const SetupComplete: React.FC<SetupCompleteProps> = ({
+  backupCodes,
+  backupCodesWarning,
+  onDone,
+}) => {
+  const { copied, copy } = useCopyToClipboard();
+  const content = AUTH_CONTENT.setup.complete;
+
+  const handleCopyAll = () => {
+    copy(backupCodes.join('\n'));
+  };
+
+  return (
+    <AuthContainer step="2fa-setup">
+      <AuthHeader title={content.title} subtitle={content.subtitle} />
+
+      <div className="auth-form-group">
+        {backupCodesWarning && (
+          <div className="auth-dev-notice">{backupCodesWarning}</div>
+        )}
+
+        <div className="auth-backup-codes">
+          {backupCodes.map((code, index) => (
+            <div key={index} className="auth-backup-code">
+              {code}
+            </div>
+          ))}
+        </div>
+
+        <p className="auth-instruction">{content.instruction}</p>
+
+        <AuthButton type="button" variant="secondary" onClick={handleCopyAll}>
+          {copied ? (
+            <>
+              <Check className="w-4 h-4" />
+              {content.copied}
+            </>
+          ) : (
+            <>
+              <Copy className="w-4 h-4" />
+              {content.copyAll}
+            </>
+          )}
+        </AuthButton>
+
+        <AuthButton type="button" onClick={onDone}>
+          {content.done}
+        </AuthButton>
+      </div>
+    </AuthContainer>
+  );
+};

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

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+
+import { AUTH_CONTENT } from '../../../content';
+import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
+
+/**
+ * SetupLoading - Loading state for 2FA setup
+ */
+export const SetupLoading: React.FC = () => {
+  const content = AUTH_CONTENT.setup.loading;
+
+  return (
+    <AuthContainer step="2fa-setup">
+      <AuthHeader title={content.title} />
+      <div className="auth-form-group">
+        <AuthButton loading disabled>
+          {content.button}
+        </AuthButton>
+      </div>
+    </AuthContainer>
+  );
+};

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 />;
+};