feat: integrate react-hook-form and zod across all forms#271
Conversation
|
@OTimileyin is attempting to deploy a commit to the Emmanuel Dorcas' projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@OTimileyin Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
@OTimileyin please esolve conflivts |
174eaa0 to
5c80b99
Compare
|
This PR has merge conflicts. Please rebase on latest |
3 similar comments
|
This PR has merge conflicts. Please rebase on latest |
|
This PR has merge conflicts. Please rebase on latest |
|
This PR has merge conflicts. Please rebase on latest |
|
This PR has extensive merge conflicts with |
Closes #247
Summary
useStatevalidation logic withreact-hook-form+zodacross all 8 formscomponents/ui/Inputcomponent witherrorprop + forwarded ref, used consistently across all formslib/validations/with exported TypeScript typesForms migrated
app/(auth)/login/page.tsxapp/(auth)/signup/page.tsxapp/(auth)/forgot-password/page.tsxapp/(auth)/reset-password/page.tsxcomponents/dashboard/convert/convert-form.tsxcomponents/dashboard/withdrawal/WithdrawalForm.tsxcomponents/profile/profile-edit-form.tsxcomponents/admin/push-notifications/CreatePushNotificationModal.tsxShared schema approach
Schemas in
lib/validations/:auth.ts— login, signup, forgot-password, reset-passwordtransactions.ts— convert, withdrawalprofile.ts— settings profilenotifications.ts— admin push notificationEach schema exports inferred TypeScript types used as
useForm<T>generics.Validation pattern
Every form uses
useForm({ resolver: zodResolver(schema) }). Field errors are passed to theInputcomponent'serrorprop, which renders the message inline below each field.InputusesReact.forwardRefso RHF'sregister()can attach refs correctly.Notable: Reset Password OTP
The OTP field preserves the 6-digit custom input UX (individual boxes + auto-focus). A hidden
<input type="hidden">is registered with RHF and synced viasetValue("otp", digits.join(""))as digits change, so zodResolver validates the joined 6-digit string againstz.string().length(6).No ad-hoc validation remains
Confirmed via grep — zero occurrences of
useState.*errors,setErrors,validateForm(), or inline regex guards across all 8 forms.Verification
npm run build✅ — TypeScript + compile, 0 errorsnpm run lint✅ — 0 errors (2 React Compilerwatch()warnings are an expected known limitation with RHF)