reset password implemented

src/components/AuthPages/ForgotPassword/index.jsx

@@ -1,10 +1,40 @@
-import React from "react";
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { Link, useNavigate } from 'react-router-dom';
 import titleShape from "../../../assets/images/shape/title-shape-two.svg";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 
 export default function ForgotPassword() {
+
+  const navigate = useNavigate();
+  const [validation, setValidation] = useState("")
+  const [buttonDisabled, setButtonDisabled] = useState(true)
+
+  // email
+  const [email, setEmail] = useState("");
+  const handleEmail = (e) => {
+    setEmail(e.target.value);
+  };
+
+
+  function validationChecker(email) {
+    const emailCheck = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+    if (email === "") {
+      setValidation("email is required");
+
+    } else if (!email.match(emailCheck)) {
+      setValidation('Please input a valid email address');
+
+    } else {
+      setValidation("");
+      setButtonDisabled(false)
+    }
+  }
+
+  useEffect(() => {
+    validationChecker(email)
+  }, [email])
+
   return (
     <>
       <AuthLayout
@@ -28,19 +58,24 @@ export default function ForgotPassword() {
                   name="email"
                   type="email"
                   iconName="message"
+                  inputHandler={handleEmail}
+                  value={email}
                 />
+                {validation && <p className="my-5 font-bold  text-red-500">{validation}</p>}
               </div>
+
               <div className="signin-area mb-3.5">
-                <a
-                  href="/verify-you"
+
+                <button
                   className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  disabled={buttonDisabled}
+                  onClick={() => navigate("/verify-you")}
                 >
                   Send Code
-                </a>
-
+                </button>
 
                 <Link to="/"
-                  className=" my-40 font-bold flex justify-center text-red-500 items-center"
+                  className="my-40 font-bold flex justify-center text-red-500 items-center"
                 >
                   Back to Home
                 </Link>