registration and reset warning text

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -6,6 +6,7 @@ import { useNotification } from "@hooks/useNotification";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
+import { Loader } from "@components/Common/Loader/Loader";
 
 import anyMoment from "assets/icons/anyMoment.svg";
 import doc from "assets/icons/doc.svg";
@@ -26,6 +27,8 @@ export const ModalRegistration = ({ active, setActive }) => {
     password: false,
   });
 
+  const [loader, setLoader] = useState(false)
+
   const validateEmail = (email) => {
     // регулярное выражение для проверки email
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -34,14 +37,6 @@ export const ModalRegistration = ({ active, setActive }) => {
     return re.test(email);
   };
 
-  const resetInputsValue = () => {
-    setInputsValue({
-      userName: "",
-      email: "",
-      password: "",
-    });
-  };
-
   const { showNotification } = useNotification();
 
   const validateForm = () => {
@@ -67,6 +62,7 @@ export const ModalRegistration = ({ active, setActive }) => {
     if (validateForm()) {
       return;
     }
+    setLoader(true)
     apiRequest("/register/sign-up", {
       method: "POST",
       data: {
@@ -75,6 +71,7 @@ export const ModalRegistration = ({ active, setActive }) => {
         password: inputsValue.password,
       },
     }).then((data) => {
+      setLoader(false)
       if (!data) {
         showNotification({
           show: true,
@@ -82,8 +79,7 @@ export const ModalRegistration = ({ active, setActive }) => {
           type: "error",
         });
       } else {
-        setActive(false);
+        closeModal()
-        resetInputsValue();
         showNotification({
           show: true,
           text: "Аккаунт успешно создан",
@@ -92,8 +88,22 @@ export const ModalRegistration = ({ active, setActive }) => {
       }
     });
   };
+
+  const closeModal = () => {
+    setInputsValue({
+      userName: "",
+      email: "",
+      password: "",
+    });
+    setInputsError({
+      name: false,
+      email: false,
+      password: false,
+    });
+    setActive(false);
+  }
   return (
-    <ModalLayout active={active} setActive={setActive} styles={"registration"}>
+    <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
       <div className="registration-body__left">
         <h2>
           Подключайтесь к <p>itguild.</p>
@@ -120,6 +130,7 @@ export const ModalRegistration = ({ active, setActive }) => {
                     userName: e.target.value,
                   }));
                 }}
+                value={inputsValue.userName}
                 placeholder="Имя"
               />
               {inputsError.name && <span>Минимум 2 символов</span>}
@@ -140,6 +151,7 @@ export const ModalRegistration = ({ active, setActive }) => {
                     email: e.target.value,
                   }));
                 }}
+                value={inputsValue.email}
                 placeholder="Почта"
               />
               {inputsError.email && <span>Введите коректный email</span>}
@@ -165,6 +177,7 @@ export const ModalRegistration = ({ active, setActive }) => {
                     password: e.target.value,
                   }));
                 }}
+                value={inputsValue.password}
                 placeholder="Пароль"
               />
               {inputsError.password && <span>Минимум 6 символов</span>}
@@ -172,6 +185,8 @@ export const ModalRegistration = ({ active, setActive }) => {
           </div>
         </div>
         <div className="button-box">
+          {loader ?
+            <Loader style={'green'} /> :
             <BaseButton
                 onClick={(e) => {
                   e.preventDefault();
@@ -181,6 +196,7 @@ export const ModalRegistration = ({ active, setActive }) => {
             >
               Отправить
             </BaseButton>
+          }
           {/*<h5>*/}
           {/*  У вас уже есть аккаунт? <p>Войти</p>*/}
           {/*</h5>*/}
@@ -209,7 +225,7 @@ export const ModalRegistration = ({ active, setActive }) => {
           <p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
         </div>
       </div>
-      <span onClick={() => setActive(false)} className="exit"></span>
+      <span onClick={() => closeModal()} className="exit"></span>
     </ModalLayout>
   );
 };

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -87,7 +87,7 @@
 
         &__submit {
           width: 174px;
-          height: 46px;
+          height: 50px;
           font-size: 18px;
           margin-right: 55px;
         }
@@ -145,4 +145,9 @@
       }
     }
   }
+
+  .loader {
+    justify-content: start;
+    left: 80px;
+  }
 }

src/components/Modal/ModalResetPassword/ModalResetPassword.jsx

@@ -5,6 +5,7 @@ import { apiRequest } from "@api/request";
 import { useNotification } from "@hooks/useNotification";
 
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
+import { Loader } from "@components/Common/Loader/Loader";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import close from "assets/icons/close.png";
@@ -19,6 +20,12 @@ export const ModalResetPassword = ({ active, setActive }) => {
     password: "",
   });
 
