From 6b68dee958c9f4bb6906b088459f820b7a682776 Mon Sep 17 00:00:00 2001
From: ali josheghani <ali.josheghani2005@gmail.com>
Date: Tue, 4 Jun 2024 00:07:41 +0330
Subject: [PATCH] feat : add code verifaction for authorization

---
 src/pages/login/index.tsx                     | 70 +++++++++++++++++--
 .../shop/section/bestQuality/BestQuality.tsx  |  2 +-
 src/pages/shop/section/intro/Intro.tsx        |  2 +-
 .../productList/components/ListAllProduct.tsx |  2 +-
 .../section/components/ListTutorial.tsx       |  2 +-
 src/types/props.d.ts                          | 13 ++--
 6 files changed, 77 insertions(+), 14 deletions(-)

diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 0909300..58b4cfd 100644
--- a/src/pages/login/index.tsx
+++ b/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>
diff --git a/src/pages/shop/section/bestQuality/BestQuality.tsx b/src/pages/shop/section/bestQuality/BestQuality.tsx
index acd5841..9928d12 100644
--- a/src/pages/shop/section/bestQuality/BestQuality.tsx
+++ b/src/pages/shop/section/bestQuality/BestQuality.tsx
@@ -9,7 +9,7 @@ const BestQuality = () => {
       <div className="w-full h-full flex flex-col gap-2 md:gap-4 justify-center items-center">
         <h1 className="max-md:text-xl md:text-4xl font-bold">
           به عنوان{" "}
-          <span className="max-md:text-xl md:text-5xl text-yellow-600 font-bold">
+          <span className="max-md:text-xl md:text-5xl text-secondTheme font-bold">
             اولین و بهترین
           </span>{" "}
           ارائه دهنده{" "}
diff --git a/src/pages/shop/section/intro/Intro.tsx b/src/pages/shop/section/intro/Intro.tsx
index e3537e2..6d76660 100644
--- a/src/pages/shop/section/intro/Intro.tsx
+++ b/src/pages/shop/section/intro/Intro.tsx
@@ -8,7 +8,7 @@ const Intro = () => {
       <div className="w-full h-full flex flex-col gap-8 justify-center mx-auto items-center">
         <h1 className="text-start flex flex-col gap-3 md:gap-4 text-3xl md:text-4xl lg:text-5xl">
           <span className="inline-block">بزرگترین فروشگاه</span>
-          <span className="text-yellow-600 font-bold max-md:text-center">
+          <span className="text-secondTheme font-bold max-md:text-center">
             کاهش پینگ
           </span>{" "}
           <span className="inline-block max-md:text-center">در ایران</span>
diff --git a/src/pages/shop/section/productList/components/ListAllProduct.tsx b/src/pages/shop/section/productList/components/ListAllProduct.tsx
index a11dbc7..b8336c7 100644
--- a/src/pages/shop/section/productList/components/ListAllProduct.tsx
+++ b/src/pages/shop/section/productList/components/ListAllProduct.tsx
@@ -63,7 +63,7 @@ const ListAllProduct = ({ activeId }: { activeId: number }) => {
   }, [activeId]);
 
   return (
-    <div className="w-full h-full border-4 gap-5 border-spacing-1 border-solid border-yellow-600 rounded-lg p-3 grid max-sm:grid-cols-1 max-md:grid-cols-2 max-lg:grid-cols-3 lg:grid-cols-4">
+    <div className="w-full h-full border-4 gap-5 border-spacing-1 border-solid border-secondTheme rounded-lg p-3 grid max-sm:grid-cols-1 max-md:grid-cols-2 max-lg:grid-cols-3 lg:grid-cols-4">
       {dataProduct?.map((item) => {
         return (
           <Fragment key={item.id}>
diff --git a/src/pages/tutorial/section/components/ListTutorial.tsx b/src/pages/tutorial/section/components/ListTutorial.tsx
index 80facc1..14f4305 100644
--- a/src/pages/tutorial/section/components/ListTutorial.tsx
+++ b/src/pages/tutorial/section/components/ListTutorial.tsx
@@ -12,7 +12,7 @@ const ListTutorials = ({
           return (
             <li
               className={`text-center text-sm md:text-lg ${
-                i.id === activeTutorial ? "bg-yellow-600" : "bg-gray-800"
+                i.id === activeTutorial ? "bg-secondTheme" : "bg-gray-800"
               } rounded-md p-2 cursor-pointer`}
               onClick={() => setActiveTutorial(i.id)}
               key={i.id}
diff --git a/src/types/props.d.ts b/src/types/props.d.ts
index 924b506..af46620 100644
--- a/src/types/props.d.ts
+++ b/src/types/props.d.ts
@@ -66,18 +66,18 @@ export type LearnProps = {
 };
 
 // begin TypeWriter.tsx
-interface TypewriterProps {
+export interface TypewriterProps {
   text: string;
   speed?: number; // سرعت تایپ در میلی‌ثانیه
 }
 
-interface ButtonListProps {
+export interface ButtonListProps {
   ProductsList: { id: number; title: string }[];
   activeId: number;
   setActiveId: SetStateAction;
 }
 
-interface ProductBoxProps {
+export interface ProductBoxProps {
   title: string;
   space: number;
   users: number;
@@ -86,7 +86,7 @@ interface ProductBoxProps {
   variant: number;
 }
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
   id?: string;
   type: string;
@@ -94,3 +94,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   placeholder?: string;
   extra?: string;
 }
+
+export interface MuiModalProps {
+  isOpenModal: boolean;
+  setIsOpenModal:SetStateAction
+}