added otp modal

src/components/auth/Login.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Button, FloatLabelInput } from "..";
+import CustomModal from "../modal/CustomModal";
 import { useNavigate } from "react-router-dom";
 import { RouteHandler } from "../../router/routes";
 
@@ -30,63 +31,82 @@ export default function Login() {
     setFormDetails((prev) => ({ ...prev, [name]: value }));
   };
 
-  return (
-    <div className={`w-full overflow-y-auto bg-top bg-cover`}>
-      <div className="w-full flex justify-center">
-        <div className="w-2/3 md:max-w-[570px]">
-          <div className="bg-white w-full rounded-2xl border-2 border-black">
-            <div className="w-full p-5 sm:p-10 lg:p-20 flex flex-col justify-between items-center h-full">
-              <div className="mb-4">
-                <h1 className="text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black">
-                  Welcome!
-                </h1>
-                <p className="text-xl mt-4 text-center font-medium text-black dark:text-black">
-                  Please login with your email and default password provided to you
-                </p>
-              </div>
+  const [modal, setModal] = useState<boolean>(false)
 
-              <div className="w-full">
-                {/* INPUTS */}
-                <div className="w-full">
-                  <div className="relative my-2 py-2">
-                    <FloatLabelInput
-                      id="email"
-                      name="email"
-                      type="email"
-                      placeHolder="Email"
-                      labelName="Email"
-                      value={formDetails.email}
-                      inputClass=""
-                      onChange={handleFormChange}
-                    />
-                  </div>
-                  <div className="relative my-2 py-2">
-                    <FloatLabelInput
-                      id="password"
-                      name="password"
-                      type="password"
-                      placeHolder="Password"
-                      labelName="Password"
-                      value={formDetails.password}
-                      inputClass=""
-                      onChange={handleFormChange}
-                    />
-                  </div>
+  return (
+    <>
+      <div className={`w-full overflow-y-auto bg-top bg-cover`}>
+        <div className="w-full flex justify-center">
+          <div className="w-2/3 md:max-w-[570px]">
+            <div className="bg-white w-full rounded-2xl border-2 border-black">
+              <div className="w-full p-5 sm:p-10 lg:p-20 flex flex-col justify-between items-center h-full">
+                <div className="mb-4">
+                  <h1 className="text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black">
+                    Welcome!
+                  </h1>
+                  <p className="text-xl mt-4 text-center font-medium text-black dark:text-black">
+                    Please login with your email and default password provided to you
+                  </p>
                 </div>
 
-                <div className="mt-10 w-full sm:flex justify-between items-center gap-2">
-                  <Button
-                    text="Enter"
-                    className="rounded-md w-full sm:w-2/5 text-xl capitalize font-bold"
-                    onClick={()=>{navigate(RouteHandler.otppage, {replace:true})}}
-                  />
-                  {/* <Link to='' className='text-black text-sm'>Forget your password?</Link> */}
+                <div className="w-full">
+                  {/* INPUTS */}
+                  <div className="w-full">
+                    <div className="relative my-2 py-2">
+                      <FloatLabelInput
+                        id="email"
+                        name="email"
+                        type="email"
+                        placeHolder="Email"
+                        labelName="Email"
+                        value={formDetails.email}
+                        inputClass=""
+                        onChange={handleFormChange}
+                      />
+                    </div>
+                    <div className="relative my-2 py-2">
+                      <FloatLabelInput
+                        id="password"
+                        name="password"
+                        type="password"
+                        placeHolder="Password"
+                        labelName="Password"
+                        value={formDetails.password}
+                        inputClass=""
+                        onChange={handleFormChange}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="mt-10 w-full sm:flex justify-between items-center gap-2">
+                    <Button
+                      text="Enter"
+                      className="rounded-md w-full sm:w-2/5 text-xl capitalize font-bold"
+                      onClick={()=>{setModal(true)}}
+                    />
+                    {/* <Link to='' className='text-black text-sm'>Forget your password?</Link> */}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+      { modal &&
+        <CustomModal>
+          <div className="px-10 py-5 md:px-16 bg-white w-[90%] max-w-[420px] flex flex-col justify-center items-center rounded-xl">
+            <p className="text-sm font-bold text-slate-700 text-center tracking-wide leading-normal">We have sent you a verification code to complete this Login. Please check your phone number</p>
+            <div className="w-full flex justify-end">
+              <button
+                className="font-bold text-[11px] lg:text-[13px] text-[#5A2C82]"
+                onClick={()=>{navigate(RouteHandler.otppage, { state: {continue: true }, replace:true })}}
+              >
+                Ok
+              </button>
+            </div>
+          </div>
+        </CustomModal>
+      }
+    </>
   );
 }