{
  "name": "login",
  "type": "registry:block",
  "category": "generators",
  "subcategory": "dbAuth",
  "registryDependencies": ["button", "card", "input", "label"],
  "files": [
    {
      "path": "dbAuth/login.tsx.template",
      "content": "import { useEffect, useRef } from 'react'\n\nimport {\n  FieldError,\n  Form,\n  Label,\n  PasswordField,\n  TextField,\n} from '@redwoodjs/forms'\nimport { Link, navigate, routes } from '@redwoodjs/router'\nimport { Metadata } from '@redwoodjs/web'\nimport { Toaster, toast } from '@redwoodjs/web/toast'\n\nimport { useAuth } from 'src/auth'\nimport { Button } from '@/registry/default/ui/Button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/Card'\n\nconst LoginPage = () => {\n  const { isAuthenticated, logIn } = useAuth()\n\n  useEffect(() => {\n    if (isAuthenticated) {\n      navigate(routes.home())\n    }\n  }, [isAuthenticated])\n\n  const ${usernameCamelCase}Ref = useRef<HTMLInputElement>(null)\n  useEffect(() => {\n    ${usernameCamelCase}Ref.current?.focus()\n  }, [])\n\n  const onSubmit = async (data: Record<string, string>) => {\n    const response = await logIn({ username: data.${usernameCamelCase}, password: data.${passwordCamelCase} })\n\n    if (response.message) {\n      toast(response.message)\n    } else if (response.error) {\n      toast.error(response.error)\n    } else {\n      toast.success('Welcome back!')\n    }\n  }\n\n  return (\n    <>\n      <Metadata title=\"Login\" />\n\n      <main>\n        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />\n        <Card className=\"mx-auto mt-14 max-w-sm\">\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Login</CardTitle>\n            <CardDescription>\n              Enter your ${usernameLowerCase} and ${passwordLowerCase} below to login to your account\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Form onSubmit={onSubmit}>\n              <div className=\"grid gap-4\">\n                <div className=\"grid gap-2\">\n                  <Label\n                    name=\"${usernameCamelCase}\"\n                    className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                    errorClassName=\"text-sm text-red-800 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    ${usernameTitleCase}\n                  </Label>\n                  <TextField\n                    name=\"${usernameCamelCase}\"\n                    className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n                    errorClassName=\"flex text-red-800 h-10 w-full rounded-md border border-red-800 border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n                    ref={${usernameCamelCase}Ref}\n                    validation={{\n                      required: {\n                        value: true,\n                        message: '${usernameTitleCase} is required',\n                      },\n                    }}\n                  />\n\n                  <FieldError name=\"${usernameCamelCase}\" className=\"rw-field-error\" />\n                </div>\n\n                <div className=\"grid gap-2\">\n                  <Label\n                    name=\"${passwordCamelCase}\"\n                    className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                    errorClassName=\"text-sm text-red-800 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    ${passwordTitleCase}\n                  </Label>\n                  <PasswordField\n                    name=\"${passwordCamelCase}\"\n                    className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n                    errorClassName=\"flex text-red-800 h-10 w-full rounded-md border border-red-800 border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n                    autoComplete=\"current-password\"\n                    validation={{\n                      required: {\n                        value: true,\n                        message: '${passwordTitleCase} is required',\n                      },\n                    }}\n                  />\n\n                  <div className=\"rw-forgot-link\">\n                    <Link\n                      to={routes.forgotPassword()}\n                      className=\"rw-forgot-link\"\n                    >\n                      Forgot ${passwordTitleCase}?\n                    </Link>\n                  </div>\n\n                  <FieldError name=\"${passwordCamelCase}\" className=\"rw-field-error\" />\n                </div>\n\n                <Button type=\"submit\" className=\"w-full\">\n                  Login\n                </Button>\n              </div>\n            </Form>\n          </CardContent>\n        </Card>\n        <div className=\"rw-login-link\">\n          <span>Don&apos;t have an account?</span>{' '}\n          <Link\n            to={routes.signup()}\n            className=\"text-primary underline hover:text-muted-foreground\"\n          >\n            Sign up!\n          </Link>\n        </div>\n      </main>\n    </>\n  )\n}\n\nexport default LoginPage\n",
      "type": "registry:page"
    }
  ]
}