From c006f12c1772e8828e7213fc7ac8436373af1585 Mon Sep 17 00:00:00 2001
From: Alihaghighattalab <alihtofficial@gmail.com>
Date: Mon, 5 Aug 2024 17:58:22 +0330
Subject: [PATCH] Completing the functionalization of the reset password page

---
 src/components/forms/reset-password.form.tsx | 32 +++++++++++++++++---
 src/schema/index.ts                          |  7 +++++
 src/types/index.ts                           |  5 +++
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/reset-password.form.tsx b/src/components/forms/reset-password.form.tsx
index 03d3512..f93af0f 100644
--- a/src/components/forms/reset-password.form.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/src/schema/index.ts b/src/schema/index.ts
index 8cdf516..a3829aa 100644
--- a/src/schema/index.ts
+++ b/src/schema/index.ts
@@ -9,4 +9,11 @@ export const loginSchema = yup.object({
     password: yup.string()
         .required("وارد کردن رمزعبور الزامی میباشد")
         .min(8, "رمزعبور نمیتواند کمتر از 8 کاراکتر باشد")
+})
+
+export const resetPasswordSchema = yup.object({
+    password: yup.string().min(8, "رمز عبور نمیتواند کمتر از 8 کاراکتر باشد").required("رمز عبور الزامی است"),
+    repeatPassword: yup.string()
+        .oneOf([yup.ref('password')], "رمز عبور و تکرار آن باید یکسان باشند")
+        .required("تکرار رمز عبور الزامی است"),
 })
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index cb9cfe5..d474f42 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,9 @@
 export interface LoginFormInterface {
     phoneNumber: string,
     password: string
+}
+
+export interface ResetPasswordInterface {
+    password: string,
+    repeatPassword: string
 }
\ No newline at end of file