Completing the functionalization of the reset password page

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

@@ -1,10 +1,26 @@
 import { Link } from "react-router-dom"
 import { Input } from "../common/input"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { ResetPasswordInterface } from "../../types"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { resetPasswordSchema } from "../../schema"
+import { Button } from "@headlessui/react"
+import { ErrorComponent } from "../common/error"
 
 
 export const ResetPasswordForm = () => {
+    const {
+        handleSubmit,
+        formState: { errors },
+        control
+    } = useForm<ResetPasswordInterface>({
+        resolver: yupResolver(resetPasswordSchema)
+    })
+    const handleResetPassword: SubmitHandler<ResetPasswordInterface> = async (data) => {
+        console.log("data=>", data)
+    }
     return (
-        <div
+        <form onSubmit={handleSubmit(handleResetPassword)}
             className="w-fit sm:min-w-[500px] 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">
@@ -18,11 +34,17 @@ export const ResetPasswordForm = () => {
                     </div>
                 </div>
                 <div className="flex flex-col gap-y-[25px] mt-9 mb-[42px]">
-                    <Input type="password" placeholder="رمز عبور" />
-                    <Input type="password" placeholder="تکرار رمز عبور"/>
+                    <Controller control={control} name="password" render={({ field }) => (<>
+                        <Input type="password" placeholder="رمز عبور" other={field} />
+                        <ErrorComponent show={errors.password} message={errors.password?.message} />
+                    </>)} />
+                    <Controller control={control} name="repeatPassword" render={({ field }) => (<>
+                        <Input type="password" placeholder="تکرار رمز عبور" other={field} />
+                        <ErrorComponent show={errors.repeatPassword} message={errors.repeatPassword?.message} />
+                    </>)} />
                 </div>
-                <button>ذخیره</button>
+                <Button type="submit">ذخیره</Button>
             </div>
-        </div>
+        </form>
     )
 }