feat : add code verifaction for authorization

src/pages/login/index.tsx

@@ -4,27 +4,44 @@ import { useState } from "react";
 import LoginNumberOrEmail from "./components/LoginNumberOrEmail";
 import { motion } from "framer-motion";
 import Rabbit from "./components/Rabbit";
+import OTPInput from "react-otp-input";
 
 const Login = () => {
   const [loginWithEmail, setLoginWithEmail] = useState<boolean>(false);
   const [inputText, setInputText] = useState<boolean>(false);
   const [inputPassword, setInputPassword] = useState<boolean>(false);
 
+  const [authCode, setAuthCode] = useState<boolean>(false);
+  const [errorCode, setErrorCode] = useState<boolean>(false);
+
+  const [otp, setOtp] = useState<string>("");
+
+  const handleChange = (otp: string) => {
+    setOtp(otp);
+    if (otp === "1111" && otp.length === 4)
+      setAuthCode(true), setErrorCode(false);
+    else if (otp.length === 4) setErrorCode(true), setAuthCode(false);
+    else setAuthCode(false), setErrorCode(false);
+  };
+
   return (
     <>
       <div className="w-4/5 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 glass">
-        <Rabbit focusInputText={inputText} focusInputPassword={inputPassword} />
+        {/* <Rabbit focusInputText={inputText} focusInputPassword={inputPassword} /> */}
         <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
           <h1 className="text-2xl font-bold text-center leading-tight tracking-tight md:text-3xl text-white">
             ورود
           </h1>
-          <LoginNumberOrEmail
+          <h1 className="text-base text-center leading-tight tracking-tight md:text-lg text-white">
+            کد ارسال شده رو وارد نمایید:
+          </h1>
+          {/* <LoginNumberOrEmail
             loginWithEmail={loginWithEmail}
             setLoginWithEmail={setLoginWithEmail}
-          />
+          /> */}
           <form className="flex flex-col gap-10">
             <div className="w-full h-full flex flex-col gap-2">
-              {!loginWithEmail && (
+              {/* {!loginWithEmail && (
                 <motion.div
                   initial={{ x: "100vw", opacity: 0 }}
                   animate={{ x: 0, opacity: 1 }}
@@ -53,11 +70,52 @@ const Login = () => {
                     onBlur={() => setInputText(false)}
                   />
                 </motion.div>
-              )}
+              )} */}
+              <OTPInput
+                value={otp}
+                onChange={handleChange}
+                numInputs={4}
+                inputStyle={{
+                  width: "3rem",
+                  height: "3rem",
+                  margin: "0 0.5rem",
+                  fontSize: "2rem",
+                  borderRadius: "4px",
+                  border: "none",
+                  outline: "none",
+                  textAlign: "center",
+                  direction: "ltr",
+                }}
+                shouldAutoFocus={true}
+                containerStyle={{
+                  display: "flex",
+                  flexDirection: "row-reverse",
+                  justifyContent: "center",
+                }}
+                renderInput={(props) => (
+                  <motion.input
+                    {...props}
+                    type="number"
+                    initial={{
+                      y: 20,
+                      opacity: 0,
+                      border: "2px solid transparent",
+                    }}
+                    animate={{
+                      y: 0,
+                      opacity: 1,
+                      border: `2px solid ${
+                        authCode ? "green" : errorCode ? "red" : "transparent"
+                      }`,
+                    }}
+                    className={`bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-600 shadow-md max-sm:!w-[2.5rem] max-sm:!h-[2.5rem] shadow-gray-900 ${props.className}`}
+                  />
+                )}
+              />
             </div>
 
             <div className="w-full h-full grid grid-cols-1">
-              <Button extra="py-2">ورود</Button>
+              <Button extra="py-2">تایید</Button>
             </div>
           </form>
         </div>