Verification Input Done

src/components/verificationInput/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import './VerificationInput.css';
+
+export default class VerificationInput extends React.Component {
+    
+    render() {
+      
+        const numOfFields = 3;
+
+const handleChange = e => {
+  const { maxLength, value, name } = e.target;
+  const [fieldName, fieldIndex] = name.split("-");
+
+  // Check if they hit the max character length
+  if (value.length >= maxLength) {
+    // Check if it's not the last input field
+    if (parseInt(fieldIndex, 10) < 4) {
+      // Get the next input field
+      const nextSibling = document.querySelector(
+        `input[name=ssn-${parseInt(fieldIndex, 10) + 1}]`
+      );
+
+      // If found, focus the next field
+      if (nextSibling !== null) {
+        nextSibling.focus();
+      }
+    }
+  }
+}
+
+
+    return(
+        <div className='flex justify-between w-full'>
+            {[0,1,2,3].map((item, index) => (
+                <input
+            name={`ssn-${index + 1}`}
+            
+            
+            class='code-input' className='h-12 w-12 bg-red46OP flex justify-center items-center text-center rounded-lg outline-1 focus:bg-white outline-red52'
+             type="text" 
+             id="verifyinpt"
+             required 
+             maxlength="1" 
+             onChange={handleChange}
+             onKeyPress={(evt) => {if (!/[0-9]/.test(evt.key)){evt.preventDefault();}}}
+             autoFocus={index == 0 && true}/>
+            ))
+            
+            }
+
+        
+           
+            
+            
+        </div>
+    );
+            }
+}

src/view/LoginSignUp/index.js

@@ -6,12 +6,13 @@ import secondPic from '../../assets/img/undraw_quiz_nlyh.svg';
 import thirdPic from '../../assets/img/undraw_certificate_re_yadi.svg';
 import { Slide } from 'react-slideshow-image';
 import './index.css';
+import VerificationInput from "../../components/verificationInput";
 
 
 const LoginSignUp = ({ activeLogin }) => {
     const [steps, setSteps] = useState(0);
     const [index, setIndex] = useState(0);
-   
+
     const timeoutRef = useRef(null);
 
     const focusHandler = (id) => {
@@ -23,20 +24,20 @@ const LoginSignUp = ({ activeLogin }) => {
         label[id].style.transform = "translate(-10px,-27px)";
         label[id].style.color = "#df1452";
         line[id].style.backgroundColor = "#fff";
-      };
+    };
-    
+
-      const blurHandler = (id) => {
+    const blurHandler = (id) => {
         let inputsBox = document.querySelectorAll(".Login-box-form-item");
         let inputs = document.querySelectorAll(".Login-box-form-item-input");
         let label = document.querySelectorAll(".Login-box-form-item-label");
         let line = document.querySelectorAll(".Login-box-form-item-line");
         if (inputs[id].value === "") {
-          inputsBox[id].style.borderColor = "#EBEBEB";
+            inputsBox[id].style.borderColor = "#EBEBEB";
-          label[id].style.transform = "translate(0px,0px)";
+            label[id].style.transform = "translate(0px,0px)";
-          label[id].style.color = "#959595";
+            label[id].style.color = "#959595";
-          line[id].style.backgroundColor = "#EBEBEB";
+            line[id].style.backgroundColor = "#EBEBEB";
         }
-      };
+    };
     function resetTimeout() {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
@@ -85,12 +86,12 @@ const LoginSignUp = ({ activeLogin }) => {
 
                 <div className="flex w-2/5 border-0 border-l border-solid border flex-col items-center p-6">
                     <div className="h-12 w-full  flex justify-end">
-                    { steps != 0 &&
+                        {steps != 0 &&
-                    <div className="w-12 h-full bg-gray-200 rounded-xl flex items-center justify-center text-gray-500 m-0 text-2xl font-light cursor-pointer" onClick={() => setSteps(steps - 1)}>
+                            <div className="w-12 h-full bg-gray-200 rounded-xl flex items-center justify-center text-gray-500 m-0 text-2xl font-light cursor-pointer" onClick={() => setSteps(steps - 1)}>
-                        {`>`}
+                                {`>`}
+                            </div>
+                        }
                     </div>
-}
-</div>
                     <img src={logo} className="w-1/2 m-4" />
                     <div className="flex flex-col  items-start justify-start leading-normal">
                         <h1 className="text-red26 text-lg font-bold">ورود یا ثبت نام</h1>
@@ -156,6 +157,15 @@ const LoginSignUp = ({ activeLogin }) => {
 
                             </>
                         }
+                        {
+                            steps == 2 &&
+                            <>
+                                <div style={{ direction: 'ltr' }} className="w-full mt-6">
+                                    <VerificationInput />
+                                </div>
+
+                            </>
+                        }
 
 
                         <div className="w-full flex flex-col items-center justify-center">

tailwind.config.js

@@ -25,6 +25,7 @@ module.exports = {
         color19: "#959595", //register input label
         red26: '#521326',
         red52: '#df1452',
+        red46OP: 'rgba(255, 246, 246, 0.8)',
         grayEC: '#ececec'
       },
     },