complete forgot password and fix bug

src/components/common/error.tsx

@@ -9,7 +9,7 @@ type Props = {
 export const ErrorComponent: FC<Props> = ({ message, show }) => {
   return (
     show && (
-      <p className="w-full text-right text-xs text-red-500 font-medium -mt-5">
+      <p className="w-full text-right text-xs text-red-500 font-medium mt-2">
         * {message}
       </p>
     )

src/components/forms/forgot-password-form.tsx

@@ -1,9 +1,23 @@
 import { Link } from "react-router-dom"
 import { Input } from "../common/input"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { ForgotPasswordInterface } from "../../types"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { forgotPasswordSchema } from "../../schema"
+import { ErrorComponent } from "../common/error"
 
 export const ForgotPasswordForm = () => {
+    const {
+        handleSubmit,
+        formState: { errors },
+        control
+    } = useForm<ForgotPasswordInterface>({
+        resolver: yupResolver(forgotPasswordSchema)
+    })
+    const handleForgotSubmit: SubmitHandler<ForgotPasswordInterface> = async (data) => { console.log("data=>", data) }
+
     return (
-        <div
+        <form onSubmit={handleSubmit(handleForgotSubmit)}
             className="w-fit xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col xl:-mr-24">
@@ -14,7 +28,12 @@ export const ForgotPasswordForm = () => {
                     </div>
                 </div>
                 <div className="mt-9 mb-[42px]">
-                    <Input type="number" placeholder="شماره موبایل" />
+                    <Controller control={control} name="phoneNumber" render={({ field }) => (
+                        <div>
+                            <Input type="number" placeholder="شماره موبایل" field={field} />
+                            <ErrorComponent show={errors.phoneNumber} message={errors?.phoneNumber?.message} />
+                        </div>
+                    )} />
                 </div>
                 <div className="flex flex-col gap-y-[27px] items-center">
                     <button>دریافت کد تایید</button>
@@ -23,6 +42,6 @@ export const ForgotPasswordForm = () => {
                     </Link>
                 </div>
             </div>
-        </div>
+        </form>
     )
 }

src/components/forms/login-form.tsx

@@ -34,16 +34,16 @@ export const LoginForm = () => {
                 </div>
                 <div className="flex flex-col gap-y-[25px] mt-9 mb-[42px]">
                     <Controller control={control} name="phoneNumber" render={({ field }) => (
-                        <>
+                        <div>
                             <Input type="number" placeholder="شماره تماس" field={field} />
                             <ErrorComponent show={errors.phoneNumber} message={errors.phoneNumber?.message} />
-                        </>
+                        </div>
                     )} />
                     <Controller control={control} name="password" render={({ field }) => (
-                        <>
+                        <div>
                             <Input type="password" placeholder="رمز عبور" field={field} />
                             <ErrorComponent show={errors.password} message={errors.password?.message} />
-                        </>
+                        </div>
                     )} />
                     <Link to="/auth/forgot-password"><p className="font-medium text-sm text-secondary-text-color cursor-pointer">فراموشی رمز عبور</p></Link>
                 </div>

src/components/forms/reset-password.form.tsx

@@ -34,14 +34,14 @@ export const ResetPasswordForm = () => {
                     </div>
                 </div>
                 <div className="flex flex-col gap-y-[25px] mt-9 mb-[42px]">
-                    <Controller control={control} name="password" render={({ field }) => (<>
+                    <Controller control={control} name="password" render={({ field }) => (<div>
                         <Input type="password" placeholder="رمز عبور" field={field} />
                         <ErrorComponent show={errors.password} message={errors.password?.message} />
-                    </>)} />
+                    </div>)} />
-                    <Controller control={control} name="repeatPassword" render={({ field }) => (<>
+                    <Controller control={control} name="repeatPassword" render={({ field }) => (<div>
                         <Input type="password" placeholder="تکرار رمز عبور" field={field} />
                         <ErrorComponent show={errors.repeatPassword} message={errors.repeatPassword?.message} />
-                    </>)} />
+                    </div>)} />
                 </div>
                 <Button type="submit">ذخیره</Button>
             </div>

src/schema/index.ts

@@ -17,3 +17,11 @@ export const resetPasswordSchema = yup.object({
         .oneOf([yup.ref('password')], "رمز عبور و تکرار آن باید یکسان باشند")
         .required("تکرار رمز عبور الزامی است"),
 })
+
+export const forgotPasswordSchema = yup.object({
+    phoneNumber: yup.string()
+        .required("وارد کردن شماره تماس الزامی میباشد")
+        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+})

src/types/index.ts

@@ -7,3 +7,7 @@ export interface ResetPasswordInterface {
     password: string,
     repeatPassword: string
 }
+
+export interface ForgotPasswordInterface {
+    phoneNumber: string
+}