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 ( {/* Header */}

Two-Factor Authentication

Protect your account with an additional verification step

{enabled ? '2FA Active' : '2FA Not Enabled'}

{/* Info Panel */}

What is Two-Factor Authentication?

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.

{/* Setup Card */} {!enabled ? (

Setup Authenticator App

Scan the QR code with Google Authenticator, Authy, or any TOTP app

{/* QR Code */}

2FA QR Code

{/* Instructions + Verify */}

{[ '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) => (

{i + 1}

{step}

))}

{/* Manual Key */}

Manual Key


                                                {secret}

{/* Verify form */}

) : ( /* Enabled state */

{/* Status card */}

Two-Factor Authentication is Active

Your account is secured with TOTP authentication.

{/* Recovery Codes */}

Recovery Codes

Store these codes safely — use them if you lose access to your authenticator

{showCodes && recovery_codes.length > 0 && (

{recovery_codes.map((code, i) => (


                                                {code}

))}

⚠ Each code can only be used once. Regenerate if compromised.

)}

)}

); }