{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "two-factor-setup-modal",
  "dependencies": [
    "@inertiajs/react"
  ],
  "registryDependencies": [
    "@craft/alert-error",
    "@craft/form-errors",
    "@craft/use-clipboard",
    "button",
    "dialog",
    "input-otp",
    "label"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/components/two-factor-setup-modal.tsx",
      "content": "import { Form } from \"@inertiajs/react\";\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\";\nimport { ScanLine } from \"lucide-react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport AlertError from \"@/components/alert-error\";\nimport InputError from \"@/components/input-error\";\nimport { Button } from \"@/components/ui/button\";\nimport { toastFirstFormError } from \"@/lib/form-errors\";\nimport {\n    Dialog,\n    DialogContent,\n    DialogDescription,\n    DialogHeader,\n    DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"@/components/ui/input-otp\";\nimport { Spinner } from \"@/components/ui/spinner\";\nimport { useAppearance } from \"@/hooks/use-appearance\";\nimport { OTP_MAX_LENGTH } from \"@/hooks/use-two-factor-auth\";\nimport { confirm } from \"@/routes/two-factor\";\n\nfunction GridScanIcon() {\n    return (\n        <div className=\"mb-3 rounded-full border border-border bg-card p-0.5 shadow-sm\">\n            <div className=\"relative overflow-hidden rounded-full border border-border bg-muted p-2.5\">\n                <div className=\"absolute inset-0 grid grid-cols-5 opacity-50\">\n                    {Array.from({ length: 5 }, (_, i) => (\n                        <div\n                            key={`col-${i + 1}`}\n                            className=\"border-r border-border last:border-r-0\"\n                        />\n                    ))}\n                </div>\n                <div className=\"absolute inset-0 grid grid-rows-5 opacity-50\">\n                    {Array.from({ length: 5 }, (_, i) => (\n                        <div\n                            key={`row-${i + 1}`}\n                            className=\"border-b border-border last:border-b-0\"\n                        />\n                    ))}\n                </div>\n                <ScanLine className=\"relative z-20 size-6 text-foreground\" />\n            </div>\n        </div>\n    );\n}\n\nfunction TwoFactorSetupStep({\n    qrCodeSvg,\n    manualSetupKey,\n    recoveryCodesList,\n    onConfirmed,\n    errors,\n}: {\n    qrCodeSvg: string | null;\n    manualSetupKey: string | null;\n    recoveryCodesList: string[];\n    onConfirmed: () => void;\n    errors: string[];\n}) {\n    const { resolvedAppearance } = useAppearance();\n    const [code, setCode] = useState<string>(\"\");\n    const pinInputContainerRef = useRef<HTMLDivElement>(null);\n\n    return (\n        <>\n            {errors?.length ? (\n                <AlertError errors={errors} />\n            ) : (\n                <Form\n                    action={confirm()}\n                    className=\"w-full\"\n                    onSuccess={() => onConfirmed()}\n                    onError={toastFirstFormError}\n                    resetOnError\n                    resetOnSuccess\n                >\n                    {({\n                        processing,\n                        errors: formErrors,\n                    }: {\n                        processing: boolean;\n                        errors?: { confirmTwoFactorAuthentication?: { code?: string } };\n                    }) => (\n                        <div className=\"space-y-5\">\n                            <div className=\"mx-auto flex max-w-md overflow-hidden\">\n                                <div className=\"mx-auto aspect-square w-64 rounded-lg border border-border\">\n                                    <div className=\"z-10 flex h-full w-full items-center justify-center p-5\">\n                                        {qrCodeSvg ? (\n                                            <div\n                                                className=\"aspect-square w-full rounded-lg bg-white p-2 [&_svg]:size-full\"\n                                                dangerouslySetInnerHTML={{\n                                                    __html: qrCodeSvg,\n                                                }}\n                                                style={{\n                                                    filter:\n                                                        resolvedAppearance === \"dark\"\n                                                            ? \"invert(1) brightness(1.5)\"\n                                                            : undefined,\n                                                }}\n                                            />\n                                        ) : (\n                                            <Spinner />\n                                        )}\n                                    </div>\n                                </div>\n                            </div>\n\n                            <div className=\"space-y-2\">\n                                <label\n                                    htmlFor=\"two-factor-secret-key\"\n                                    className=\"text-sm font-medium leading-none\"\n                                >\n                                    Secret key\n                                </label>\n                                <input\n                                    id=\"two-factor-secret-key\"\n                                    type=\"text\"\n                                    disabled\n                                    value={manualSetupKey ?? \"\"}\n                                    className=\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm text-muted-foreground shadow-xs\"\n                                />\n                            </div>\n\n                            <div className=\"space-y-2\">\n                                <p className=\"text-sm font-medium leading-none\">Recovery codes</p>\n                                <pre className=\"min-h-32 whitespace-pre-wrap rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm leading-7 text-foreground\">{recoveryCodesList.length ? recoveryCodesList.join(\"\\n\") : \"Loading recovery codes...\"}</pre>\n                            </div>\n\n                            <div ref={pinInputContainerRef} className=\"space-y-2\">\n                                <label htmlFor=\"otp\" className=\"text-sm font-medium leading-none\">\n                                    Authentication code\n                                </label>\n                                <InputOTP\n                                    id=\"otp\"\n                                    name=\"code\"\n                                    maxLength={OTP_MAX_LENGTH}\n                                    onChange={setCode}\n                                    disabled={processing}\n                                    pattern={REGEXP_ONLY_DIGITS}\n                                    autoFocus\n                                >\n                                    <InputOTPGroup>\n                                        {Array.from({ length: OTP_MAX_LENGTH }, (_, index) => (\n                                            <InputOTPSlot key={index} index={index} />\n                                        ))}\n                                    </InputOTPGroup>\n                                </InputOTP>\n                                <InputError\n                                    message={formErrors?.confirmTwoFactorAuthentication?.code}\n                                />\n                            </div>\n\n                            <Button\n                                type=\"submit\"\n                                className=\"w-full\"\n                                disabled={processing || code.length < OTP_MAX_LENGTH}\n                            >\n                                Confirm 2FA\n                            </Button>\n                        </div>\n                    )}\n                </Form>\n            )}\n        </>\n    );\n}\n\ntype Props = {\n    isOpen: boolean;\n    onClose: () => void;\n    twoFactorEnabled: boolean;\n    qrCodeSvg: string | null;\n    manualSetupKey: string | null;\n    recoveryCodesList: string[];\n    clearSetupData: () => void;\n    fetchSetupData: () => Promise<void>;\n    errors: string[];\n};\n\nexport default function TwoFactorSetupModal({\n    isOpen,\n    onClose,\n    twoFactorEnabled,\n    qrCodeSvg,\n    manualSetupKey,\n    recoveryCodesList,\n    clearSetupData,\n    fetchSetupData,\n    errors,\n}: Props) {\n    const modalConfig = useMemo<{\n        title: string;\n        description: string;\n    }>(() => {\n        if (twoFactorEnabled) {\n            return {\n                title: \"Two-factor authentication enabled\",\n                description:\n                    \"Two-factor authentication is now enabled for your account.\",\n            };\n        }\n\n        return {\n            title: \"Set up 2FA\",\n            description:\n                \"Scan the QR code with your authenticator app, save the recovery codes, then enter the generated code to finish setup.\",\n        };\n    }, [twoFactorEnabled]);\n\n    const resetModalState = useCallback(() => {\n        clearSetupData();\n    }, [clearSetupData]);\n\n    const handleClose = useCallback(() => {\n        resetModalState();\n        onClose();\n    }, [onClose, resetModalState]);\n\n    const fetchSetupDataRef = useRef(fetchSetupData);\n\n    useEffect(() => {\n        fetchSetupDataRef.current = fetchSetupData;\n    }, [fetchSetupData]);\n\n    useEffect(() => {\n        if (isOpen && !qrCodeSvg) {\n            fetchSetupDataRef.current();\n        }\n    }, [isOpen, qrCodeSvg]);\n\n    return (\n        <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>\n            <DialogContent className=\"sm:max-w-md\">\n                <DialogHeader className=\"flex items-center justify-center\">\n                    <GridScanIcon />\n                    <DialogTitle>{modalConfig.title}</DialogTitle>\n                    <DialogDescription className=\"text-center\">\n                        {modalConfig.description}\n                    </DialogDescription>\n                </DialogHeader>\n\n                <div className=\"flex flex-col items-center space-y-5\">\n                    <TwoFactorSetupStep\n                        qrCodeSvg={qrCodeSvg}\n                        manualSetupKey={manualSetupKey}\n                        recoveryCodesList={recoveryCodesList}\n                        onConfirmed={handleClose}\n                        errors={errors}\n                    />\n                </div>\n            </DialogContent>\n        </Dialog>\n    );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}