catalogSpecialists

src/pages/PartnerСategories/partnerСategories.scss

@@ -14,6 +14,7 @@
   &__items {
     display: flex;
     gap: 10px;
+    flex-wrap: wrap;
     //flex-wrap: wrap;
     //margin-top: 25px;
     //row-gap: 24px;

src/pages/TrackerRegistration/TrackerRegistration.js

@@ -5,6 +5,9 @@ import { Footer } from "@components/Common/Footer/Footer";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration";
 import SideBar from "@components/SideBar/SideBar";
+import { useFormValidation } from "@hooks/useFormValidation";
+import { useNotification } from "@hooks/useNotification";
+import { Navigate } from "react-router-dom";
 
 import arrowInfo from "assets/icons/trackerIntroInfo.svg";
 import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
@@ -14,9 +17,42 @@ import "./trackerRegistration.scss";
 
 export const TrackerRegistration = () => {
   const [modalConfirmOpen, setModalConfirm] = useState(false);
-  const [inputs, setInputs] = useState({
-    email: ""
-  });
+  const fields = {
+    username: "",
+    email: "",
+    password: "",
+    secondPassword: ""
+  };
+
+  const apiEndpoint = "/register/sign-up";
+
+  const { showNotification } = useNotification();
+  const showNotificationError = () => {
+    showNotification({
+      show: true,
+      text: "Аккаунт с таким логином или email уже существует",
+      type: "error"
+    });
+  };
+  const showNotificationTrue = () => {
+    showNotification({
+      show: true,
+      text: "Аккаунт успешно создан",
+      type: "success"
+    });
+  };
+
+  const {
+    formData,
+    validationErrors,
+    handleChange,
+    handleSubmit,
+  } = useFormValidation(
+    apiEndpoint,
+    fields,
+    showNotificationError,
+    showNotificationTrue,
+  );
 
   return (
     <div className="tracker-registration">
@@ -34,33 +70,64 @@ export const TrackerRegistration = () => {
           <div className="tracker-registration__form">
             <div className="tracker-registration__form__inputs">
               <div className="tracker-registration__inputContainer">
-                <span>Ваше имя</span>
-                <input placeholder="Имя" />
-              </div>
-              <div className="tracker-registration__inputContainer">
-                <span>Ваш e-mail</span>
+                <h5>Ваше имя</h5>
                 <input
-                  placeholder="E-mail"
-                  onChange={(e) =>
-                    setInputs((prevState) => ({
-                      ...prevState,
-                      email: e.target.value
-                    }))
-                  }
-                  type="email"
+                  placeholder="Имя"
+                  className={validationErrors.username ? "error" : ""}
+                  onChange={handleChange}
+                  value={formData.username}
+                  id="username"
                 />
+                <span>{validationErrors.username}</span>
               </div>
               <div className="tracker-registration__inputContainer">
-                <span>Придумайте пароль</span>
-                <input placeholder="Пароль" />
+                <h5>Ваш e-mail</h5>
+                <input
+                  onChange={handleChange}
+                  className={validationErrors.email ? "error" : ""}
+                  placeholder="E-mail"
+                  type="email"
+                  id="email"
+                  value={formData.email}
+                />
+                <span>{validationErrors.email}</span>
               </div>
               <div className="tracker-registration__inputContainer">
-                <span>Повторите пароль</span>
-                <input placeholder="Повторите пароль" />
+                <h5>Придумайте пароль</h5>
+                <input
+                  placeholder="Пароль"
+                  className={validationErrors.password ? "error" : ""}
+                  onChange={handleChange}
+                  value={formData.password}
+                  type="password"
+                  id="password"
+                />
+                <span>{validationErrors.password}</span>
+              </div>
+              <div className="tracker-registration__inputContainer">
+                <h5>Повторите пароль</h5>
+                <input
+                  placeholder="Повторите пароль"
+                  className={validationErrors.secondPassword ? "error" : ""}
+                  value={formData.secondPassword}
+                  type="password"
+                  onChange={handleChange}
+                  id="secondPassword"
+                />
+                <span>{validationErrors.secondPassword}</span>
               </div>
             </div>
             <div className="tracker-registration__form__submit">
-              <button onClick={() => setModalConfirm(true)}>Отправить</button>
+              <button
+                onClick={async (e) => {
+                  e.preventDefault();
+                  const result = await handleSubmit(e);
+                  if (result === true) {
+                    setModalConfirm(true)
+                  }
+                }}
+              >
+                Отправить</button>
               <div className="tracker-registration__form__info">
                 <img src={authImg} alt="img" />
                 <p>
@@ -80,7 +147,7 @@ export const TrackerRegistration = () => {
           <ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
             <ModalTrackerRegistration
               setModalReset={setModalConfirm}
-              email={inputs.email}
+              email={formData.email}
             />
           </ModalLayout>
         )}

src/pages/TrackerRegistration/trackerRegistration.scss

@@ -41,6 +41,7 @@
     &__submit {
       display: flex;
       align-items: center;
+      margin-top: 5px;
 
       button {
         border-radius: 44px;
@@ -106,15 +107,18 @@
   &__inputContainer {
     display: flex;
     flex-direction: column;
-    row-gap: 15px;
     max-width: 300px;
     width: 100%;
     margin-bottom: 44px;
 
+    h5 {
+      font-size: 15px;
+    }
+
     span {
       font-weight: 400;
-      font-size: 15px;
-      color: #000;
+      font-size: 12px;
+      color: red;
     }
 
     input {
@@ -122,6 +126,7 @@
       padding: 8px 12px 9px;
       background-color: #EFF2F7;
       border-radius: 8px;
+      margin: 10px 0;
       border: none;
       font-weight: 400;
       font-size: 15px;
@@ -132,5 +137,9 @@
       margin-bottom: 0;
       max-width: none;
     }
+
+    .error {
+      border: 1px solid red;
+    }
   }
 }