{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login-form",
  "type": "registry:component",
  "title": "Login Form",
  "description": "Shared email, password, and Google continue form used by auth login layouts.",
  "registryDependencies": [
    "tyrailleverett/nice-ui/style",
    "button",
    "input-group",
    "label",
    "separator",
    "tyrailleverett/nice-ui/logo",
    "tyrailleverett/nice-ui/password-input"
  ],
  "files": [
    {
      "path": "registry/app/auth/login-form/login-form.tsx",
      "type": "registry:component",
      "target": "~/components/login-form.tsx",
      "content": "import {\n  type ComponentProps,\n  type FormEvent,\n  type ReactNode,\n  useCallback,\n} from \"react\";\n\nimport { LogoIcon } from \"@/components/logo\";\nimport { PasswordInput } from \"@/components/password-input\";\nimport { Button } from \"@/components/ui/button\";\nimport { InputGroup, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Label } from \"@/components/ui/label\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface LoginFormLink {\n  href: string;\n  label: string;\n}\n\nexport interface LoginFormProps {\n  className?: string;\n  description?: string;\n  emailPlaceholder?: string;\n  forgotPasswordHref?: string;\n  forgotPasswordLabel?: string;\n  googleLabel?: string;\n  idPrefix?: string;\n  logo?: ReactNode;\n  onGoogleContinue?: () => void;\n  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;\n  passwordPlaceholder?: string;\n  primaryAction?: string;\n  showStrengthIndicator?: boolean;\n  signInHref?: string;\n  signInLabel?: string;\n  signInPrompt?: string;\n  title?: string;\n}\n\nexport const defaultLoginLegalLinks: LoginFormLink[] = [\n  { href: \"#\", label: \"Privacy\" },\n  { href: \"#\", label: \"Terms\" },\n  { href: \"#\", label: \"Help\" },\n];\n\nconst defaultLogo = (\n  <LogoIcon aria-hidden=\"true\" className=\"mb-8 size-8 text-foreground\" />\n);\n\nfunction GoogleIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n        fill=\"#4285F4\"\n      />\n      <path\n        d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n        fill=\"#34A853\"\n      />\n      <path\n        d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n        fill=\"#FBBC05\"\n      />\n      <path\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n        fill=\"#EA4335\"\n      />\n    </svg>\n  );\n}\n\nfunction OrDivider() {\n  return (\n    <div className=\"relative\">\n      <div className=\"absolute inset-0 flex items-center\">\n        <Separator />\n      </div>\n      <div className=\"relative flex justify-center\">\n        <span className=\"bg-background px-3 text-muted-foreground text-xs\">\n          OR CONTINUE WITH EMAIL\n        </span>\n      </div>\n    </div>\n  );\n}\n\nexport function LoginLegalNav({\n  className,\n  links = defaultLoginLegalLinks,\n}: {\n  className?: string;\n  links?: LoginFormLink[];\n}) {\n  if (!links.length) {\n    return null;\n  }\n\n  return (\n    <nav\n      aria-label=\"Support and legal\"\n      className={cn(\n        \"flex items-center justify-center gap-5 pt-8 text-muted-foreground text-sm\",\n        className\n      )}\n    >\n      {links.map((link) => (\n        <a className=\"hover:text-foreground\" href={link.href} key={link.label}>\n          {link.label}\n        </a>\n      ))}\n    </nav>\n  );\n}\n\nexport function LoginForm({\n  className,\n  description,\n  emailPlaceholder = \"Enter your email\",\n  forgotPasswordHref = \"#\",\n  forgotPasswordLabel = \"Forgot password?\",\n  googleLabel = \"Continue with Google\",\n  idPrefix = \"login\",\n  logo = defaultLogo,\n  onGoogleContinue,\n  onSubmit,\n  passwordPlaceholder = \"Enter your password\",\n  primaryAction = \"Sign in with Email\",\n  showStrengthIndicator = false,\n  signInHref = \"#\",\n  signInLabel = \"Sign up\",\n  signInPrompt = \"Don't have an account?\",\n  title = \"Sign in\",\n}: LoginFormProps) {\n  const emailId = `${idPrefix}-email`;\n  const passwordId = `${idPrefix}-password`;\n  const accountPrompt = description ?? signInPrompt;\n\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      onSubmit?.(event);\n    },\n    [onSubmit]\n  );\n\n  return (\n    <div className={cn(\"w-full max-w-sm\", className)}>\n      {logo}\n      <div className=\"space-y-1\">\n        <h1 className=\"font-semibold text-3xl tracking-tight\">{title}</h1>\n        {accountPrompt ? (\n          <p className=\"text-muted-foreground text-sm\">\n            {accountPrompt}{\" \"}\n            <a\n              className=\"text-primary underline underline-offset-4 hover:text-primary/80\"\n              href={signInHref}\n            >\n              {signInLabel}\n            </a>\n          </p>\n        ) : null}\n      </div>\n\n      <form className=\"mt-8 space-y-6\" onSubmit={handleSubmit}>\n        <Button\n          className=\"h-10 w-full\"\n          onClick={onGoogleContinue}\n          type=\"button\"\n          variant=\"outline\"\n        >\n          <GoogleIcon className=\"size-4\" />\n          {googleLabel}\n        </Button>\n\n        <OrDivider />\n\n        <div className=\"space-y-4\">\n          <div className=\"space-y-2\">\n            <Label htmlFor={emailId}>Email</Label>\n            <InputGroup className=\"h-10\">\n              <InputGroupInput\n                autoComplete=\"email\"\n                className=\"h-10\"\n                id={emailId}\n                name=\"email\"\n                placeholder={emailPlaceholder}\n                required\n                type=\"email\"\n              />\n            </InputGroup>\n          </div>\n          <PasswordInput\n            autoComplete=\"current-password\"\n            forgotPasswordHref={forgotPasswordHref}\n            forgotPasswordLabel={forgotPasswordLabel}\n            id={passwordId}\n            placeholder={passwordPlaceholder}\n            showStrengthIndicator={showStrengthIndicator}\n          />\n        </div>\n\n        <Button className=\"h-10 w-full\" type=\"submit\">\n          {primaryAction}\n        </Button>\n      </form>\n    </div>\n  );\n}\n"
    }
  ]
}