form-rhf-password.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-rhf-password",
  "type": "registry:example",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod"
  ],
  "registryDependencies": [
    "field",
    "input-group",
    "progress",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-rhf-password.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CheckIcon } from \"lucide-react\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport { Progress } from \"@/registry/new-york-v4/ui/progress\"\n\nconst passwordRequirements = [\n  {\n    id: \"length\",\n    label: \"At least 8 characters\",\n    test: (val: string) => val.length >= 8,\n  },\n  {\n    id: \"lowercase\",\n    label: \"One lowercase letter\",\n    test: (val: string) => /[a-z]/.test(val),\n  },\n  {\n    id: \"uppercase\",\n    label: \"One uppercase letter\",\n    test: (val: string) => /[A-Z]/.test(val),\n  },\n  { id: \"number\", label: \"One number\", test: (val: string) => /\\d/.test(val) },\n  {\n    id: \"special\",\n    label: \"One special character\",\n    test: (val: string) => /[!@#$%^&*(),.?\":{}|<>]/.test(val),\n  },\n]\n\nconst formSchema = z.object({\n  password: z\n    .string()\n    .min(8, \"Password must be at least 8 characters\")\n    .refine(\n      (val) => /[a-z]/.test(val),\n      \"Password must contain at least one lowercase letter\"\n    )\n    .refine(\n      (val) => /[A-Z]/.test(val),\n      \"Password must contain at least one uppercase letter\"\n    )\n    .refine(\n      (val) => /\\d/.test(val),\n      \"Password must contain at least one number\"\n    )\n    .refine(\n      (val) => /[!@#$%^&*(),.?\":{}|<>]/.test(val),\n      \"Password must contain at least one special character\"\n    ),\n})\n\nexport default function FormRhfPassword() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      password: \"\",\n    },\n  })\n\n  const password = form.watch(\"password\")\n\n  // Calculate password strength.\n  const metRequirements = passwordRequirements.filter((req) =>\n    req.test(password || \"\")\n  )\n  const strengthPercentage =\n    (metRequirements.length / passwordRequirements.length) * 100\n\n  // Determine strength level and color.\n  const getStrengthColor = () => {\n    if (strengthPercentage === 0) return \"bg-neutral-200\"\n    if (strengthPercentage <= 40) return \"bg-red-500\"\n    if (strengthPercentage <= 80) return \"bg-yellow-500\"\n    return \"bg-green-500\"\n  }\n\n  const allRequirementsMet =\n    metRequirements.length === passwordRequirements.length\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>Create Password</CardTitle>\n        <CardDescription>\n          Choose a strong password to secure your account.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-password\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"password\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-password-input\">\n                    Password\n                  </FieldLabel>\n                  <InputGroup>\n                    <InputGroupInput\n                      {...field}\n                      id=\"form-rhf-password-input\"\n                      type=\"password\"\n                      placeholder=\"Enter your password\"\n                      aria-invalid={fieldState.invalid}\n                      autoComplete=\"new-password\"\n                    />\n                    <InputGroupAddon align=\"inline-end\">\n                      <CheckIcon\n                        className={\n                          allRequirementsMet\n                            ? \"text-green-500\"\n                            : \"text-muted-foreground\"\n                        }\n                      />\n                    </InputGroupAddon>\n                  </InputGroup>\n\n                  {/* Password strength meter. */}\n                  <div className=\"space-y-2\">\n                    <Progress\n                      value={strengthPercentage}\n                      className={getStrengthColor()}\n                    />\n\n                    {/* Requirements list. */}\n                    <div className=\"space-y-1.5\">\n                      {passwordRequirements.map((requirement) => {\n                        const isMet = requirement.test(password || \"\")\n                        return (\n                          <div\n                            key={requirement.id}\n                            className=\"flex items-center gap-2 text-sm\"\n                          >\n                            <CheckIcon\n                              className={\n                                isMet\n                                  ? \"size-4 text-green-500\"\n                                  : \"text-muted-foreground size-4\"\n                              }\n                            />\n                            <span\n                              className={\n                                isMet\n                                  ? \"text-foreground\"\n                                  : \"text-muted-foreground\"\n                              }\n                            >\n                              {requirement.label}\n                            </span>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  </div>\n\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field>\n          <Button type=\"submit\" form=\"form-rhf-password\">\n            Create Password\n          </Button>\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}