Add client-side validation and input sanitization for profile, settings, and verification forms

[greatest0fallt1me]

Description

The profile, settings, and verification forms accept and submit raw input with no validation. app/(dashboard)/profile/page.tsx uses uncontrolled defaultValue inputs for name/email and three password fields whose "requirements" are static helper text only; app/(dashboard)/settings/page.tsx stores everything in useState with no schema; and app/(dashboard)/verification/page.tsx lets an admin submit a verification with no selected option and an empty notes textarea. This issue adds Zod-backed validation and input sanitization across these forms (the repo already depends on zod, react-hook-form, and @hookform/resolvers).

Requirements and context

• Add Zod schemas (e.g. under lib/validation/) for the profile fields (valid email, name length), the password-change form (matching new/confirm, minimum strength), and the verification dialog (an option must be selected; notes length-bounded and trimmed).
• Wire the three pages to validate before "saving", surface inline errors, and sanitize/trim free-text inputs before they leave the component.
• Reuse components/ui/form.tsx where it reduces boilerplate; keep the existing aria-live save-confirmation region in settings.
• Non-functional: never trust client input as a security boundary — document that server-side validation is still required; avoid storing raw unsanitized strings in component state that feeds display.
• Provide guidance (in code comments or docs) on CSRF protection for the eventual write endpoints these forms will call.

Acceptance criteria

• Profile name/email and password-change forms validate with Zod and block invalid submits.
• The verification dialog rejects submission with no selected option or empty notes.
• Free-text inputs are trimmed/sanitized before submission.
• Inline, accessible error messages render for each invalid field.
• CSRF guidance for future write endpoints is documented.
• Tests cover valid and invalid paths for each form (>=85% lines on changed logic).

Suggested execution

1. Fork the repo and create a branch — git checkout -b feature/form-validation-sanitization.

2. Implement changes — app/(dashboard)/profile/page.tsx, app/(dashboard)/settings/page.tsx, app/(dashboard)/verification/page.tsx, new schemas under lib/validation/, reuse components/ui/form.tsx.

3. Write/extend tests — Jest + React Testing Library + @testing-library/user-event with pnpm; add tests asserting validation blocks and error messages. The settings folder already has an __tests__/ directory to follow.

4. Test and commit —

pnpm install
pnpm type-check
pnpm test
pnpm lint

Example commit message

feat(forms): add zod validation and sanitization to profile, settings, and verification

Guidelines

• Target >=85% coverage on changed form logic.
• Reinforce that client validation is UX, not a security boundary; keep error messaging accessible and document CSRF expectations.
• Timeframe: 96 hours.