feat(components): forgot-password-template

docs/r/forgot-password-template.json

@@ -0,0 +1,14 @@
+{
+  "name": "forgot-password-template",
+  "type": "registry:block",
+  "category": "generators",
+  "subcategory": "dbAuth",
+  "registryDependencies": ["button", "card", "input", "label"],
+  "files": [
+    {
+      "path": "dbAuth/forgotPassword.tsx.template",
+      "content": "import { useEffect, useRef } from 'react'\n\nimport { FieldError, Form, Label, TextField } from '@redwoodjs/forms'\nimport { navigate, routes } from '@redwoodjs/router'\nimport { Metadata } from '@redwoodjs/web'\nimport { toast, Toaster } 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 ForgotPasswordPage = () => {\n  const { isAuthenticated, forgotPassword } = 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: { ${usernameCamelCase}: string }) => {\n    const response = await forgotPassword(data.${usernameCamelCase})\n\n    if (response.error) {\n      toast.error(response.error)\n    } else {\n      // The function `forgotPassword.handler` in api/src/functions/auth.js has\n      // been invoked, let the user know how to get the link to reset their\n      // password (sent in email, perhaps?)\n      // toast.success(\n      //   'A link to reset your ${passwordLowerCase} was sent to ' + response.email\n      // )\n      navigate(routes.login())\n    }\n  }\n\n  return (\n    <>\n      <Metadata title=\"Forgot ${passwordTitleCase}\" />\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\">Forgot ${passwordTitleCase}</CardTitle>\n            <CardDescription>\n              Enter your ${usernameTitleCase} below and click Submit\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                <Button type=\"submit\" className=\"w-full\">\n                  Submit\n                </Button>\n              </div>\n            </Form>\n          </CardContent>\n        </Card>\n      </main>\n    </>\n  )\n}\n\nexport default ForgotPasswordPage\n",
+      "type": "registry:page"
+    }
+  ]
+}

docs/r/signup-template.json

@@ -3,17 +3,12 @@
   "type": "registry:block",
   "category": "generators",
   "subcategory": "dbAuth",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
+  "registryDependencies": ["button", "card", "input", "label"],
   "files": [
     {
       "path": "dbAuth/signup.tsx.template",
-      "content": "import { useEffect, useRef } from 'react'\n\nimport {\n  Form,\n  Label,\n  TextField,\n  PasswordField,\n  FieldError,\n} from '@redwoodjs/forms'\nimport { Link, navigate, routes } from '@redwoodjs/router'\nimport { Metadata } from '@redwoodjs/web'\nimport { toast, Toaster } from '@redwoodjs/web/toast'\n\nimport { useAuth } from 'src/auth'\nimport { Button } from 'src/components/ui/Button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from 'src/components/ui/Card'\n\nconst SignupPage = () => {\n  const { isAuthenticated, signUp } = useAuth()\n\n  useEffect(() => {\n    if (isAuthenticated) {\n      navigate(routes.home())\n    }\n  }, [isAuthenticated])\n\n  // focus on ${usernameLowerCase} box on page load\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 signUp({ 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      // user is signed in automatically\n      toast.success('Welcome!')\n    }\n  }\n\n  return (\n    <>\n      <Metadata title=\"Signup\" />\n\n      <main>\n        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />\n\n        <Card className=\"mx-auto mt-14 max-w-sm\">\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Signup</CardTitle>\n            <CardDescription>\n              Enter your ${usernameLowerCase} and desired ${passwordLowerCase}\n              below to create 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                  <FieldError name=\"${passwordCamelCase}\" className=\"rw-field-error\" />\n                </div>\n\n                <Button type=\"submit\" className=\"w-full\">\n                  Sign Up\n                </Button>\n              </div>\n            </Form>\n          </CardContent>\n        </Card>\n        <div className=\"rw-login-link\">\n          <span>Already have an account?</span>{' '}\n          <Link\n            to={routes.login()}\n            className=\"text-primary underline hover:text-muted-foreground\"\n          >\n            Log in!\n          </Link>\n        </div>\n      </main>\n    </>\n  )\n}\n\nexport default SignupPage\n",
+      "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 { toast, Toaster } 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 SignupPage = () => {\n  const { isAuthenticated, signUp } = useAuth()\n\n  useEffect(() => {\n    if (isAuthenticated) {\n      navigate(routes.home())\n    }\n  }, [isAuthenticated])\n\n  // focus on ${usernameLowerCase} box on page load\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 signUp({ 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      // user is signed in automatically\n      toast.success('Welcome!')\n    }\n  }\n\n  return (\n    <>\n      <Metadata title=\"Signup\" />\n\n      <main>\n        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />\n\n        <Card className=\"mx-auto mt-14 max-w-sm\">\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Signup</CardTitle>\n            <CardDescription>\n              Enter your ${usernameLowerCase} and desired ${passwordLowerCase}\n              below to create 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                  <FieldError name=\"${passwordCamelCase}\" className=\"rw-field-error\" />\n                </div>\n\n                <Button type=\"submit\" className=\"w-full\">\n                  Sign Up\n                </Button>\n              </div>\n            </Form>\n          </CardContent>\n        </Card>\n        <div className=\"rw-login-link\">\n          <span>Already have an account?</span>{' '}\n          <Link\n            to={routes.login()}\n            className=\"text-primary underline hover:text-muted-foreground\"\n          >\n            Log in!\n          </Link>\n        </div>\n      </main>\n    </>\n  )\n}\n\nexport default SignupPage\n",
       "type": "registry:page"
     }
   ]
-}
+}