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="رمز عبور" />
+                    <Controller control={control} name="password" render={({ field }) => (<>
-                    <Input type="password" placeholder="تکرار رمز عبور"/>
+                        <Input type="password" placeholder="رمز عبور" other={field} />
-                </div>
+                        <ErrorComponent show={errors.password} message={errors.password?.message} />
-                <button>ذخیره</button>
+                    </>)} />
+                    <Controller control={control} name="repeatPassword" render={({ field }) => (<>
+                        <Input type="password" placeholder="تکرار رمز عبور" other={field} />
+                        <ErrorComponent show={errors.repeatPassword} message={errors.repeatPassword?.message} />
+                    </>)} />
                 </div>
+                <Button type="submit">ذخیره</Button>
             </div>
+        </form>
     )
 }

src/schema/index.ts

@@ -10,3 +10,10 @@ export const loginSchema = yup.object({
         .required("وارد کردن رمزعبور الزامی میباشد")
         .min(8, "رمزعبور نمیتواند کمتر از 8 کاراکتر باشد")
 })
+
+export const resetPasswordSchema = yup.object({
+    password: yup.string().min(8, "رمز عبور نمیتواند کمتر از 8 کاراکتر باشد").required("رمز عبور الزامی است"),
+    repeatPassword: yup.string()
+        .oneOf([yup.ref('password')], "رمز عبور و تکرار آن باید یکسان باشند")
+        .required("تکرار رمز عبور الزامی است"),
+})

src/types/index.ts

@@ -2,3 +2,8 @@ export interface LoginFormInterface {
     phoneNumber: string,
     password: string
 }
+
+export interface ResetPasswordInterface {
+    password: string,
+    repeatPassword: string
+}