{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "manage-two-factor",
  "dependencies": [
    "@inertiajs/react"
  ],
  "registryDependencies": [
    "@craft/two-factor-setup-modal",
    "@craft/use-two-factor-auth",
    "button"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/components/manage-two-factor.tsx",
      "content": "import { Form } from \"@inertiajs/react\";\nimport { ShieldCheck } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport Heading from \"@/components/heading\";\nimport TwoFactorSetupModal from \"@/components/two-factor-setup-modal\";\nimport { Button } from \"@/components/ui/button\";\nimport { useTwoFactorAuth } from \"@/hooks/use-two-factor-auth\";\nimport { disable, enable, show } from \"@/routes/two-factor\";\n\nexport type Props = {\n    canManageTwoFactor?: boolean;\n    twoFactorEnabled?: boolean;\n    twoFactorPending?: boolean;\n    continueTwoFactorSetup?: boolean;\n};\n\nexport default function ManageTwoFactor(props: Props) {\n    const twoFactorEnabled = props.twoFactorEnabled ?? false;\n    const twoFactorPending = props.twoFactorPending ?? false;\n    const continueTwoFactorSetup = props.continueTwoFactorSetup ?? false;\n\n    const {\n        qrCodeSvg,\n        hasSetupData,\n        manualSetupKey,\n        clearSetupData,\n        clearTwoFactorAuthData,\n        fetchSetupData,\n        recoveryCodesList,\n        errors,\n    } = useTwoFactorAuth();\n    const [showSetupModal, setShowSetupModal] = useState<boolean>(false);\n    const prevTwoFactorEnabled = useRef(twoFactorEnabled);\n\n    useEffect(() => {\n        if (prevTwoFactorEnabled.current && !twoFactorEnabled) {\n            clearTwoFactorAuthData();\n        }\n\n        prevTwoFactorEnabled.current = twoFactorEnabled;\n    }, [twoFactorEnabled, clearTwoFactorAuthData]);\n\n    useEffect(() => {\n        if (continueTwoFactorSetup && twoFactorPending) {\n            setShowSetupModal(true);\n        }\n    }, [continueTwoFactorSetup, twoFactorPending]);\n\n    if (!(props.canManageTwoFactor ?? false)) {\n        return null;\n    }\n\n    return (\n        <div className=\"space-y-6\">\n            <Heading\n                variant=\"small\"\n                title=\"Two-factor authentication\"\n                description=\"Manage your two-factor authentication settings\"\n            />\n            {twoFactorEnabled ? (\n                <div className=\"flex flex-col items-start justify-start space-y-4\">\n                    <p className=\"text-sm text-muted-foreground\">\n                        You will be prompted for a secure, random pin during login, which you can\n                        retrieve from the TOTP-supported application on your phone.\n                    </p>\n\n                    <div className=\"relative inline\">\n                        <Form action={disable()}>\n                            {({ processing }) => (\n                                <Button variant=\"destructive\" type=\"submit\" disabled={processing}>\n                                    Disable 2FA\n                                </Button>\n                            )}\n                        </Form>\n                    </div>\n                </div>\n            ) : (\n                <div className=\"flex flex-col items-start justify-start space-y-4\">\n                    <p className=\"text-sm text-muted-foreground\">\n                        When you enable two-factor authentication, you will be prompted for a secure\n                        pin during login. This pin can be retrieved from a TOTP-supported\n                        application on your phone.\n                    </p>\n\n                    <div>\n                        {hasSetupData ? (\n                            <Button onClick={() => setShowSetupModal(true)}>\n                                <ShieldCheck />\n                                Continue setup\n                            </Button>\n                        ) : twoFactorPending ? (\n                            <Form action={show()}>\n                                {({ processing }) => (\n                                    <Button type=\"submit\" disabled={processing}>\n                                        <ShieldCheck />\n                                        Continue setup\n                                    </Button>\n                                )}\n                            </Form>\n                        ) : (\n                            <Form action={enable()} onSuccess={() => setShowSetupModal(true)}>\n                                {({ processing }) => (\n                                    <Button type=\"submit\" disabled={processing}>\n                                        Enable 2FA\n                                    </Button>\n                                )}\n                            </Form>\n                        )}\n                    </div>\n                </div>\n            )}\n\n            <TwoFactorSetupModal\n                isOpen={showSetupModal}\n                onClose={() => setShowSetupModal(false)}\n                twoFactorEnabled={twoFactorEnabled}\n                qrCodeSvg={qrCodeSvg}\n                manualSetupKey={manualSetupKey}\n                recoveryCodesList={recoveryCodesList}\n                clearSetupData={clearSetupData}\n                fetchSetupData={fetchSetupData}\n                errors={errors}\n            />\n        </div>\n    );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}