223 lines
13 KiB
TypeScript
223 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
|
|
import { Head, useForm, router } from '@inertiajs/react';
|
|
import { swal } from '@/lib/swal';
|
|
import Swal from 'sweetalert2';
|
|
|
|
interface Props {
|
|
enabled: boolean;
|
|
qr_code: string;
|
|
secret: string;
|
|
recovery_codes: string[];
|
|
}
|
|
|
|
export default function TwoFactorSetup({ enabled, qr_code, secret, recovery_codes }: Props) {
|
|
const [copiedSecret, setCopiedSecret] = useState(false);
|
|
const [showCodes, setShowCodes] = useState(false);
|
|
|
|
const { data, setData, post, processing, errors, reset } = useForm({ code: '' });
|
|
const disableForm = useForm({ password: '' });
|
|
|
|
const handleEnable = (e: React.SyntheticEvent) => {
|
|
e.preventDefault();
|
|
post(route('two-factor.enable'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => { reset(); swal.success('Enabled', '2FA is now active on your account.'); },
|
|
});
|
|
};
|
|
|
|
const handleDisable = async () => {
|
|
const { value: password } = await Swal.fire({
|
|
title: 'Disable 2FA',
|
|
text: 'Enter your password to confirm disabling Two-Factor Authentication.',
|
|
input: 'password',
|
|
inputPlaceholder: 'Your current password',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Disable',
|
|
confirmButtonColor: '#dc2626',
|
|
});
|
|
|
|
if (password) {
|
|
router.post(route('two-factor.disable'), { password }, {
|
|
preserveScroll: true,
|
|
onSuccess: () => swal.success('Disabled', '2FA has been disabled.'),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleRegenerate = async () => {
|
|
const result = await swal.confirm('Regenerate Codes?', 'Old recovery codes will be invalidated immediately.', 'Regenerate');
|
|
if (result.isConfirmed) {
|
|
router.post(route('two-factor.recovery-codes'), {}, {
|
|
preserveScroll: true,
|
|
onSuccess: () => { setShowCodes(true); swal.success('Regenerated', 'New recovery codes have been generated.'); },
|
|
});
|
|
}
|
|
};
|
|
|
|
const copySecret = () => {
|
|
navigator.clipboard.writeText(secret);
|
|
setCopiedSecret(true);
|
|
setTimeout(() => setCopiedSecret(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout>
|
|
<Head title="Two-Factor Authentication" />
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-8 anim-down">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-[#3D4E4B] dark:text-white tracking-tight leading-none">Two-Factor Authentication</h1>
|
|
<p className="text-sm font-semibold text-gray-400 tracking-tight mt-2">Protect your account with an additional verification step</p>
|
|
</div>
|
|
<div className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold ${enabled ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-amber-50 text-amber-700 border border-amber-200'}`}>
|
|
<span className={`w-2 h-2 rounded-full ${enabled ? 'bg-emerald-500' : 'bg-amber-400'}`}></span>
|
|
{enabled ? '2FA Active' : '2FA Not Enabled'}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-3xl space-y-6">
|
|
{/* Info Panel */}
|
|
<div className="p-5 bg-amber-50 border border-amber-200 rounded-2xl flex items-start gap-3 anim-down">
|
|
<svg className="w-5 h-5 text-amber-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
|
|
</svg>
|
|
<div>
|
|
<p className="text-xs font-bold text-amber-800 mb-1">What is Two-Factor Authentication?</p>
|
|
<p className="text-[11px] text-amber-700 font-medium leading-relaxed">
|
|
2FA adds an extra layer of security by requiring a one-time code from your authenticator app in addition to your password when signing in.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Setup Card */}
|
|
{!enabled ? (
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden anim-up">
|
|
<div className="px-6 py-4 border-b border-gray-50 bg-gray-50/30">
|
|
<h2 className="text-sm font-bold text-[#3D4E4B]">Setup Authenticator App</h2>
|
|
<p className="text-xs text-gray-400 font-semibold mt-1">Scan the QR code with Google Authenticator, Authy, or any TOTP app</p>
|
|
</div>
|
|
<div className="p-8">
|
|
<div className="flex flex-col md:flex-row gap-10 items-center md:items-start">
|
|
{/* QR Code */}
|
|
<div className="shrink-0">
|
|
<div className="p-4 bg-white border-2 border-gray-100 rounded-2xl inline-block shadow-sm">
|
|
<img src={qr_code} alt="2FA QR Code" className="w-48 h-48" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Instructions + Verify */}
|
|
<div className="flex-1 space-y-6">
|
|
<div className="space-y-4">
|
|
{[
|
|
'Install an authenticator app (Google Authenticator, Authy, 1Password)',
|
|
'Scan the QR code or enter the manual key below',
|
|
'Enter the 6-digit code from your app to verify and activate',
|
|
].map((step, i) => (
|
|
<div key={i} className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-[#3D4E4B] text-white text-[10px] font-black flex items-center justify-center shrink-0 mt-0.5">{i + 1}</div>
|
|
<p className="text-xs font-medium text-gray-500 leading-relaxed pt-0.5">{step}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Manual Key */}
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-400 mb-1.5">Manual Key</label>
|
|
<div className="flex items-center gap-2">
|
|
<code className="flex-1 text-xs font-mono bg-gray-50 border border-gray-100 rounded-xl px-4 py-3 text-[#3D4E4B] tracking-wider">
|
|
{secret}
|
|
</code>
|
|
<button onClick={copySecret}
|
|
className="shrink-0 h-11 px-4 border border-gray-200 rounded-xl text-xs font-bold text-gray-500 hover:bg-gray-50 transition-all">
|
|
{copiedSecret ? '✓ Copied' : 'Copy'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verify form */}
|
|
<form onSubmit={handleEnable} className="space-y-3">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-400 mb-1.5">Verification Code *</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
maxLength={6}
|
|
value={data.code}
|
|
onChange={e => setData('code', e.target.value)}
|
|
className="input-field w-full text-center tracking-[0.5em] font-bold text-lg"
|
|
placeholder="000000"
|
|
/>
|
|
{errors.code && <p className="text-xs text-red-500 font-semibold mt-1">{errors.code}</p>}
|
|
</div>
|
|
<button type="submit" disabled={processing || data.code.length < 6}
|
|
className="w-full h-11 bg-[#3D4E4B] text-white text-xs font-bold rounded-xl hover:bg-[#2D3A38] transition-all disabled:opacity-60">
|
|
{processing ? 'Verifying...' : 'Enable Two-Factor Authentication'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
/* Enabled state */
|
|
<div className="space-y-4">
|
|
{/* Status card */}
|
|
<div className="bg-white rounded-2xl border border-emerald-100 shadow-sm p-6 flex items-center gap-4 anim-up">
|
|
<div className="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center shrink-0">
|
|
<svg className="w-6 h-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-sm font-bold text-[#3D4E4B]">Two-Factor Authentication is Active</div>
|
|
<div className="text-xs text-gray-400 font-medium mt-0.5">Your account is secured with TOTP authentication.</div>
|
|
</div>
|
|
<button onClick={handleDisable}
|
|
className="h-9 px-5 text-xs font-bold text-red-500 border border-red-200 rounded-xl hover:bg-red-50 transition-all">
|
|
Disable 2FA
|
|
</button>
|
|
</div>
|
|
|
|
{/* Recovery Codes */}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden anim-up" style={{ animationDelay: '0.05s' }}>
|
|
<div className="px-6 py-4 border-b border-gray-50 bg-gray-50/30 flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-sm font-bold text-[#3D4E4B]">Recovery Codes</h2>
|
|
<p className="text-xs text-gray-400 font-semibold mt-1">Store these codes safely — use them if you lose access to your authenticator</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button onClick={() => setShowCodes(!showCodes)}
|
|
className="h-8 px-4 text-xs font-bold text-[#3D4E4B] border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
|
|
{showCodes ? 'Hide' : 'Show'}
|
|
</button>
|
|
<button onClick={handleRegenerate}
|
|
className="h-8 px-4 text-xs font-bold text-[#D4A017] border border-amber-200 rounded-lg hover:bg-amber-50 transition-all">
|
|
Regenerate
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{showCodes && recovery_codes.length > 0 && (
|
|
<div className="p-6">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{recovery_codes.map((code, i) => (
|
|
<code key={i} className="px-4 py-2.5 bg-gray-50 border border-gray-100 rounded-xl text-xs font-mono text-[#3D4E4B] tracking-wider text-center">
|
|
{code}
|
|
</code>
|
|
))}
|
|
</div>
|
|
<p className="text-[11px] text-amber-600 font-semibold mt-4">
|
|
⚠ Each code can only be used once. Regenerate if compromised.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|