+  const [inputsError, setInputsError] = useState({
+    email: false,
+    password: false,
+    token: false
+  });
+
   const validateEmail = (email) => {
     // регулярное выражение для проверки email
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -27,6 +34,8 @@ export const ModalResetPassword = ({ active, setActive }) => {
     return re.test(email);
   };
 
+  const [loader, setLoader] = useState(false)
+
   const resetInputsValue = () => {
     setInputsValue({
       email: "",
@@ -38,18 +47,21 @@ export const ModalResetPassword = ({ active, setActive }) => {
   const { showNotification } = useNotification();
   const submitHandler = () => {
     if (!validateEmail(inputsValue.email)) {
+      setInputsError((prevValue) => ({ ...prevValue, email: true }));
       return showNotification({
         show: true,
         text: "Введите коректный email",
         type: "error",
       });
     }
+    setLoader(true)
     apiRequest("/register/request-password-reset", {
       method: "POST",
       data: {
         email: inputsValue.email,
       },
     }).then((data) => {
+      setLoader(false)
       if (data) {
         showNotification({
           show: true,
@@ -62,19 +74,33 @@ export const ModalResetPassword = ({ active, setActive }) => {
   };
   const resetPassword = () => {
     if (!inputsValue.password || !inputsValue.token) {
+      setInputsError((prevValue) => ({ ...prevValue, password: true, token: true }));
       return showNotification({
         show: true,
         text: "Введите данные",
         type: "error",
       });
     }
+    if (inputsValue.password.length < 6) {
+      setInputsError((prevValue) => ({ ...prevValue, password: true }));
+      return
+    }
+    setLoader(true)
     apiRequest("/register/reset-password", {
       method: "POST",
       data: {
         token: inputsValue.token,
         password: inputsValue.password,
       },
-    }).then(() => {
+    }).then((data) => {
+      setLoader(false)
+      if (data.code === 0) {
+        showNotification({
+          show: true,
+          text: "Введите коректные данные",
+          type: "error",
+        });
+      } else {
         setActive(false);
         resetInputsValue();
         showNotification({
@@ -82,6 +108,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
           text: "Пароль изменён",
           type: "success",
         });
+      }
     });
   };
   return (
@@ -99,14 +126,24 @@ export const ModalResetPassword = ({ active, setActive }) => {
             <h5>Введите email:</h5>
             <input
               type="email"
-              onChange={(e) =>
+              onChange={(e) => {
                 setInputsValue((prevValue) => ({
                   ...prevValue,
                   email: e.target.value,
                 }))
-              }
+                setInputsError({
+                  email: false,
+                  password: false,
+                  token: false
+                });
+              }}
               placeholder="Email"
+              value={inputsValue.email}
+              className={inputsError.email ? "error" : ""}
             />
+            {inputsError.email && <span className='warningText'>Введите коректный email</span>}
+            {loader ?
+                <Loader style={'green'} /> :
                 <button
                 className="resetPassword__btn"
                 onClick={(e) => {
@@ -116,6 +153,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
                 >
                 Отправить
                 </button>
+            }
           </div>
         ) : (
           <div className="resetPassword__email">
@@ -127,25 +165,42 @@ export const ModalResetPassword = ({ active, setActive }) => {
             <h5>Введите код подтверждения:</h5>
             <input
               type="text"
-              onChange={(e) =>
+              onChange={(e) => {
+                setInputsError({
+                  email: false,
+                  password: false,
+                  token: false
+                });
                 setInputsValue((prevValue) => ({
                   ...prevValue,
                   token: e.target.value,
                 }))
-              }
+              }}
+              value={inputsValue.token}
+              className={inputsError.token ? "error" : ""}
               placeholder="token"
             />
+            {inputsError.token && <span className='warningText'>Введите данные</span>}
             <h5>Введите новый пароль:</h5>
             <input
               type="password"
-              onChange={(e) =>
+              onChange={(e) => {
                 setInputsValue((prevValue) => ({
                   ...prevValue,
                   password: e.target.value,
                 }))
-              }
+                setInputsError({
+                  email: false,
+                  password: false,
+                  token: false
+                });
+              }}
               placeholder="password"
+              value={inputsValue.password}
+              className={inputsError.password ? "error" : ""}
             />
+            {inputsError.password && <span className='warningText'>Минимум 6 символов</span>}
+            {loader ? <Loader style={'green'} /> :
                 <button
                     className="resetPassword__btn"
                     onClick={(e) => {
@@ -155,6 +210,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
                 >
                   Отправить
                 </button>
+            }
           </div>
         )}
       </div>

src/components/Modal/ModalResetPassword/modalResetPassword.scss

@@ -29,7 +29,7 @@
     input {
       padding: 10px !important;
       height: 40px !important;
-      margin-bottom: 15px !important;
+      margin-bottom: 5px !important;
     }
 
     &__arrow {
@@ -60,4 +60,14 @@
     border: 2px solid #6aaf5c;
     transition: 0.3s;
   }
+
+  .error {
+    border: 1px solid red;
+  }
+
+  .warningText {
+    color: red;
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
 }