pages rename

src/pages/TrackerRegistration/TrackerRegistration.jsx

@@ -0,0 +1,156 @@
+import React, { useState } from "react";
+import { Navigate } from "react-router-dom";
+
+import { useFormValidation } from "@hooks/useFormValidation";
+import { useNotification } from "@hooks/useNotification";
+
+import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
+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 arrowInfo from "assets/icons/trackerIntroInfo.svg";
+import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
+import registrationImg from "assets/images/trackerRegistrationImg.png";
+
+import "./trackerRegistration.scss";
+
+export const TrackerRegistration = () => {
+  const [modalConfirmOpen, setModalConfirm] = useState(false);
+  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">
+      <AuthHeader />
+      <SideBar />
+      <div className="tracker-auth__content">
+        <div className="container">
+          <h1 className="tracker-auth__title">
+            Создайте свое{" "}
+            <span>
+              рабочее пространство
+              <img src={arrowInfo} alt="arrow" />
+            </span>
+          </h1>
+          <div className="tracker-registration__form">
+            <div className="tracker-registration__form__inputs">
+              <div className="tracker-registration__input-container">
+                <h5>Ваше имя</h5>
+                <input
+                  placeholder="Имя"
+                  className={validationErrors.username ? "error" : ""}
+                  onChange={handleChange}
+                  value={formData.username}
+                  id="username"
+                />
+                <span>{validationErrors.username}</span>
+              </div>
+              <div className="tracker-registration__input-container">
+                <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__input-container">
+                <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__input-container">
+                <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={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>
+                  Создавайте и редактируйте задачи и проекты вместе с другими
+                  участниками команды.
+                </p>
+              </div>
+            </div>
+            <img
+              className="tracker-registration__form__img"
+              src={registrationImg}
+              alt="img"
+            />
+          </div>
+        </div>
+        {modalConfirmOpen && (
+          <ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
+            <ModalTrackerRegistration
+              setModalReset={setModalConfirm}
+              email={formData.email}
+            />
+          </ModalLayout>
+        )}
+      </div>
+      <Footer />
+    </div>
+  );
+};