Reset Password Form

A password reset form component with new password and confirmation fields, including password visibility toggles.

A streamlined form component for password reset functionality. Features two password input fields with visibility toggles, validation hints, and a submit button for resetting the user's password.

Acme

Installation

npx shadcn@latest add @grenish/reset-password

This requires the @grenish registry in your components.json. See the installation guide for setup.

Manual Dependencies

If you prefer manual installation, add the base components:

npx shadcn@latest add button field input-group

Usage

import ResetPassword from "@/components/tools/blocks/reset-password"

export default function ResetPasswordPage() {
  return <ResetPassword />
}

Features

Password Fields: Separate inputs for new password and confirmation
Visibility Toggle: Password visibility buttons for both fields using ViewPasswordButton
Validation Hints: Descriptive text for password requirements
Required Fields: Both inputs marked as required
Responsive Design: Centered layout that adapts to screen sizes
Accessible: Proper labels, descriptions, and semantic structure
Icon Integration: Password icons for visual clarity

Component Code

"use client";

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSet,
} from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { PasswordIcon } from "@phosphor-icons/react/dist/ssr";
import ViewPasswordButton from "../view-password";

export default function ResetPassword() {
  return (
    <div className="w-full min-h-dvh flex items-center justify-center">
      <FieldSet className="max-w-sm w-full">
        <h2 className="text-xl font-bold">Acme</h2>
        <FieldGroup>
          <Field>
            <FieldLabel>Enter a new password</FieldLabel>
            <FieldDescription>
              Must be at least 8 characters long.
            </FieldDescription>
            <InputGroup>
              <InputGroupAddon>
                <PasswordIcon />
              </InputGroupAddon>
              <InputGroupInput
                id="new-password"
                type="password"
                placeholder="New password"
                required
              />
              <ViewPasswordButton inputId="new-password" />
            </InputGroup>
          </Field>
          <Field>
            <FieldLabel>Confirm new password</FieldLabel>
            <InputGroup>
              <InputGroupAddon>
                <PasswordIcon />
              </InputGroupAddon>
              <InputGroupInput
                id="confirm-password"
                type="password"
                placeholder="Confirm new password"
                required
              />
              <ViewPasswordButton inputId="confirm-password" />
            </InputGroup>
          </Field>
        </FieldGroup>
        <FieldSet>
          <Field orientation={"horizontal"}>
            <Button>Reset password</Button>
          </Field>
        </FieldSet>
      </FieldSet>
    </div>
  );
}

Notes

The component does not include form submission logic; implement password reset handling in the parent component
Password confirmation validation should be added via JavaScript or form libraries
The ViewPasswordButton component handles toggling password visibility
Ensure server-side validation for password strength and matching confirmation