diff --git a/package.json b/package.json
index 7fb95db2..4524b353 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
"sonner": "^1.5.0",
"tailwind-merge": "^2.3.0",
"use-debounce": "^10.0.1",
+ "zod": "^3.24.1",
"zustand": "^4.5.2"
},
"devDependencies": {
diff --git a/src/app/(authentication)/auth/forgotpassword/page.tsx b/src/app/(authentication)/auth/forgotpassword/page.tsx
index 19909e62..2ca083e5 100644
--- a/src/app/(authentication)/auth/forgotpassword/page.tsx
+++ b/src/app/(authentication)/auth/forgotpassword/page.tsx
@@ -12,6 +12,7 @@ import { withAuthRedirect } from '@/HOCs/withAuthRedirect';
import { useUsersApiAuthRequestReset } from '@/api/users-auth/users-auth';
import Button from '@/components/common/Button';
import FormInput from '@/components/common/FormInput';
+import { emailSchema } from '@/constants/zod-schema';
import { showErrorToast } from '@/lib/toastHelpers';
interface IForgotPasswordForm {
@@ -91,8 +92,7 @@ const ForgotPasswordForm: React.FC = () => {
placeholder="Enter your email"
register={register}
requiredMessage="Email is required"
- patternValue={/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/}
- patternMessage="Enter a valid email address"
+ schema={emailSchema}
errors={errors}
/>
diff --git a/src/app/(authentication)/auth/login/page.tsx b/src/app/(authentication)/auth/login/page.tsx
index a4ef1120..8ee475e2 100644
--- a/src/app/(authentication)/auth/login/page.tsx
+++ b/src/app/(authentication)/auth/login/page.tsx
@@ -14,6 +14,7 @@ import { useUsersApiAuthLoginUser } from '@/api/users-auth/users-auth';
import Button from '@/components/common/Button';
import FormInput from '@/components/common/FormInput';
import { ArrowNarrowLeft } from '@/components/ui/Icons/common';
+import { emailOrUsernameSchema } from '@/constants/zod-schema';
import { usePathTracker } from '@/hooks/usePathTracker';
import { showErrorToast } from '@/lib/toastHelpers';
import { useAuthStore } from '@/stores/authStore';
@@ -94,8 +95,7 @@ const LoginForm: React.FC = () => {
placeholder="Username or Email"
register={register}
requiredMessage="Username or Email is required"
- patternValue={/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$|^\w+$/}
- patternMessage="Enter a valid email or username"
+ schema={emailOrUsernameSchema}
errors={errors}
labelClassName="text-black/90"
helperTextClassName="text-black/60"
diff --git a/src/app/(authentication)/auth/register/page.tsx b/src/app/(authentication)/auth/register/page.tsx
index f8f12e73..4f2597a8 100644
--- a/src/app/(authentication)/auth/register/page.tsx
+++ b/src/app/(authentication)/auth/register/page.tsx
@@ -14,6 +14,7 @@ import { useUsersApiAuthSignup } from '@/api/users-auth/users-auth';
import Button from '@/components/common/Button';
import FormInput from '@/components/common/FormInput';
import { ArrowNarrowLeft } from '@/components/ui/Icons/common';
+import { emailSchema, matchPassword, passwordSchema, usernameSchema } from '@/constants/zod-schema';
import { showErrorToast } from '@/lib/toastHelpers';
import SignUpSuccess from './SignUpSuccess';
@@ -131,13 +132,8 @@ const RegisterForm: React.FC = () => {
type="text"
placeholder="e.g., john_doe"
register={register}
- patternValue={/^[a-z0-9._]+$/}
- patternMessage="Username must only contain lowercase letters, numbers, dots, and underscores."
+ schema={usernameSchema}
requiredMessage="Username is required"
- minLengthValue={3}
- minLengthMessage="Username must be at least 3 characters"
- maxLengthValue={30}
- maxLengthMessage="Username cannot exceed 30 characters"
errors={errors}
isSubmitting={isSubmitting}
helperText="3-30 characters. No spaces or special symbols."
@@ -169,7 +165,6 @@ const RegisterForm: React.FC = () => {
inputClassName="bg-white text-black"
/>
-
{
placeholder="e.g., john.doe@example.com"
register={register}
requiredMessage="Email is required"
- patternValue={/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i}
- patternMessage="Enter a valid email address."
+ schema={emailSchema}
errors={errors}
labelClassName="text-black/90"
inputClassName="bg-white text-black"
/>
-
{
placeholder="Create a password"
register={register}
requiredMessage="Password is required"
- minLengthValue={8}
- minLengthMessage="Password must be at least 8 characters long."
+ schema={passwordSchema}
+ //minLengthValue={8}
+ //minLengthMessage="Password must be at least 8 characters long."
errors={errors}
labelClassName="text-black/90"
inputClassName="bg-white text-black"
/>
-
{
register={register}
requiredMessage="Confirm Password is required"
errors={errors}
- patternValue={new RegExp(watch('password'))}
- patternMessage="Passwords must match."
+ schema={matchPassword(new RegExp(watch('password')))}
labelClassName="text-black/90"
inputClassName="bg-white text-black"
/>
diff --git a/src/app/(authentication)/auth/resendverificationemail/page.tsx b/src/app/(authentication)/auth/resendverificationemail/page.tsx
index 3186fe0d..4a2eb14e 100644
--- a/src/app/(authentication)/auth/resendverificationemail/page.tsx
+++ b/src/app/(authentication)/auth/resendverificationemail/page.tsx
@@ -12,6 +12,7 @@ import { withAuthRedirect } from '@/HOCs/withAuthRedirect';
import { useUsersApiAuthResendActivation } from '@/api/users-auth/users-auth';
import Button from '@/components/common/Button';
import FormInput from '@/components/common/FormInput';
+import { emailSchema } from '@/constants/zod-schema';
import { showErrorToast } from '@/lib/toastHelpers';
interface IResendForm {
@@ -95,8 +96,7 @@ const ResendVerificationForm: React.FC = () => {
placeholder="Enter your email"
register={register}
requiredMessage="Email is required"
- patternValue={/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/}
- patternMessage="Enter a valid email address"
+ schema={emailSchema}
errors={errors}
/>
diff --git a/src/app/(authentication)/auth/resetpassword/[token]/page.tsx b/src/app/(authentication)/auth/resetpassword/[token]/page.tsx
index a2502c41..79e61640 100644
--- a/src/app/(authentication)/auth/resetpassword/[token]/page.tsx
+++ b/src/app/(authentication)/auth/resetpassword/[token]/page.tsx
@@ -12,6 +12,7 @@ import { withAuthRedirect } from '@/HOCs/withAuthRedirect';
import { useUsersApiAuthResetPassword } from '@/api/users-auth/users-auth';
import Button from '@/components/common/Button';
import FormInput from '@/components/common/FormInput';
+import { matchPassword, passwordSchema } from '@/constants/zod-schema';
import { showErrorToast } from '@/lib/toastHelpers';
interface IResetPasswordForm {
@@ -76,8 +77,9 @@ const ResetPasswordForm = ({ params }: { params: { token: string } }) => {
placeholder="Password"
register={register}
requiredMessage="Password is required"
- minLengthValue={8}
- minLengthMessage="Password must be at least 8 characters"
+ schema={passwordSchema}
+ //minLengthValue={8}
+ //minLengthMessage="Password must be at least 8 characters"
errors={errors}
/>
@@ -88,8 +90,7 @@ const ResetPasswordForm = ({ params }: { params: { token: string } }) => {
register={register}
requiredMessage="Confirm Password is required"
errors={errors}
- patternMessage="The passwords do not match"
- patternValue={new RegExp(watch('password'))}
+ schema={matchPassword(new RegExp(watch('password')))}
/>