Merge pull request #154 from apuc/registration

Registration
2023-11-23 16:49:32 +03:00 · 2023-11-23 16:49:32 +03:00 · c3f6a66df0
commit c3f6a66df0
parent 36b015b525 3696ccb02c
4 changed files with 161 additions and 60 deletions
--- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx
+++ b/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);
-        resetInputsValue();
+        closeModal();
        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,9 @@ export const ModalRegistration = ({ active, setActive }) => {
          </div>
        </div>
        <div className="button-box">
+          {loader ? (
+            <Loader style={"green"} />
+          ) : (
            <BaseButton
              onClick={(e) => {
                e.preventDefault();
@ -181,6 +197,7 @@ export const ModalRegistration = ({ active, setActive }) => {
            >
              Отправить
            </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>
  );
 };
--- a/src/components/Modal/ModalRegistration/modalRegistration.scss
+++ b/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;
+  }
 }
--- a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx
+++ b/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,19 +74,37 @@ 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 +112,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
          text: "Пароль изменён",
          type: "success",
        });
+      }
    });
  };
  return (
@ -99,14 +130,27 @@ 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 +160,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
              >
                Отправить
              </button>
+            )}
          </div>
        ) : (
          <div className="resetPassword__email">
@ -127,25 +172,48 @@ 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 +223,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
              >
                Отправить
              </button>
+            )}
          </div>
        )}
      </div>
--- a/src/components/Modal/ModalResetPassword/modalResetPassword.scss
+++ b/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;
+  }
 }