import AppLayout from '@/layouts/app-layout';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Head, useForm } from '@inertiajs/react';
import { Shield, Smartphone, Key, CheckCircle } from 'lucide-react';
import { useState } from 'react';
import { PageHelp } from '@/components/page-help';
interface Props {
twoFactorEnabled: boolean;
qrCode?: string;
recoveryCodes?: string[];
}
export default function TwoFactor({ twoFactorEnabled = false, qrCode, recoveryCodes }: Props) {
const [showRecoveryCodes, setShowRecoveryCodes] = useState(false);
const { data, setData, post, processing } = useForm({
code: '',
});
const handleEnable = () => {
post('/two-factor-authentication');
};
const handleDisable = () => {
if (confirm('Are you sure you want to disable two-factor authentication?')) {
post('/two-factor-authentication/disable');
}
};
const handleConfirm = (e: React.FormEvent) => {
e.preventDefault();
post('/two-factor-authentication/confirm');
};
const helpSections = [
{
title: 'What is Two-Factor Authentication?',
content: '2FA adds an extra layer of security by requiring both your password and a code from your phone to log in. This protects your account even if someone knows your password.',
},
{
title: 'Setting Up 2FA',
content: 'Click "Enable Two-Factor Authentication" to get started. Scan the QR code with an authenticator app like Google Authenticator or Authy, then enter the 6-digit code to confirm.',
},
{
title: 'Recovery Codes',
content: 'Save your recovery codes in a secure place. If you lose access to your authenticator app, these codes can be used to log in and disable 2FA.',
},
{
title: 'Using 2FA',
content: 'After enabling 2FA, you\'ll need to enter a code from your authenticator app each time you log in. The code changes every 30 seconds.',
},
];
return (
Two-Factor Status
{twoFactorEnabled
? 'Your account is protected with two-factor authentication'
: 'Two-factor authentication is currently disabled'}
{twoFactorEnabled ? (
) : (
)}
{!twoFactorEnabled ? (
) : (
)}
{qrCode && !twoFactorEnabled && (
Setup Instructions
Scan the QR code with your authenticator app
)}
{showRecoveryCodes && recoveryCodes && recoveryCodes.length > 0 && (
Recovery Codes
Store these codes in a safe place. Each code can only be used once.
{recoveryCodes.map((code, index) => (
{code}
))}
Make sure to save these codes securely. You'll need them if you lose access to your authenticator app.