Merge pull request #154 from apuc/registration

Registration

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -5,6 +5,7 @@ import { apiRequest } from "@api/request";
 import { useNotification } from "@hooks/useNotification";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import anyMoment from "assets/icons/anyMoment.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,15 +185,19 @@ export const ModalRegistration = ({ active, setActive }) => {
           </div>
         </div>
         <div className="button-box">
-          <BaseButton
+          {loader ? (
-            onClick={(e) => {
+            <Loader style={"green"} />
-              e.preventDefault();
+          ) : (
-              submitHandler();
+            <BaseButton
-            }}
+              onClick={(e) => {
-            styles="button-box__submit"
+                e.preventDefault();
-          >
+                submitHandler();
-            Отправить
+              }}
-          </BaseButton>
+              styles="button-box__submit"
+            >
+              Отправить
+            </BaseButton>
+          )}
           {/*<h5>*/}
           {/*  У вас уже есть аккаунт? <p>Войти</p>*/}
           {/*</h5>*/}
@@ -209,7 +226,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

@@ -4,6 +4,7 @@ import { apiRequest } from "@api/request";
 
 import { useNotification } from "@hooks/useNotification";
 
+import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import arrow from "assets/icons/arrows/arrowCalendar.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,26 +74,45 @@ 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) => {
-      setActive(false);
+      setLoader(false);
-      resetInputsValue();
+      if (data.code === 0) {
-      showNotification({
+        showNotification({
-        show: true,
+          show: true,
-        text: "Пароль изменён",
+          text: "Введите коректные данные",
-        type: "success",
+          type: "error",
-      });
+        });
+      } else {
+        setActive(false);
+        resetInputsValue();
+        showNotification({
+          show: true,
+          text: "Пароль изменён",
+          type: "success",
+        });
+      }
     });
   };
   return (
@@ -99,23 +130,37 @@ export const ModalResetPassword = ({ active, setActive }) => {
             <h5>Введите email:</h5>
             <input
               type="email"
-              onChange={(e) =>
+              onChange={(e) => {
                 setInputsValue((prevValue) => ({
                   ...prevValue,
                   email: e.target.value,
-                }))
+                }));
-              }
+                setInputsError({
-              placeholder="Email"
+                  email: false,
-            />
+                  password: false,
-            <button
+                  token: false,
-              className="resetPassword__btn"
+                });
-              onClick={(e) => {
-                e.preventDefault();
-                submitHandler();
               }}
-            >
+              placeholder="Email"
-              Отправить
+              value={inputsValue.email}
-            </button>
+              className={inputsError.email ? "error" : ""}
+            />
+            {inputsError.email && (
+              <span className="warningText">Введите коректный email</span>
+            )}
+            {loader ? (
+              <Loader style={"green"} />
+            ) : (
+              <button
+                className="resetPassword__btn"
+                onClick={(e) => {
+                  e.preventDefault();
+                  submitHandler();
+                }}
+              >
+                Отправить
+              </button>
+            )}
           </div>
         ) : (
           <div className="resetPassword__email">
@@ -127,34 +172,58 @@ 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({
-              placeholder="password"
+                  email: false,
-            />
+                  password: false,
-            <button
+                  token: false,
-              className="resetPassword__btn"
+                });
-              onClick={(e) => {
-                e.preventDefault();
-                resetPassword();
               }}
-            >
+              placeholder="password"
-              Отправить
+              value={inputsValue.password}
-            </button>
+              className={inputsError.password ? "error" : ""}
+            />
+            {inputsError.password && (
+              <span className="warningText">Минимум 6 символов</span>
+            )}
+            {loader ? (
+              <Loader style={"green"} />
+            ) : (
+              <button
+                className="resetPassword__btn"
+                onClick={(e) => {
+                  e.preventDefault();
+                  resetPassword();
+                }}
+              >
+                Отправить
+              </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;
+  }
 }