feat(form-error-ux): adopt useFormScrollToError + FormErrorSummary across remaining 10 forms
Completes the form-error rollout the prior session shipped on the 6 highest-impact forms (client/interest/yacht/company/berth/expense). Adds the scroll-to-first-error wrapper + the top-of-form summary banner to: - src/app/(auth)/login/page.tsx - src/app/(auth)/reset-password/page.tsx - src/app/(auth)/set-password/page.tsx - src/app/(auth)/setup/page.tsx - src/app/(dashboard)/[portSlug]/invoices/new/page.tsx - src/components/berths/berth-detail-header.tsx (status-change dialog) - src/components/companies/add-membership-dialog.tsx - src/components/invoices/invoice-detail.tsx (record-payment form) - src/components/reservations/berth-reserve-dialog.tsx - src/components/yachts/yacht-transfer-dialog.tsx Each call site: hook wraps handleSubmit, FormErrorSummary renders only when 2+ errors fire (no visual change otherwise), and per-form `labels` prop translates field names to human-readable strings. invoice-line-items is a sub-form via useFormContext, so it inherits from the parent. 1471/1471 vitest, tsc clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -12,6 +12,8 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { BrandedAuthShell } from '@/components/shared/branded-auth-shell';
|
||||
import { FormErrorSummary } from '@/components/forms/form-error-summary';
|
||||
import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
|
||||
|
||||
const MIN_LENGTH = 9;
|
||||
|
||||
@@ -65,6 +67,7 @@ function SetPasswordInner() {
|
||||
} = useForm<SetPasswordFormData>({
|
||||
resolver: zodResolver(passwordSchema),
|
||||
});
|
||||
const submitWithScroll = useFormScrollToError(handleSubmit, errors);
|
||||
|
||||
async function onSubmit(data: SetPasswordFormData) {
|
||||
if (!token) {
|
||||
@@ -138,7 +141,11 @@ function SetPasswordInner() {
|
||||
<p className="text-sm text-gray-500 mt-1">Choose a password for your CRM account</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
|
||||
<form onSubmit={submitWithScroll(onSubmit)} className="space-y-4" noValidate>
|
||||
<FormErrorSummary
|
||||
errors={errors}
|
||||
labels={{ password: 'Password', confirmPassword: 'Confirm password' }}
|
||||
/>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="password">New password</Label>
|
||||
<Input
|
||||
|
||||
Reference in New Issue
Block a user