@djangocfg/layouts 2.1.109 → 2.1.111

package/src/layouts/AuthLayout/components/OTPForm.tsx

@@ -1,174 +0,0 @@
-'use client';
-
-import { ArrowLeft, Mail, MessageCircle, RotateCw, ShieldCheck } from 'lucide-react';
-import React, { useCallback, useRef } from 'react';
-
-import {
-    Button, Card, CardContent, CardDescription, CardHeader, CardTitle, OTPInput
-} from '@djangocfg/ui-core/components';
-
-import { config } from '../../../utils';
-import { useAuthFormContext } from '../context';
-import { AuthHelp } from './AuthHelp';
-
-export const OTPForm: React.FC = () => {
-  const {
-    identifier,
-    channel,
-    otp,
-    isLoading,
-    error,
-    supportUrl,
-    setOtp,
-    handleOTPSubmit,
-    handleResendOTP,
-    handleBackToIdentifier,
-    isAutoSubmittingFromUrl,
-  } = useAuthFormContext();
-
-  // Ref to track if auto-submit is in progress to prevent duplicate submissions
-  const isAutoSubmittingRef = useRef(false);
-
-  // Handle auto-submit when OTP is complete (after paste or last digit entry)
-  // Note: useAutoAuth already handles auto-submit from URL, this handles manual input/paste
-  const handleOTPComplete = useCallback((completedValue: string) => {
-    // Prevent duplicate submissions - check local ref, isLoading, and URL auto-submit ref
-    if (isAutoSubmittingRef.current || isLoading || isAutoSubmittingFromUrl.current) return;
-
-    if (completedValue.length === 6) {
-      isAutoSubmittingRef.current = true;
-
-      // Create a fake form event for handleOTPSubmit
-      const fakeEvent = {
-        preventDefault: () => {},
-      } as React.FormEvent;
-
-      // Small delay to ensure state is updated, then submit
-      // Reset ref after submit completes (isLoading will handle preventing re-submits)
-      setTimeout(async () => {
-        try {
-          await handleOTPSubmit(fakeEvent);
-        } finally {
-          isAutoSubmittingRef.current = false;
-        }
-      }, 100);
-    }
-  }, [handleOTPSubmit, isLoading, isAutoSubmittingFromUrl]);
-
-  const getChannelIcon = () => {
-    return channel === 'phone' ? (
-      <div className="flex items-center justify-center">
-        <MessageCircle className="w-5 h-5 text-primary" />
-      </div>
-    ) : (
-      <Mail className="w-5 h-5 text-primary" />
-    );
-  };
-
-  const getChannelTitle = () => {
-    return channel === 'phone' ? 'Verify Your Phone' : 'Verify Your Email';
-  };
-
-  const getChannelDescription = () => {
-    const channelName = channel === 'phone' ? 'phone number' : 'email address';
-    const method = channel === 'phone' ? 'WhatsApp/SMS' : 'email';
-    return `We've sent a 6-digit verification code to your ${channelName} via ${method}`;
-  };
-
-  return (
-    <Card className="w-full max-w-md mx-auto shadow-lg border border-border bg-card/50 backdrop-blur-sm">
-      <CardHeader className="text-center pb-6">
-        <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
-          {getChannelIcon()}
-        </div>
-        <CardTitle className="text-xl font-semibold">{getChannelTitle()}</CardTitle>
-        <CardDescription className="text-muted-foreground">
-          {getChannelDescription()}
-          <br />
-          <span className="font-medium text-foreground">{identifier}</span>
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        <form onSubmit={handleOTPSubmit} className="space-y-6">
-          <div className="space-y-3">
-            <label className="text-sm font-medium text-foreground text-center block">
-              Enter verification code
-            </label>
-            <div className="flex justify-center">
-              <OTPInput
-                length={6}
-                validationMode="numeric"
-                pasteBehavior="clean"
-                value={otp}
-                onChange={setOtp}
-                onComplete={handleOTPComplete}
-                disabled={isLoading}
-                autoFocus={true}
-                autoSubmit={false}
-                size="lg"
-              />
-            </div>
-
-            {/* Development Mode Notice */}
-            {config.isDevelopment && (
-              <div className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 p-2 rounded-md border border-amber-200 dark:border-amber-800 text-center">
-                🔧 Dev Mode: Any OTP code works
-              </div>
-            )}
-          </div>
-
-          <div className="space-y-4">
-            <Button
-              type="submit"
-              size="lg"
-              className="w-full"
-              disabled={otp.length < 6}
-              loading={isLoading}
-            >
-              <ShieldCheck className="w-5 h-5" />
-              Verify Code
-            </Button>
-
-            <div className="flex gap-3">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleBackToIdentifier}
-                disabled={isLoading}
-                className="flex-1"
-              >
-                <ArrowLeft className="w-4 h-4" />
-                Back
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleResendOTP}
-                disabled={isLoading}
-                className="flex-1"
-              >
-                <RotateCw className="w-4 h-4" />
-                Resend
-              </Button>
-            </div>
-          </div>
-        </form>
-
-        {/* Error Message */}
-        {error && (
-          <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
-            {error}
-          </div>
-        )}
-
-        {supportUrl && (
-          <div className="mt-4">
-            <AuthHelp />
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};
-

package/src/layouts/AuthLayout/components/TwoFactorForm.tsx

@@ -1,140 +0,0 @@
-'use client';
-
-import { KeyRound, Loader2, ShieldCheck } from 'lucide-react';
-import React from 'react';
-
-import {
-  Alert,
-  AlertDescription,
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  OTPInput,
-  Input,
-} from '@djangocfg/ui-core/components';
-
-import { useAuthFormContext } from '../context';
-
-/**
- * Two-Factor Authentication Form
- *
- * Displays TOTP code input or backup code input based on user selection.
- * Used after OTP/OAuth verification when user has 2FA enabled.
- */
-export const TwoFactorForm: React.FC = () => {
-  const {
-    twoFactorCode,
-    useBackupCode,
-    error,
-    is2FALoading,
-    twoFactorWarning,
-    setTwoFactorCode,
-    handle2FASubmit,
-    handleUseBackupCode,
-    handleUseTOTP,
-  } = useAuthFormContext();
-
-  return (
-    <Card className="w-full">
-      <CardHeader className="space-y-1 text-center">
-        <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
-          <ShieldCheck className="w-6 h-6 text-primary" />
-        </div>
-        <CardTitle className="text-2xl">Two-Factor Authentication</CardTitle>
-        <CardDescription>
-          {useBackupCode
-            ? 'Enter one of your backup recovery codes'
-            : 'Enter the 6-digit code from your authenticator app'}
-        </CardDescription>
-      </CardHeader>
-
-      <form onSubmit={handle2FASubmit}>
-        <CardContent className="space-y-4">
-          {/* Error Alert */}
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          {/* Warning Alert (e.g., low backup codes) */}
-          {twoFactorWarning && (
-            <Alert>
-              <AlertDescription>{twoFactorWarning}</AlertDescription>
-            </Alert>
-          )}
-
-          {/* TOTP Code Input */}
-          {!useBackupCode && (
-            <div className="flex justify-center">
-              <OTPInput
-                length={6}
-                validationMode="numeric"
-                pasteBehavior="clean"
-                value={twoFactorCode}
-                onChange={setTwoFactorCode}
-                disabled={is2FALoading}
-                autoFocus={true}
-                size="lg"
-              />
-            </div>
-          )}
-
-          {/* Backup Code Input */}
-          {useBackupCode && (
-            <div className="space-y-2">
-              <Input
-                type="text"
-                placeholder="Enter backup code"
-                value={twoFactorCode}
-                onChange={(e) => setTwoFactorCode(e.target.value.toUpperCase())}
-                disabled={is2FALoading}
-                className="text-center font-mono text-lg tracking-widest"
-                maxLength={12}
-                autoComplete="off"
-              />
-              <p className="text-xs text-muted-foreground text-center">
-                Backup codes are 8 characters, letters and numbers
-              </p>
-            </div>
-          )}
-        </CardContent>
-
-        <CardFooter className="flex flex-col space-y-3">
-          <Button
-            type="submit"
-            className="w-full"
-            disabled={is2FALoading || (!useBackupCode && twoFactorCode.length !== 6)}
-          >
-            {is2FALoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Verifying...
-              </>
-            ) : (
-              'Verify'
-            )}
-          </Button>
-
-          {/* Toggle between TOTP and Backup Code */}
-          <Button
-            type="button"
-            variant="ghost"
-            className="w-full text-sm"
-            onClick={useBackupCode ? handleUseTOTP : handleUseBackupCode}
-            disabled={is2FALoading}
-          >
-            <KeyRound className="mr-2 h-4 w-4" />
-            {useBackupCode
-              ? 'Use authenticator app instead'
-              : "Can't access your authenticator? Use a backup code"}
-          </Button>
-        </CardFooter>
-      </form>
-    </Card>
-  );
-};

