feat: inisialisasi project kit v2
This commit is contained in:
@@ -0,0 +1,222 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user