import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController'; import PasswordInput from '@/components/password-input'; import TwoFactorRecoveryCodes from '@/components/two-factor-recovery-codes'; import TwoFactorSetupModal from '@/components/two-factor-setup-modal'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Field, FieldError } from "@/components/ui/field"; import { Label } from '@/components/ui/label'; import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth'; import { edit } from '@/routes/security'; import { disable, enable } from '@/routes/two-factor'; import { Head, useForm } from '@inertiajs/react'; import { Loader, Save, ShieldCheck } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import { toast } from 'sonner'; type Props = { canManageTwoFactor?: boolean; requiresConfirmation?: boolean; twoFactorEnabled?: boolean; }; export default function Security({ canManageTwoFactor = false, requiresConfirmation = false, twoFactorEnabled = false, }: Props) { const passwordInput = useRef(null); const currentPasswordInput = useRef(null); const { qrCodeSvg, hasSetupData, manualSetupKey, clearSetupData, clearTwoFactorAuthData, fetchSetupData, recoveryCodesList, fetchRecoveryCodes, errors: tfaErrors, } = useTwoFactorAuth(); const [showSetupModal, setShowSetupModal] = useState(false); const prevTwoFactorEnabled = useRef(twoFactorEnabled); const { data, setData, put, processing, errors, reset } = useForm({ current_password: '', password: '', password_confirmation: '', }); const { post: postEnable, processing: processingEnable } = useForm({}); const { post: postDisable, processing: processingDisable } = useForm({}); useEffect(() => { if (prevTwoFactorEnabled.current && !twoFactorEnabled) { clearTwoFactorAuthData(); } prevTwoFactorEnabled.current = twoFactorEnabled; }, [twoFactorEnabled, clearTwoFactorAuthData]); const onSubmit = (e: React.FormEvent) => { e.preventDefault(); put(SecurityController.update().url, { preserveScroll: true, onSuccess: () => { toast.success('Kata sandi berhasil diperbarui.'); reset(); }, onError: (errors) => { if (errors.password) { passwordInput.current?.focus(); } if (errors.current_password) { currentPasswordInput.current?.focus(); } }, }); }; const handleEnable2FA = (e: React.FormEvent) => { e.preventDefault(); postEnable(enable().url, { onSuccess: () => setShowSetupModal(true), }); }; const handleDisable2FA = (e: React.FormEvent) => { e.preventDefault(); postDisable(disable().url); }; return (

Keamanan Akun

Perbarui Kata Sandi setData('current_password', e.target.value)} className="w-full" autoComplete="current-password" placeholder="Masukkan kata sandi saat ini" />
setData('password', e.target.value)} placeholder="Masukkan kata sandi baru" autoComplete="new-password" /> setData('password_confirmation', e.target.value)} placeholder="Ulangi kata sandi baru" autoComplete="new-password" />
{canManageTwoFactor && ( Autentikasi Dua Faktor (2FA)

{twoFactorEnabled ? "Anda akan diminta memasukkan PIN acak yang aman saat masuk, yang dapat Anda ambil dari aplikasi pendukung TOTP di ponsel Anda." : "Saat Anda mengaktifkan autentikasi dua faktor, Anda akan diminta PIN aman saat masuk. PIN ini dapat diambil dari aplikasi pendukung TOTP di ponsel Anda." }

{twoFactorEnabled ? (
) : (
{hasSetupData ? ( ) : ( )}
)} )}
{canManageTwoFactor && ( setShowSetupModal(false)} requiresConfirmation={requiresConfirmation} twoFactorEnabled={twoFactorEnabled} qrCodeSvg={qrCodeSvg} manualSetupKey={manualSetupKey} clearSetupData={clearSetupData} fetchSetupData={fetchSetupData} errors={tfaErrors} /> )}
); } Security.layout = { breadcrumbs: [ { title: 'Keamanan Akun', href: edit(), }, ], };