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')))} />