package/src/layouts/AuthLayout/components/TwoFactorSetup.tsx

@@ -1,286 +0,0 @@
-'use client';
-
-import { CheckCircle, Copy, Eye, EyeOff, Loader2, ShieldCheck } from 'lucide-react';
-import React, { useState } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
-
-import { useTwoFactorSetup } from '@djangocfg/api/auth';
-import {
-  Alert,
-  AlertDescription,
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  OTPInput,
-} from '@djangocfg/ui-core/components';
-
-export interface TwoFactorSetupProps {
-  /** Callback when setup is complete */
-  onComplete?: (backupCodes: string[]) => void;
-  /** Callback to skip setup */
-  onSkip?: () => void;
-  /** Callback on error */
-  onError?: (error: string) => void;
-  /** Device name for the authenticator */
-  deviceName?: string;
-}
-
-/**
- * Two-Factor Authentication Setup Component
- *
- * Guides user through enabling 2FA:
- * 1. Shows QR code to scan with authenticator app
- * 2. User enters code to confirm
- * 3. Shows backup codes to save
- */
-export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
-  onComplete,
-  onSkip,
-  onError,
-  deviceName,
-}) => {
-  const [confirmCode, setConfirmCode] = useState('');
-  const [showSecret, setShowSecret] = useState(false);
-  const [copiedSecret, setCopiedSecret] = useState(false);
-  const [copiedBackupCodes, setCopiedBackupCodes] = useState(false);
-
-  const {
-    isLoading,
-    error,
-    setupData,
-    backupCodes,
-    backupCodesWarning,
-    setupStep,
-    startSetup,
-    confirmSetup,
-    resetSetup,
-  } = useTwoFactorSetup({
-    onComplete,
-    onError,
-  });
-
-  // Start setup on mount if not already started
-  React.useEffect(() => {
-    if (setupStep === 'idle') {
-      startSetup(deviceName);
-    }
-  }, [setupStep, startSetup, deviceName]);
-
-  const handleConfirm = async (e: React.FormEvent) => {
-    e.preventDefault();
-    await confirmSetup(confirmCode);
-  };
-
-  const copySecret = async () => {
-    if (setupData?.secret) {
-      await navigator.clipboard.writeText(setupData.secret);
-      setCopiedSecret(true);
-      setTimeout(() => setCopiedSecret(false), 2000);
-    }
-  };
-
-  const copyBackupCodes = async () => {
-    if (backupCodes) {
-      await navigator.clipboard.writeText(backupCodes.join('\n'));
-      setCopiedBackupCodes(true);
-      setTimeout(() => setCopiedBackupCodes(false), 2000);
-    }
-  };
-
-  // Loading state
-  if (isLoading && !setupData) {
-    return (
-      <Card className="w-full max-w-md mx-auto">
-        <CardContent className="flex items-center justify-center py-12">
-          <Loader2 className="w-8 h-8 animate-spin text-primary" />
-        </CardContent>
-      </Card>
-    );
-  }
-
-  // Complete - show backup codes
-  if (setupStep === 'complete' && backupCodes) {
-    return (
-      <Card className="w-full max-w-md mx-auto">
-        <CardHeader className="space-y-1 text-center">
-          <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mb-2">
-            <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
-          </div>
-          <CardTitle className="text-2xl">2FA Enabled!</CardTitle>
-          <CardDescription>
-            Save these backup codes in a secure place
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent className="space-y-4">
-          {backupCodesWarning && (
-            <Alert>
-              <AlertDescription>{backupCodesWarning}</AlertDescription>
-            </Alert>
-          )}
-
-          <div className="bg-muted rounded-lg p-4">
-            <div className="grid grid-cols-2 gap-2 font-mono text-sm">
-              {backupCodes.map((code, index) => (
-                <div key={index} className="text-center py-1">
-                  {code}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <p className="text-xs text-muted-foreground text-center">
-            Each code can only be used once. Store them securely.
-          </p>
-        </CardContent>
-
-        <CardFooter className="flex flex-col space-y-3">
-          <Button
-            type="button"
-            variant="outline"
-            className="w-full"
-            onClick={copyBackupCodes}
-          >
-            <Copy className="mr-2 h-4 w-4" />
-            {copiedBackupCodes ? 'Copied!' : 'Copy all codes'}
-          </Button>
-
-          <Button
-            type="button"
-            className="w-full"
-            onClick={() => onComplete?.(backupCodes)}
-          >
-            I've saved my backup codes
-          </Button>
-        </CardFooter>
-      </Card>
-    );
-  }
-
-  // Scanning/Confirming - show QR code
-  return (
-    <Card className="w-full max-w-md mx-auto">
-      <CardHeader className="space-y-1 text-center">
-        <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
-          <ShieldCheck className="w-6 h-6 text-primary" />
-        </div>
-        <CardTitle className="text-2xl">Set Up 2FA</CardTitle>
-        <CardDescription>
-          Scan this QR code with your authenticator app
-        </CardDescription>
-      </CardHeader>
-
-      <form onSubmit={handleConfirm}>
-        <CardContent className="space-y-6">
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          {/* QR Code */}
-          {setupData && (
-            <div className="flex justify-center">
-              <div className="bg-white p-4 rounded-lg">
-                <QRCodeSVG
-                  value={setupData.provisioningUri}
-                  size={200}
-                  level="M"
-                  marginSize={0}
-                />
-              </div>
-            </div>
-          )}
-
-          {/* Manual entry option */}
-          {setupData && (
-            <div className="space-y-2">
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="w-full text-xs"
-                onClick={() => setShowSecret(!showSecret)}
-              >
-                {showSecret ? (
-                  <EyeOff className="mr-2 h-3 w-3" />
-                ) : (
-                  <Eye className="mr-2 h-3 w-3" />
-                )}
-                {showSecret ? 'Hide' : 'Show'} manual entry code
-              </Button>
-
-              {showSecret && (
-                <div className="flex items-center gap-2 bg-muted rounded-lg p-3">
-                  <code className="flex-1 text-xs font-mono break-all">
-                    {setupData.secret}
-                  </code>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={copySecret}
-                  >
-                    <Copy className="h-4 w-4" />
-                  </Button>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Confirm code input */}
-          <div className="space-y-2">
-            <p className="text-sm text-center text-muted-foreground">
-              Enter the 6-digit code from your app to confirm
-            </p>
-            <div className="flex justify-center">
-              <OTPInput
-                length={6}
-                validationMode="numeric"
-                pasteBehavior="clean"
-                value={confirmCode}
-                onChange={setConfirmCode}
-                disabled={isLoading}
-                autoFocus={true}
-                size="lg"
-              />
-            </div>
-          </div>
-        </CardContent>
-
-        <CardFooter className="flex flex-col space-y-3">
-          <Button
-            type="submit"
-            className="w-full"
-            disabled={isLoading || confirmCode.length !== 6}
-          >
-            {isLoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Verifying...
-              </>
-            ) : (
-              'Confirm & Enable 2FA'
-            )}
-          </Button>
-
-          {onSkip && (
-            <Button
-              type="button"
-              variant="ghost"
-              className="w-full"
-              onClick={onSkip}
-              disabled={isLoading}
-            >
-              Skip for now
-            </Button>
-          )}
-        </CardFooter>
-      </form>
-    </Card>
-  );
-};

package/src/layouts/AuthLayout/components/oauth/OAuthProviders.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { Github } from 'lucide-react';
-import React from 'react';
-
-import { useGithubAuth } from '@djangocfg/api/auth';
-import { Button } from '@djangocfg/ui-core/components';
-
-import { useAuthFormContext } from '../../context';
-
-/**
- * OAuth Providers Component
- *
- * Shows OAuth login buttons (GitHub, etc.) when enabled.
- */
-export const OAuthProviders: React.FC = () => {
-  const { enableGithubAuth, sourceUrl, setError } = useAuthFormContext();
-
-  const { isLoading, startGithubAuth } = useGithubAuth({
-    sourceUrl,
-    onError: setError,
-  });
-
-  if (!enableGithubAuth) {
-    return null;
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Divider */}
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-border" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase">
-          <span className="bg-card px-2 text-muted-foreground">
-            Or continue with
-          </span>
-        </div>
-      </div>
-
-      {/* OAuth Buttons */}
-      <Button
-        type="button"
-        variant="outline"
-        size="lg"
-        className="w-full"
-        onClick={startGithubAuth}
-        loading={isLoading}
-      >
-        <Github className="w-5 h-5" />
-        Continue with GitHub
-      </Button>
-    </div>
-  );
-};