From c69adb0d14ed8fb6c66c4d63d9fa644833a1cab3 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Sun, 19 Nov 2023 18:49:52 +0300
Subject: [PATCH] validate registration

---
 .../ModalRegistration/ModalRegistration.jsx   | 126 ++++++++++++------
 .../ModalRegistration/modalRegistration.scss  |  17 ++-
 2 files changed, 101 insertions(+), 42 deletions(-)

diff --git a/src/components/Modal/ModalRegistration/ModalRegistration.jsx b/src/components/Modal/ModalRegistration/ModalRegistration.jsx
index 4e03bb42..5f109475 100644
--- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx
+++ b/src/components/Modal/ModalRegistration/ModalRegistration.jsx
@@ -20,6 +20,12 @@ export const ModalRegistration = ({ active, setActive }) => {
     password: "",
   });
 
+  const [inputsError, setInputsError] = useState({
+    name: false,
+    email: false,
+    password: false
+  })
+
   const validateEmail = (email) => {
     // регулярное выражение для проверки email
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -37,20 +43,25 @@ export const ModalRegistration = ({ active, setActive }) => {
   };
 
   const { showNotification } = useNotification();
-  const submitHandler = () => {
-    if (!inputsValue.password || !inputsValue.userName || !inputsValue.email) {
-      return showNotification({
-        show: true,
-        text: "Введите коректные данные",
-        type: "error",
-      });
+
+  const validateForm = () => {
+    if (inputsValue.password.length < 6) {
+      setInputsError((prevValue) => ({...prevValue, password: true}))
+    }
+    if (inputsValue.userName.length < 6) {
+      setInputsError((prevValue) => ({...prevValue, name: true}))
     }
     if (!validateEmail(inputsValue.email)) {
-      return showNotification({
-        show: true,
-        text: "Введите коректный email",
-        type: "error",
-      });
+      setInputsError((prevValue) => ({...prevValue, email: true}))
+    }
+    if (inputsValue.password.length < 6 || inputsValue.userName.length < 6 || !validateEmail(inputsValue.email)) {
+      return true
+    }
+  }
+
+  const submitHandler = () => {
+    if(validateForm()) {
+      return
     }
     apiRequest("/register/sign-up", {
       method: "POST",
@@ -90,43 +101,76 @@ export const ModalRegistration = ({ active, setActive }) => {
 
         <div className="input-body">
           <div className="input-body__box">
-            <h5>Ваше имя</h5>
-            <input
-              onChange={(e) =>
-                setInputsValue((prevValue) => ({
-                  ...prevValue,
-                  userName: e.target.value,
-                }))
+            <div className='inputContainer'>
+              <h5>Ваше имя</h5>
+              <input
+                className={inputsError.name ? 'error' : ''}
+                onChange={(e) => {
+                  setInputsError({
+                    name: false,
+                    email: false,
+                    password: false
+                  })
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    userName: e.target.value,
+                  }))
+                }}
+                placeholder="Name"
+              />
+              {inputsError.name &&
+                  <span>Минимум 6 символов</span>
               }
-              placeholder="Name"
-            />
-            <h5>E-mail</h5>
-            <input
-              type="email"
-              onChange={(e) =>
-                setInputsValue((prevValue) => ({
-                  ...prevValue,
-                  email: e.target.value,
-                }))
+            </div>
+            <div className='inputContainer'>
+              <h5>E-mail</h5>
+              <input
+                type="email"
+                className={inputsError.email ? 'error' : ''}
+                onChange={(e) => {
+                  setInputsError({
+                    name: false,
+                    email: false,
+                    password: false
+                  })
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    email: e.target.value,
+                  }))
+                }}
+                placeholder="Email"
+              />
+              {inputsError.email &&
+                  <span>Введите коректный email</span>
               }
-              placeholder="Email"
-            />
+            </div>
           </div>
 
           <div className="input-body__box">
             {/*<h5>Название компании</h5>*/}
             {/*<input></input>*/}
-            <h5>Пароль</h5>
-            <input
-              type="password"
-              onChange={(e) =>
-                setInputsValue((prevValue) => ({
-                  ...prevValue,
-                  password: e.target.value,
-                }))
+            <div className='inputContainer'>
+              <h5>Пароль</h5>
+              <input
+                className={inputsError.password ? 'error' : ''}
+                type="password"
+                onChange={(e) => {
+                  setInputsError({
+                    name: false,
+                    email: false,
+                    password: false
+                  })
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    password: e.target.value,
+                  }))
+                }}
+                placeholder="Password"
+              />
+              {inputsError.password &&
+                  <span>Минимум 6 символов</span>
               }
-              placeholder="Password"
-            />
+            </div>
           </div>
         </div>
         <div className="button-box">
diff --git a/src/components/Modal/ModalRegistration/modalRegistration.scss b/src/components/Modal/ModalRegistration/modalRegistration.scss
index ca2bf082..e8621e9d 100644
--- a/src/components/Modal/ModalRegistration/modalRegistration.scss
+++ b/src/components/Modal/ModalRegistration/modalRegistration.scss
@@ -59,9 +59,24 @@
             background: #eff2f7;
             border-radius: 8px;
             border: none;
-            margin-bottom: 35px;
+            margin-bottom: 5px;
             padding-left: 20px;
           }
+
+          .inputContainer {
+            height: 81px;
+            margin-bottom: 10px;
+            max-width: 294px;
+          }
+
+          span {
+            color: red;
+            font-size: 12px;
+          }
+
+          .error {
+            border: 1px solid red;
+          }
         }
       }