Completing the functionalization of the reset password code page

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

@@ -1,11 +1,21 @@
-import { useState } from "react";
+import { Button } from "@headlessui/react";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import OTPInput from "react-otp-input"
 import { Link } from "react-router-dom"
+import { ResetPasswordCodeInterface } from "../../types";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { ResetPasswordCodeSchema } from "../../schema";
+import { ErrorComponent } from "../common/error";
 
 export const ResetpasswordCodeForm = () => {
-    const [otp, setOtp] = useState('');
+    const { handleSubmit, formState: { errors }, control } = useForm<ResetPasswordCodeInterface>({
+        resolver: yupResolver(ResetPasswordCodeSchema)
+    })
+    const submitCode: SubmitHandler<ResetPasswordCodeInterface> = async (data) => {
+        console.log("data=>", data)
+    }
     return (
-        <div
+        <form onSubmit={handleSubmit(submitCode)}
             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">
@@ -21,22 +31,26 @@ export const ResetpasswordCodeForm = () => {
                     </div>
                 </div>
                 <div className="mt-9 mb-[42px] flex w-full justify-center items-center" id="otp">
-                    <OTPInput
+                    <Controller control={control} name="code" render={({ field }) => (
-                        containerStyle="otp-container"
+                        <div>
-                        value={otp}
+                            <OTPInput
-                        onChange={setOtp}
+                                containerStyle="otp-container"
-                        numInputs={5}
+                                {...field}
-                        renderInput={(props) => <input {...props} />}
+                                numInputs={5}
-                        inputStyle="otp-inputs"
+                                renderInput={(props) => <input {...props} />}
-                    />
+                                inputStyle="otp-inputs"
+                            />
+                            <ErrorComponent show={errors.code} message={errors.code?.message} />
+                        </div>
+                    )} />
 
                 </div>
                 <div className="flex flex-col gap-y-[27px] items-center">
                     <p className="font-normal text-secondary-text-color text-base">30 ثانیه دیگر تا دریافت کد</p>
-                    <button>تایید</button>
+                    <Button type="submit">تایید</Button>
                     <p className="font-medium text-base text-primary-color">ارسال مجدد</p>
                 </div>
             </div>
-        </div>
+        </form>
     )
 }

src/components/forms/send-code-form.tsx

@@ -1,11 +1,21 @@
-import { useState } from "react";
 import OTPInput from "react-otp-input"
 import { Link } from "react-router-dom"
+import { ErrorComponent } from "../common/error"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { Button } from "@headlessui/react"
+import { LoginCodeInterface } from "../../types"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { LoginCodeSchema } from "../../schema"
 
 export const SendCodeForm = () => {
-    const [otp, setOtp] = useState('');
+    const { handleSubmit, formState: { errors }, control } = useForm<LoginCodeInterface>({
+        resolver: yupResolver(LoginCodeSchema)
+    })
+    const submitCode: SubmitHandler<LoginCodeInterface> = async (data) => {
+        console.log("data=>", data)
+    }
     return (
-        <div
+        <form onSubmit={handleSubmit(submitCode)}
             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">
@@ -21,22 +31,26 @@ export const SendCodeForm = () => {
                     </div>
                 </div>
                 <div className="mt-9 mb-[42px] flex w-full justify-center items-center" id="otp">
-                    <OTPInput
+                    <Controller control={control} name="code" render={({ field }) => (
-                        containerStyle="otp-container"
+                        <div>
-                        value={otp}
+                            <OTPInput
-                        onChange={setOtp}
+                                containerStyle="otp-container"
-                        numInputs={5}
+                                {...field}
-                        renderInput={(props) => <input {...props} />}
+                                numInputs={5}
-                        inputStyle="otp-inputs"
+                                renderInput={(props) => <input {...props} />}
-                    />
+                                inputStyle="otp-inputs"
+                            />
+                            <ErrorComponent show={errors.code} message={errors.code?.message} />
+                        </div>
+                    )} />
 
                 </div>
                 <div className="flex flex-col gap-y-[27px] items-center">
                     <p className="font-normal text-secondary-text-color text-base">30 ثانیه دیگر تا دریافت کد</p>
-                    <button>تایید</button>
+                    <Button type="submit">تایید</Button>
                     <p className="font-medium text-base text-primary-color">ارسال مجدد</p>
                 </div>
             </div>
-        </div>
+        </form>
     )
 }

src/schema/index.ts

@@ -32,4 +32,20 @@ export const LoginWithCodeSchema = yup.object({
         .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
         .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
         .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+})
+
+export const ResetPasswordCodeSchema = yup.object({
+    code: yup.string()
+        .required("وارد کردن کد الزامی میباشد")
+        .min(5, "کد نمیتوند کمتر از 5 رقم باشد")
+        .max(5, "کد نمیتواند بیشتر از 5 رقم باشد")
+        .matches(/^[0-9]{5}$/, "کد نامعتبر"),
+})
+
+export const LoginCodeSchema = yup.object({
+    code: yup.string()
+        .required("وارد کردن کد الزامی میباشد")
+        .min(5, "کد نمیتوند کمتر از 5 رقم باشد")
+        .max(5, " کد نمیتواند بیشتر از 5 رقم باشد")
+        .matches(/^[0-9]{5}$/, "کد نامعتبر"),
 })

src/types/index.ts

@@ -15,4 +15,11 @@ export interface ForgotPasswordInterface {
 export interface LoginWithCodeInterface {
     phoneNumber: string
 }
+export interface ResetPasswordCodeInterface {
+    code: string
+}
+
+export interface LoginCodeInterface {
+    code: string
+}