@djangocfg/layouts 2.1.264 → 2.1.266

package/src/layouts/ProfileLayout/components/TwoFactorSection.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { Loader2, Shield, ShieldCheck, ShieldOff } from 'lucide-react';
+import { Loader2, Shield, ShieldCheck, ShieldOff, Smartphone, Trash2 } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 
 import { useTwoFactorSetup, useTwoFactorStatus } from '@djangocfg/api/auth';
 import {
   Alert,
   AlertDescription,
+  Badge,
   Button,
   Card,
   CardContent,
@@ -20,279 +21,318 @@ import {
   DialogHeader,
   DialogTitle,
   OTPInput,
+  Separator,
 } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 
-import { SetupStep } from '../../AuthLayout/components/steps/SetupStep';
+import { SetupStepStandalone } from '../../AuthLayout/components/steps/SetupStep';
 
-type ViewState = 'status' | 'setup' | 'disable';
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+type View = 'status' | 'setup';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Status badge
+// ─────────────────────────────────────────────────────────────────────────────
+
+function StatusBadge({ enabled }: { enabled: boolean }) {
+  return (
+    <Badge
+      variant={enabled ? 'default' : 'secondary'}
+      className={cn(
+        'text-xs font-medium',
+        enabled && 'bg-green-500/15 text-green-600 dark:text-green-400 border-green-500/20',
+      )}
+    >
+      {enabled ? 'Enabled' : 'Disabled'}
+    </Badge>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Disable dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+function DisableDialog({
+  open,
+  isLoading,
+  error,
+  onConfirm,
+  onCancel,
+}: {
+  open: boolean;
+  isLoading: boolean;
+  error: string | null;
+  onConfirm: (code: string) => void;
+  onCancel: () => void;
+}) {
+  const [code, setCode] = useState('');
+
+  // Reset on open
+  useEffect(() => {
+    if (open) setCode('');
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onCancel()}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ShieldOff className="w-5 h-5 text-destructive" />
+            Disable Two-Factor Authentication
+          </DialogTitle>
+          <DialogDescription>
+            Enter the 6-digit code from your authenticator app to confirm.
+            This will make your account less secure.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-2 space-y-4">
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+          <div className="flex justify-center">
+            <OTPInput
+              length={6}
+              validationMode="numeric"
+              pasteBehavior="clean"
+              value={code}
+              onChange={setCode}
+              disabled={isLoading}
+              autoFocus
+              size="lg"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => onConfirm(code)}
+            disabled={isLoading || code.length !== 6}
+          >
+            {isLoading ? (
+              <><Loader2 className="mr-2 h-4 w-4 animate-spin" />Disabling…</>
+            ) : (
+              'Disable 2FA'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Device list row
+// ─────────────────────────────────────────────────────────────────────────────
+
+function DeviceRow({ name, createdAt, isPrimary }: {
+  name: string;
+  createdAt: string;
+  isPrimary: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-3 py-3">
+      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-muted flex items-center justify-center">
+        <Smartphone className="w-4 h-4 text-muted-foreground" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{name}</p>
+        <p className="text-xs text-muted-foreground">
+          Added {new Date(createdAt).toLocaleDateString()}
+          {isPrimary && ' · Primary'}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main component
+// ─────────────────────────────────────────────────────────────────────────────
 
-/**
- * Two-Factor Authentication section for ProfileLayout.
- * Allows users to enable/disable 2FA from their profile.
- */
 export const TwoFactorSection: React.FC = () => {
-  const [viewState, setViewState] = useState<ViewState>('status');
-  const [disableCode, setDisableCode] = useState('');
-  const [showDisableDialog, setShowDisableDialog] = useState(false);
+  const [view, setView] = useState<View>('status');
+  const [showDisable, setShowDisable] = useState(false);
 
   const {
-    isLoading: statusLoading,
-    error: statusError,
+    isLoading,
+    error,
     has2FAEnabled,
     devices,
     fetchStatus,
     disable2FA,
-    clearError: clearStatusError,
+    clearError,
   } = useTwoFactorStatus();
 
-  const {
-    resetSetup,
-  } = useTwoFactorSetup();
+  const { resetSetup } = useTwoFactorSetup();
 
-  // Fetch status on mount
-  useEffect(() => {
-    fetchStatus();
-  }, [fetchStatus]);
+  useEffect(() => { fetchStatus(); }, [fetchStatus]);
 
   const handleEnableClick = () => {
     resetSetup();
-    setViewState('setup');
+    setView('setup');
   };
 
-  const handleSetupComplete = () => {
-    setViewState('status');
+  const handleSetupDone = () => {
+    setView('status');
     fetchStatus();
   };
 
-  const handleSetupSkip = () => {
-    setViewState('status');
-  };
-
-  const handleDisableClick = () => {
-    setShowDisableDialog(true);
-    setDisableCode('');
-    clearStatusError();
-  };
-
-  const handleDisableConfirm = async () => {
-    const success = await disable2FA(disableCode);
-    if (success) {
-      setShowDisableDialog(false);
-      setDisableCode('');
-    }
+  const handleDisableConfirm = async (code: string) => {
+    const ok = await disable2FA(code);
+    if (ok) setShowDisable(false);
   };
 
   const handleDisableCancel = () => {
-    setShowDisableDialog(false);
-    setDisableCode('');
-    clearStatusError();
+    setShowDisable(false);
+    clearError();
   };
 
-  // Show setup view
-  if (viewState === 'setup') {
+  // ── Setup flow ──────────────────────────────────────────────────────────────
+  if (view === 'setup') {
     return (
-      <Card className="bg-card/50 backdrop-blur-sm border-border/50">
+      <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Shield className="w-5 h-5" />
-            Enable Two-Factor Authentication
-          </CardTitle>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Shield className="w-4 h-4" />
+              Set up Two-Factor Authentication
+            </CardTitle>
+            <Button variant="ghost" size="sm" onClick={() => setView('status')}>
+              Cancel
+            </Button>
+          </div>
           <CardDescription>
-            Add an extra layer of security to your account
+            Scan the QR code with your authenticator app (Google Authenticator, Authy, etc.)
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <SetupStep
-            onComplete={handleSetupComplete}
-            onSkip={handleSetupSkip}
+          <SetupStepStandalone
+            onComplete={handleSetupDone}
+            onSkip={() => setView('status')}
           />
         </CardContent>
       </Card>
     );
   }
 
-  // Loading state
-  if (statusLoading && has2FAEnabled === null) {
+  // ── Loading skeleton ────────────────────────────────────────────────────────
+  if (isLoading && has2FAEnabled === null) {
     return (
-      <Card className="bg-card/50 backdrop-blur-sm border-border/50">
-        <CardContent className="flex items-center justify-center py-8">
-          <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+      <Card>
+        <CardContent className="flex items-center justify-center py-10">
+          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
         </CardContent>
       </Card>
     );
   }
 
-  // Main status view
+  // ── Status view ─────────────────────────────────────────────────────────────
   return (
     <>
-      <Card className="bg-card/50 backdrop-blur-sm border-border/50">
+      <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex items-center gap-3">
+              {has2FAEnabled ? (
+                <div className="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center flex-shrink-0">
+                  <ShieldCheck className="w-5 h-5 text-green-500" />
+                </div>
+              ) : (
+                <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+                  <ShieldOff className="w-5 h-5 text-muted-foreground" />
+                </div>
+              )}
+              <div>
+                <div className="flex items-center gap-2">
+                  <CardTitle className="text-base">Two-Factor Authentication</CardTitle>
+                  <StatusBadge enabled={!!has2FAEnabled} />
+                </div>
+                <CardDescription className="mt-0.5">
+                  {has2FAEnabled
+                    ? `${devices.length} authenticator device${devices.length !== 1 ? 's' : ''} connected`
+                    : 'Add an extra layer of security to your account'}
+                </CardDescription>
+              </div>
+            </div>
+
             {has2FAEnabled ? (
-              <ShieldCheck className="w-5 h-5 text-green-500" />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => { clearError(); setShowDisable(true); }}
+                disabled={isLoading}
+                className="flex-shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10 border-destructive/30"
+              >
+                Disable
+              </Button>
             ) : (
-              <ShieldOff className="w-5 h-5 text-muted-foreground" />
+              <Button size="sm" onClick={handleEnableClick} disabled={isLoading} className="flex-shrink-0">
+                Enable 2FA
+              </Button>
             )}
-            Two-Factor Authentication
-          </CardTitle>
-          <CardDescription>
-            {has2FAEnabled
-              ? 'Your account is protected with two-factor authentication'
-              : 'Add an extra layer of security to your account'}
-          </CardDescription>
+          </div>
         </CardHeader>
 
-        <CardContent className="space-y-4">
-          {statusError && (
+        {/* Fetch error */}
+        {error && !showDisable && (
+          <CardContent className="pt-0">
             <Alert variant="destructive">
-              <AlertDescription>{statusError}</AlertDescription>
+              <AlertDescription>{error}</AlertDescription>
             </Alert>
-          )}
-
-          {has2FAEnabled ? (
-            <>
-              {/* 2FA Enabled State */}
-              <div className="flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
-                <div className="flex items-center gap-3">
-                  <ShieldCheck className="w-8 h-8 text-green-600 dark:text-green-400" />
-                  <div>
-                    <p className="font-medium text-green-800 dark:text-green-200">
-                      2FA is enabled
-                    </p>
-                    <p className="text-sm text-green-600 dark:text-green-400">
-                      {devices.length} authenticator device{devices.length !== 1 ? 's' : ''} connected
-                    </p>
-                  </div>
-                </div>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handleDisableClick}
-                  disabled={statusLoading}
-                  className="text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20"
-                >
-                  Disable 2FA
-                </Button>
-              </div>
-
-              {/* Device list */}
-              {devices.length > 0 && (
-                <div className="space-y-2">
-                  <p className="text-sm font-medium text-muted-foreground">
-                    Connected Devices
-                  </p>
-                  <div className="space-y-2">
-                    {devices.map((device) => (
-                      <div
-                        key={device.id}
-                        className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
-                      >
-                        <div className="flex items-center gap-3">
-                          <Shield className="w-5 h-5 text-muted-foreground" />
-                          <div>
-                            <p className="font-medium text-sm">{device.name}</p>
-                            <p className="text-xs text-muted-foreground">
-                              Added {new Date(device.createdAt).toLocaleDateString()}
-                              {device.isPrimary && ' • Primary'}
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </>
-          ) : (
-            <>
-              {/* 2FA Disabled State */}
-              <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <ShieldOff className="w-8 h-8 text-muted-foreground" />
-                  <div>
-                    <p className="font-medium">2FA is not enabled</p>
-                    <p className="text-sm text-muted-foreground">
-                      Protect your account with an authenticator app
-                    </p>
-                  </div>
-                </div>
-                <Button
-                  onClick={handleEnableClick}
-                  disabled={statusLoading}
-                >
-                  Enable 2FA
-                </Button>
-              </div>
+          </CardContent>
+        )}
 
-              {/* Security recommendation */}
-              <Alert>
-                <Shield className="w-4 h-4" />
-                <AlertDescription>
-                  Two-factor authentication adds an extra layer of security by requiring a code from your authenticator app when signing in.
-                </AlertDescription>
-              </Alert>
-            </>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Disable 2FA Dialog */}
-      <Dialog open={showDisableDialog} onOpenChange={setShowDisableDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Disable Two-Factor Authentication</DialogTitle>
-            <DialogDescription>
-              Enter the 6-digit code from your authenticator app to disable 2FA.
-              This will make your account less secure.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="py-4">
-            {statusError && (
-              <Alert variant="destructive" className="mb-4">
-                <AlertDescription>{statusError}</AlertDescription>
-              </Alert>
-            )}
+        {/* Device list */}
+        {has2FAEnabled && devices.length > 0 && (
+          <CardContent className="pt-0">
+            <Separator className="mb-1" />
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mt-3 mb-1">
+              Connected devices
+            </p>
+            <div className="divide-y">
+              {devices.map((device) => (
+                <DeviceRow
+                  key={device.id}
+                  name={device.name}
+                  createdAt={device.createdAt}
+                  isPrimary={device.isPrimary}
+                />
+              ))}
+            </div>
+          </CardContent>
+        )}
 
-            <div className="flex justify-center">
-              <OTPInput
-                length={6}
-                validationMode="numeric"
-                pasteBehavior="clean"
-                value={disableCode}
-                onChange={setDisableCode}
-                disabled={statusLoading}
-                autoFocus={true}
-                size="lg"
-              />
+        {/* Not enabled — info callout */}
+        {!has2FAEnabled && (
+          <CardContent className="pt-0">
+            <div className="flex gap-3 p-3 rounded-lg bg-muted/50 text-sm text-muted-foreground">
+              <Shield className="w-4 h-4 mt-0.5 flex-shrink-0" />
+              <span>
+                Two-factor authentication adds a second verification step when signing in,
+                protecting your account even if your password is compromised.
+              </span>
             </div>
-          </div>
+          </CardContent>
+        )}
+      </Card>
 
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={handleDisableCancel}
-              disabled={statusLoading}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleDisableConfirm}
-              disabled={statusLoading || disableCode.length !== 6}
-            >
-              {statusLoading ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Disabling...
-                </>
-              ) : (
-                'Disable 2FA'
-              )}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <DisableDialog
+        open={showDisable}
+        isLoading={isLoading}
+        error={error}
+        onConfirm={handleDisableConfirm}
+        onCancel={handleDisableCancel}
+      />
     </>
   );
 };