bigblocks/dist-registry/components/authentication-authbutton.json

Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React

{
  "name": "authentication-authbutton",
  "type": "registry:component",
  "dependencies": [
    "bitcoin-auth",
    "@radix-ui/react-icons"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "alert-dialog",
    "button",
    "dialog",
    "tooltip",
    "ui-components-loadingbutton",
    "authentication-loginform",
    "usebitcoinauth",
    "lib-types",
    "lib-layout-constants"
  ],
  "files": [
    {
      "path": "components/authentication/AuthButton.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { ExitIcon } from \"@radix-ui/react-icons\";\nimport { useState } from \"react\";\nimport { useBitcoinAuth } from \"../../hooks/useBitcoinAuth.js\";\nimport { CONTAINER_WIDTHS } from \"../../lib/layout-constants.js\";\nimport type { AuthButtonProps } from \"../../lib/types.js\";\nimport { LoadingButton } from \"../ui-components/LoadingButton.js\";\nimport {\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n} from \"../ui/alert-dialog.js\";\nimport { Button } from \"../ui/button.js\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n} from \"../ui/dialog.js\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"../ui/tooltip.js\";\nimport { LoginForm } from \"./LoginForm.js\";\n\nexport function AuthButton({\n\tmode = \"signin\",\n\tclassName = \"\",\n\tstyle,\n\tsize = \"default\",\n\tvariant = \"default\",\n\tcolor,\n\tchildren,\n\tconfirmSignOut = false,\n\tconfirmMessage = \"Are you sure you want to sign out?\",\n\tredirectTo,\n\tonSignOut,\n\tshowClearInfo = false,\n}: AuthButtonProps) {\n\tconst { isAuthenticated, user, signOut, hasLocalBackup } = useBitcoinAuth();\n\tconst [showLoginForm, setShowLoginForm] = useState(false);\n\tconst [showConfirmDialog, setShowConfirmDialog] = useState(false);\n\tconst [isSigningOut, setIsSigningOut] = useState(false);\n\n\tconst handleSignOut = async () => {\n\t\ttry {\n\t\t\tsetIsSigningOut(true);\n\t\t\tawait signOut();\n\n\t\t\tonSignOut?.();\n\n\t\t\tif (redirectTo && typeof window !== \"undefined\") {\n\t\t\t\tconst windowWithNext = window as typeof window & {\n\t\t\t\t\tnext?: { router?: { push: (url: string) => void } };\n\t\t\t\t};\n\t\t\t\tif (\"next\" in window && windowWithNext.next?.router) {\n\t\t\t\t\twindowWithNext.next.router.push(redirectTo);\n\t\t\t\t} else {\n\t\t\t\t\twindow.location.href = redirectTo;\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error signing out:\", error);\n\t\t} finally {\n\t\t\tsetIsSigningOut(false);\n\t\t\tsetShowConfirmDialog(false);\n\t\t}\n\t};\n\n\tconst handleSignOutClick = () => {\n\t\tif (confirmSignOut) {\n\t\t\tsetShowConfirmDialog(true);\n\t\t} else {\n\t\t\thandleSignOut();\n\t\t}\n\t};\n\n\tif (isAuthenticated && user && mode === \"signup\") {\n\t\treturn (\n\t\t\t<TooltipProvider>\n\t\t\t\t<Tooltip>\n\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tclassName={className}\n\t\t\t\t\t\t\tstyle={style}\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children || \"Create Bitcoin Account\"}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t<TooltipContent side=\"top\">\n\t\t\t\t\t\t<p>You're already signed in. Sign out to create a new account.</p>\n\t\t\t\t\t</TooltipContent>\n\t\t\t\t</Tooltip>\n\t\t\t</TooltipProvider>\n\t\t);\n\t}\n\n\tif (mode === \"signout\" || (isAuthenticated && user && mode === \"signin\")) {\n\t\tif (!user) return null;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<LoadingButton\n\t\t\t\t\tonClick={handleSignOutClick}\n\t\t\t\t\tloading={isSigningOut}\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tstyle={style}\n\t\t\t\t>\n\t\t\t\t\t<ExitIcon />\n\t\t\t\t\t{children || \"Sign Out\"}\n\t\t\t\t</LoadingButton>\n\n\t\t\t\t<AlertDialog\n\t\t\t\t\topen={showConfirmDialog}\n\t\t\t\t\tonOpenChange={setShowConfirmDialog}\n\t\t\t\t>\n\t\t\t\t\t<AlertDialogContent className=\"max-w-md\">\n\t\t\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t\t\t<AlertDialogTitle>Confirm Sign Out</AlertDialogTitle>\n\t\t\t\t\t\t\t<AlertDialogDescription className=\"space-y-3\">\n\t\t\t\t\t\t\t\t<span>{confirmMessage}</span>\n\n\t\t\t\t\t\t\t\t{showClearInfo && (\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-2 mt-2\">\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-sm font-medium\">What will happen:</p>\n\t\t\t\t\t\t\t\t\t\t<div className=\"space-y-1 ml-3\">\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t✓ Your encrypted backup will remain safe\n\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t✓ You can sign back in with your password\n\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t• Your current session will end\n\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t• Temporary data will be cleared\n\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{hasLocalBackup && (\n\t\t\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-xs\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ color: \"var(--accent-foreground)\" }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t✓ Your encrypted backup is stored locally and will be\n\t\t\t\t\t\t\t\t\t\tavailable when you sign back in.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</AlertDialogDescription>\n\t\t\t\t\t\t</AlertDialogHeader>\n\t\t\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t\t\t<AlertDialogCancel>Cancel</AlertDialogCancel>\n\t\t\t\t\t\t\t<AlertDialogAction asChild>\n\t\t\t\t\t\t\t\t<LoadingButton\n\t\t\t\t\t\t\t\t\tvariant=\"destructive\"\n\t\t\t\t\t\t\t\t\tloading={isSigningOut}\n\t\t\t\t\t\t\t\t\tonClick={handleSignOut}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ExitIcon />\n\t\t\t\t\t\t\t\t\tSign Out\n\t\t\t\t\t\t\t\t</LoadingButton>\n\t\t\t\t\t\t\t</AlertDialogAction>\n\t\t\t\t\t\t</AlertDialogFooter>\n\t\t\t\t\t</AlertDialogContent>\n\t\t\t\t</AlertDialog>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Dialog open={showLoginForm} onOpenChange={setShowLoginForm}>\n\t\t\t<DialogTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tsize={size}\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tstyle={style}\n\t\t\t\t>\n\t\t\t\t\t{children ||\n\t\t\t\t\t\t(mode === \"signin\"\n\t\t\t\t\t\t\t? \"Sign In with Bitcoin\"\n\t\t\t\t\t\t\t: \"Create Bitcoin Account\")}\n\t\t\t\t</Button>\n\t\t\t</DialogTrigger>\n\n\t\t\t<DialogContent className=\"sm:max-w-[425px]\">\n\t\t\t\t<DialogHeader>\n\t\t\t\t\t<DialogTitle>\n\t\t\t\t\t\t{mode === \"signin\" ? \"Sign In\" : \"Create Account\"}\n\t\t\t\t\t</DialogTitle>\n\t\t\t\t\t<DialogDescription>\n\t\t\t\t\t\t{mode === \"signin\"\n\t\t\t\t\t\t\t? \"Sign in with your Bitcoin identity\"\n\t\t\t\t\t\t\t: \"Create a new Bitcoin identity\"}\n\t\t\t\t\t</DialogDescription>\n\t\t\t\t</DialogHeader>\n\n\t\t\t\t<LoginForm mode={mode} onSuccess={() => setShowLoginForm(false)} />\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/authbutton.tsx"
    }
  ]
}