Completing the functionalization of the login with code page

src/components/forms/login-with-code-form.tsx

@@ -1,9 +1,21 @@
 import { Link } from "react-router-dom"
 import { Input } from "../common/input"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { LoginWithCodeInterface } from "../../types"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { LoginWithCodeSchema } from "../../schema"
+import { ErrorComponent } from "../common/error"
+import { Button } from "@headlessui/react"
 
 export const LoginWithCodeForm = () => {
+    const { handleSubmit, formState: { errors }, control } = useForm<LoginWithCodeInterface>({
+        resolver: yupResolver(LoginWithCodeSchema)
+    })
+    const handleLoginWithCode: SubmitHandler<LoginWithCodeInterface> = async (data) => {
+        console.log("data=>", data)
+    }
     return (
-        <div
+        <form onSubmit={handleSubmit(handleLoginWithCode)}
             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,15 +26,20 @@ export const LoginWithCodeForm = () => {
                     </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>
+                    <Button type="submit">دریافت کد تایید</Button>
                     <Link to="/auth/login">
                         <p className="font-medium text-base text-primary-color">بازگشت</p>
                     </Link>
                 </div>
             </div>
-        </div>
+        </form>
     )
 }

src/schema/index.ts

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

src/types/index.ts

@@ -10,4 +10,9 @@ export interface ResetPasswordInterface {
 
 export interface ForgotPasswordInterface {
     phoneNumber: string
-}
+}
+
+export interface LoginWithCodeInterface {
+    phoneNumber: string
+}
+