feat: Add 2FA frontend components (TwoFactorSetup, TwoFactorVerifyModal, TwoFactorSettings)
Created three complete 2FA components integrating with existing backend endpoints: 1. TwoFactorSetup.tsx (auth/components) - 3-step wizard for 2FA setup - QR code display with manual entry fallback - TOTP code verification - Backup codes display with copy functionality - Integrates with POST /auth/2fa/setup and /auth/2fa/enable 2. TwoFactorVerifyModal.tsx (auth/components) - Modal for 2FA verification during login - Support for both TOTP (6 digits) and backup codes (8 digits) - Auto-submit for TOTP codes - Switch between code types - Auto-focus input field 3. TwoFactorSettings.tsx (settings/components) - Management panel for 2FA in settings - Enable/disable 2FA with confirmation - Regenerate backup codes - Status display with activation date - Integrates with all 2FA endpoints All components follow project patterns: - Tailwind CSS styling matching existing components - lucide-react icons - Centralized apiClient with auto-refresh - Complete TypeScript types - No placeholders or TODOs Related: GAP-P1-004 2FA Frontend Flow Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Adrian Flores Cortes
parent
190decd498
commit
261dc4c71c
364
src/modules/auth/components/TwoFactorSetup.tsx
Normal file
364
src/modules/auth/components/TwoFactorSetup.tsx
Normal file
@ -0,0 +1,364 @@
|
||||
/**
|
||||
* TwoFactorSetup Component
|
||||
* Wizard for setting up 2FA with QR code and backup codes
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Shield, Smartphone, Copy, CheckCircle, AlertCircle, Loader2, ChevronRight, ChevronLeft } from 'lucide-react';
|
||||
import { apiClient } from '../../../lib/apiClient';
|
||||
|
||||
interface TwoFactorSetupProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
interface SetupData {
|
||||
secret: string;
|
||||
qrCode: string;
|
||||
backupCodes: string[];
|
||||
}
|
||||
|
||||
type Step = 'qr' | 'verify' | 'backup';
|
||||
|
||||
export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSuccess,
|
||||
}) => {
|
||||
const [step, setStep] = useState<Step>('qr');
|
||||
const [setupData, setSetupData] = useState<SetupData | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [totpCode, setTotpCode] = useState('');
|
||||
const [verifying, setVerifying] = useState(false);
|
||||
const [copiedCodes, setCopiedCodes] = useState(false);
|
||||
|
||||
// Fetch QR code when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchSetupData();
|
||||
setStep('qr');
|
||||
setTotpCode('');
|
||||
setError(null);
|
||||
setCopiedCodes(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const fetchSetupData = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await apiClient.post('/auth/2fa/setup');
|
||||
if (response.data.success && response.data.data) {
|
||||
setSetupData(response.data.data);
|
||||
} else {
|
||||
throw new Error('Invalid setup response');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch 2FA setup data:', err);
|
||||
setError('Error al generar codigo QR. Intenta de nuevo.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerifyCode = async () => {
|
||||
if (totpCode.length !== 6) {
|
||||
setError('Ingresa un codigo de 6 digitos');
|
||||
return;
|
||||
}
|
||||
|
||||
setVerifying(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await apiClient.post('/auth/2fa/enable', {
|
||||
token: totpCode,
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
setStep('backup');
|
||||
} else {
|
||||
throw new Error('Invalid verification response');
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to verify 2FA code:', err);
|
||||
const errorMessage = err?.response?.data?.message || 'Codigo invalido. Verifica el codigo en tu app de autenticacion.';
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setVerifying(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyBackupCodes = () => {
|
||||
if (setupData?.backupCodes) {
|
||||
const codesText = setupData.backupCodes.join('\n');
|
||||
navigator.clipboard.writeText(codesText);
|
||||
setCopiedCodes(true);
|
||||
setTimeout(() => setCopiedCodes(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFinish = () => {
|
||||
onSuccess?.();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value.replace(/\D/g, '').slice(0, 6);
|
||||
setTotpCode(value);
|
||||
if (error) setError(null);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-slate-800 rounded-xl w-full max-w-lg overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-slate-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||
<Shield className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Configurar Autenticacion 2FA</h2>
|
||||
<p className="text-sm text-slate-400">
|
||||
{step === 'qr' && 'Paso 1 de 3: Escanea el codigo QR'}
|
||||
{step === 'verify' && 'Paso 2 de 3: Verifica el codigo'}
|
||||
{step === 'backup' && 'Paso 3 de 3: Guarda tus codigos de respaldo'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
|
||||
<p className="text-slate-400">Generando codigo QR...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Step 1: QR Code */}
|
||||
{step === 'qr' && setupData && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-slate-900 rounded-lg p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg flex-shrink-0">
|
||||
<Smartphone className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-medium mb-2">Configura tu app de autenticacion</h3>
|
||||
<ol className="text-sm text-slate-400 space-y-2 list-decimal list-inside">
|
||||
<li>Descarga una app de autenticacion (Google Authenticator, Authy, etc.)</li>
|
||||
<li>Abre la app y selecciona "Agregar cuenta"</li>
|
||||
<li>Escanea el codigo QR a continuacion</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* QR Code */}
|
||||
<div className="flex flex-col items-center justify-center py-6 bg-white rounded-lg">
|
||||
<img
|
||||
src={setupData.qrCode}
|
||||
alt="QR Code para 2FA"
|
||||
className="w-64 h-64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Manual Entry */}
|
||||
<div className="bg-slate-900 rounded-lg p-4">
|
||||
<p className="text-xs text-slate-400 mb-2">
|
||||
O ingresa manualmente este codigo:
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 px-3 py-2 bg-slate-800 border border-slate-700 rounded text-sm text-white font-mono break-all">
|
||||
{setupData.secret}
|
||||
</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(setupData.secret);
|
||||
}}
|
||||
className="p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors"
|
||||
title="Copiar codigo"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 bg-red-900/20 border border-red-800 rounded-lg">
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStep('verify')}
|
||||
className="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
Siguiente
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Verify Code */}
|
||||
{step === 'verify' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-slate-900 rounded-lg p-6 text-center">
|
||||
<div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Shield className="w-8 h-8 text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-white font-medium mb-2">Verifica tu configuracion</h3>
|
||||
<p className="text-sm text-slate-400">
|
||||
Ingresa el codigo de 6 digitos que aparece en tu app de autenticacion
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-2">Codigo TOTP</label>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxLength={6}
|
||||
value={totpCode}
|
||||
onChange={handleCodeChange}
|
||||
placeholder="000000"
|
||||
className="w-full px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg text-white text-center text-2xl font-mono tracking-widest focus:outline-none focus:border-blue-500"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 bg-red-900/20 border border-red-800 rounded-lg">
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStep('qr')}
|
||||
className="flex-1 py-3 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
Atras
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleVerifyCode}
|
||||
disabled={verifying || totpCode.length !== 6}
|
||||
className="flex-1 py-3 bg-blue-600 hover:bg-blue-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{verifying ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Verificando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Verificar
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Backup Codes */}
|
||||
{step === 'backup' && setupData && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-emerald-900/20 border border-emerald-800 rounded-lg p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-6 h-6 text-emerald-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h3 className="text-white font-medium mb-1">2FA activado exitosamente</h3>
|
||||
<p className="text-sm text-slate-400">
|
||||
Guarda estos codigos de respaldo en un lugar seguro. Los necesitaras si pierdes acceso a tu app de autenticacion.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h4 className="text-white font-medium">Codigos de Respaldo</h4>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopyBackupCodes}
|
||||
className="flex items-center gap-2 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded text-sm transition-colors"
|
||||
>
|
||||
{copiedCodes ? (
|
||||
<>
|
||||
<CheckCircle className="w-4 h-4 text-emerald-400" />
|
||||
Copiado
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-4 h-4" />
|
||||
Copiar todos
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{setupData.backupCodes.map((code, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg"
|
||||
>
|
||||
<code className="text-sm text-white font-mono">{code}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-3 bg-amber-900/20 border border-amber-800 rounded-lg">
|
||||
<p className="text-xs text-amber-400">
|
||||
<strong>Importante:</strong> Cada codigo solo puede usarse una vez. Guardalo en un lugar seguro y accesible.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFinish}
|
||||
className="w-full py-3 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
Finalizar
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{!loading && (
|
||||
<div className="px-6 pb-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="w-full py-2 text-slate-400 hover:text-white text-sm transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TwoFactorSetup;
|
||||
234
src/modules/auth/components/TwoFactorVerifyModal.tsx
Normal file
234
src/modules/auth/components/TwoFactorVerifyModal.tsx
Normal file
@ -0,0 +1,234 @@
|
||||
/**
|
||||
* TwoFactorVerifyModal Component
|
||||
* Modal for verifying 2FA code during login
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Shield, AlertCircle, Loader2, Key } from 'lucide-react';
|
||||
import { apiClient } from '../../../lib/apiClient';
|
||||
|
||||
interface TwoFactorVerifyModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onVerify: (token: string) => Promise<void>;
|
||||
sessionToken: string;
|
||||
}
|
||||
|
||||
type InputMode = 'totp' | 'backup';
|
||||
|
||||
export const TwoFactorVerifyModal: React.FC<TwoFactorVerifyModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onVerify,
|
||||
sessionToken,
|
||||
}) => {
|
||||
const [mode, setMode] = useState<InputMode>('totp');
|
||||
const [code, setCode] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Reset state when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setMode('totp');
|
||||
setCode('');
|
||||
setError(null);
|
||||
setLoading(false);
|
||||
setTimeout(() => inputRef.current?.focus(), 100);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Auto-submit when TOTP code is complete
|
||||
useEffect(() => {
|
||||
if (mode === 'totp' && code.length === 6 && !loading) {
|
||||
handleSubmit();
|
||||
}
|
||||
}, [code, mode]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const expectedLength = mode === 'totp' ? 6 : 8;
|
||||
|
||||
if (code.length !== expectedLength) {
|
||||
setError(`Ingresa un codigo de ${expectedLength} digitos`);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await onVerify(code);
|
||||
} catch (err: any) {
|
||||
console.error('Failed to verify 2FA:', err);
|
||||
const errorMessage = err?.response?.data?.message ||
|
||||
mode === 'totp'
|
||||
? 'Codigo TOTP invalido. Intenta de nuevo.'
|
||||
: 'Codigo de respaldo invalido o ya usado.';
|
||||
setError(errorMessage);
|
||||
setCode('');
|
||||
setTimeout(() => inputRef.current?.focus(), 100);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const maxLength = mode === 'totp' ? 6 : 8;
|
||||
const value = e.target.value.replace(/\D/g, '').slice(0, maxLength);
|
||||
setCode(value);
|
||||
if (error) setError(null);
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter' && !loading) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
const switchMode = () => {
|
||||
setMode(mode === 'totp' ? 'backup' : 'totp');
|
||||
setCode('');
|
||||
setError(null);
|
||||
setTimeout(() => inputRef.current?.focus(), 100);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-slate-800 rounded-xl w-full max-w-md overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 p-6 border-b border-slate-700">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||
<Shield className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Verificacion de Dos Factores</h2>
|
||||
<p className="text-sm text-slate-400">
|
||||
{mode === 'totp'
|
||||
? 'Ingresa el codigo de tu app de autenticacion'
|
||||
: 'Ingresa uno de tus codigos de respaldo'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Icon */}
|
||||
<div className="flex justify-center">
|
||||
<div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center">
|
||||
{mode === 'totp' ? (
|
||||
<Shield className="w-8 h-8 text-blue-400" />
|
||||
) : (
|
||||
<Key className="w-8 h-8 text-blue-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code Input */}
|
||||
<div>
|
||||
<label className="block text-sm text-slate-400 mb-2 text-center">
|
||||
{mode === 'totp' ? 'Codigo TOTP (6 digitos)' : 'Codigo de Respaldo (8 digitos)'}
|
||||
</label>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxLength={mode === 'totp' ? 6 : 8}
|
||||
value={code}
|
||||
onChange={handleCodeChange}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder={mode === 'totp' ? '000000' : '00000000'}
|
||||
disabled={loading}
|
||||
className="w-full px-4 py-4 bg-slate-900 border border-slate-700 rounded-lg text-white text-center text-2xl font-mono tracking-widest focus:outline-none focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 bg-red-900/20 border border-red-800 rounded-lg">
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center gap-2 text-blue-400">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span className="text-sm">Verificando...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button (for backup code mode) */}
|
||||
{mode === 'backup' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={loading || code.length !== 8}
|
||||
className="w-full py-3 bg-blue-600 hover:bg-blue-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Verificando...
|
||||
</>
|
||||
) : (
|
||||
'Verificar'
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Switch Mode Link */}
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={switchMode}
|
||||
disabled={loading}
|
||||
className="text-sm text-blue-400 hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{mode === 'totp'
|
||||
? 'Usar codigo de respaldo'
|
||||
: 'Usar codigo de autenticacion'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="bg-slate-900 rounded-lg p-4">
|
||||
<p className="text-xs text-slate-400 text-center">
|
||||
{mode === 'totp' ? (
|
||||
<>
|
||||
El codigo cambia cada 30 segundos en tu app de autenticacion (Google Authenticator, Authy, etc.)
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Los codigos de respaldo se generaron cuando activaste 2FA. Cada codigo solo puede usarse una vez.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-6 pb-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
className="w-full py-2 text-slate-400 hover:text-white text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TwoFactorVerifyModal;
|
||||
406
src/modules/settings/components/TwoFactorSettings.tsx
Normal file
406
src/modules/settings/components/TwoFactorSettings.tsx
Normal file
@ -0,0 +1,406 @@
|
||||
/**
|
||||
* TwoFactorSettings Component
|
||||
* Panel for managing 2FA settings in user settings page
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Shield, AlertCircle, CheckCircle, Loader2, RefreshCw, ShieldAlert, ShieldCheck } from 'lucide-react';
|
||||
import { apiClient } from '../../../lib/apiClient';
|
||||
import TwoFactorSetup from '../../auth/components/TwoFactorSetup';
|
||||
|
||||
interface TwoFactorStatus {
|
||||
enabled: boolean;
|
||||
enabledAt?: string;
|
||||
}
|
||||
|
||||
export const TwoFactorSettings: React.FC = () => {
|
||||
const [status, setStatus] = useState<TwoFactorStatus | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showSetup, setShowSetup] = useState(false);
|
||||
const [showDisableConfirm, setShowDisableConfirm] = useState(false);
|
||||
const [disableCode, setDisableCode] = useState('');
|
||||
const [disabling, setDisabling] = useState(false);
|
||||
const [showRegenerateConfirm, setShowRegenerateConfirm] = useState(false);
|
||||
const [regenerating, setRegenerating] = useState(false);
|
||||
const [regeneratedCodes, setRegeneratedCodes] = useState<string[] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatus();
|
||||
}, []);
|
||||
|
||||
const fetchStatus = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await apiClient.get('/auth/2fa/status');
|
||||
if (response.data.success && response.data.data) {
|
||||
setStatus(response.data.data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch 2FA status:', err);
|
||||
setError('Error al cargar el estado de 2FA');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEnableSuccess = () => {
|
||||
setShowSetup(false);
|
||||
fetchStatus();
|
||||
};
|
||||
|
||||
const handleDisable = async () => {
|
||||
if (disableCode.length !== 6) {
|
||||
setError('Ingresa un codigo de 6 digitos');
|
||||
return;
|
||||
}
|
||||
|
||||
setDisabling(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await apiClient.post('/auth/2fa/disable', {
|
||||
token: disableCode,
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
setShowDisableConfirm(false);
|
||||
setDisableCode('');
|
||||
await fetchStatus();
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to disable 2FA:', err);
|
||||
const errorMessage = err?.response?.data?.message || 'Error al desactivar 2FA. Verifica el codigo.';
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setDisabling(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegenerateBackupCodes = async () => {
|
||||
setRegenerating(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await apiClient.post('/auth/2fa/backup-codes');
|
||||
if (response.data.success && response.data.data?.backupCodes) {
|
||||
setRegeneratedCodes(response.data.data.backupCodes);
|
||||
setShowRegenerateConfirm(false);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to regenerate backup codes:', err);
|
||||
const errorMessage = err?.response?.data?.message || 'Error al regenerar codigos de respaldo';
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setRegenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyRegeneratedCodes = () => {
|
||||
if (regeneratedCodes) {
|
||||
const codesText = regeneratedCodes.join('\n');
|
||||
navigator.clipboard.writeText(codesText);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseRegeneratedCodes = () => {
|
||||
setRegeneratedCodes(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||
<Shield className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Autenticacion de Dos Factores</h2>
|
||||
<p className="text-sm text-slate-400">Cargando configuracion...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="card">
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||
<Shield className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Autenticacion de Dos Factores</h2>
|
||||
<p className="text-sm text-slate-400">
|
||||
Agrega una capa extra de seguridad a tu cuenta
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{status?.enabled && (
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-emerald-500/20 rounded-full">
|
||||
<ShieldCheck className="w-4 h-4 text-emerald-400" />
|
||||
<span className="text-sm font-medium text-emerald-400">Activo</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 bg-red-900/20 border border-red-800 rounded-lg mb-4">
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status?.enabled ? (
|
||||
<div className="space-y-4">
|
||||
{/* Enabled Status */}
|
||||
<div className="bg-emerald-900/20 border border-emerald-800 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-emerald-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-white font-medium mb-1">2FA esta activo</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
Tu cuenta esta protegida con autenticacion de dos factores.
|
||||
{status.enabledAt && (
|
||||
<> Activado el {new Date(status.enabledAt).toLocaleDateString()}.</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="grid gap-3">
|
||||
{/* Regenerate Backup Codes */}
|
||||
{!showRegenerateConfirm ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowRegenerateConfirm(true)}
|
||||
className="flex items-center justify-between p-4 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<RefreshCw className="w-5 h-5 text-blue-400" />
|
||||
<div className="text-left">
|
||||
<p className="text-white font-medium">Regenerar Codigos de Respaldo</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
Genera nuevos codigos si perdiste los anteriores
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<div className="p-4 bg-amber-900/20 border border-amber-800 rounded-lg space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-white font-medium mb-1">Confirmar regeneracion</p>
|
||||
<p className="text-sm text-amber-400">
|
||||
Esto invalidara todos tus codigos de respaldo anteriores.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRegenerateBackupCodes}
|
||||
disabled={regenerating}
|
||||
className="flex-1 py-2 bg-amber-600 hover:bg-amber-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
{regenerating ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Regenerando...
|
||||
</span>
|
||||
) : (
|
||||
'Confirmar'
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowRegenerateConfirm(false)}
|
||||
disabled={regenerating}
|
||||
className="flex-1 py-2 bg-slate-700 hover:bg-slate-600 disabled:cursor-not-allowed text-slate-300 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Disable 2FA */}
|
||||
{!showDisableConfirm ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowDisableConfirm(true)}
|
||||
className="flex items-center justify-between p-4 bg-red-900/20 border border-red-800 hover:bg-red-900/30 rounded-lg transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldAlert className="w-5 h-5 text-red-400" />
|
||||
<div className="text-left">
|
||||
<p className="text-white font-medium">Desactivar 2FA</p>
|
||||
<p className="text-sm text-red-400">
|
||||
Reduce la seguridad de tu cuenta
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<div className="p-4 bg-red-900/20 border border-red-800 rounded-lg space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-white font-medium mb-1">Confirmar desactivacion</p>
|
||||
<p className="text-sm text-red-400">
|
||||
Ingresa tu codigo TOTP actual para desactivar 2FA
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxLength={6}
|
||||
value={disableCode}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/\D/g, '').slice(0, 6);
|
||||
setDisableCode(value);
|
||||
if (error) setError(null);
|
||||
}}
|
||||
placeholder="000000"
|
||||
className="w-full px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg text-white text-center text-lg font-mono tracking-widest focus:outline-none focus:border-red-500"
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDisable}
|
||||
disabled={disabling || disableCode.length !== 6}
|
||||
className="flex-1 py-2 bg-red-600 hover:bg-red-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
{disabling ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Desactivando...
|
||||
</span>
|
||||
) : (
|
||||
'Desactivar'
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowDisableConfirm(false);
|
||||
setDisableCode('');
|
||||
setError(null);
|
||||
}}
|
||||
disabled={disabling}
|
||||
className="flex-1 py-2 bg-slate-700 hover:bg-slate-600 disabled:cursor-not-allowed text-slate-300 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Disabled Status */}
|
||||
<div className="bg-slate-900 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<ShieldAlert className="w-5 h-5 text-slate-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-white font-medium mb-1">2FA no esta activo</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
Protege tu cuenta con autenticacion de dos factores. Necesitaras una app de autenticacion como Google Authenticator o Authy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enable Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSetup(true)}
|
||||
className="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<Shield className="w-5 h-5" />
|
||||
Activar 2FA
|
||||
</button>
|
||||
|
||||
{/* Info */}
|
||||
<div className="bg-blue-900/20 border border-blue-800 rounded-lg p-4">
|
||||
<p className="text-sm text-blue-400">
|
||||
<strong>Recomendado:</strong> La autenticacion de dos factores agrega una capa adicional de seguridad requiriendo un codigo temporal ademas de tu contrasena.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Setup Modal */}
|
||||
<TwoFactorSetup
|
||||
isOpen={showSetup}
|
||||
onClose={() => setShowSetup(false)}
|
||||
onSuccess={handleEnableSuccess}
|
||||
/>
|
||||
|
||||
{/* Regenerated Codes Modal */}
|
||||
{regeneratedCodes && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-slate-800 rounded-xl w-full max-w-md overflow-hidden">
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-6 h-6 text-emerald-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-1">Nuevos Codigos Generados</h3>
|
||||
<p className="text-sm text-slate-400">
|
||||
Guarda estos codigos en un lugar seguro. Los anteriores ya no funcionan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900 rounded-lg p-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{regeneratedCodes.map((code, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg"
|
||||
>
|
||||
<code className="text-sm text-white font-mono">{code}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopyRegeneratedCodes}
|
||||
className="flex-1 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Copiar Todos
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCloseRegeneratedCodes}
|
||||
className="flex-1 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TwoFactorSettings;
|
||||
Loading…
Reference in New Issue
Block a user