From 1a341e8638aa9df284be7dc6fe71e0cc0c8cdc78 Mon Sep 17 00:00:00 2001
From: whooaami <yarkos03@gmail.com>
Date: Wed, 4 Oct 2023 12:15:07 +0300
Subject: [PATCH] Create a page with info about sending email activation

---
 FrontEnd/package.json                         |  2 +-
 .../signup/signup-form/SignUpFormContent.js   |  5 +-
 .../SignUp/pages/SignUpModalPage.js           | 28 +++++++
 .../SignUp/pages/SignUpModalPage.module.css   | 73 +++++++++++++++++++
 4 files changed, 106 insertions(+), 2 deletions(-)
 create mode 100644 FrontEnd/src/components/SignUp/pages/SignUpModalPage.js
 create mode 100644 FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css

diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index 99b235d83..07edb2ed9 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -9,7 +9,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.5.0",
+    "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-cookie": "^6.1.0",
     "react-dom": "^18.2.0",
diff --git a/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.js b/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.js
index 994a0d3b8..43da3b7ee 100644
--- a/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.js
+++ b/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.js
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import { useNavigate  } from 'react-router-dom';
 
 import axios from "axios";
 import EyeInvisible from "../../../../authorization/EyeInvisible";
@@ -9,6 +10,7 @@ import styles from "./SignUpFormContent.module.css";
 export function SignUpFormContentComponent(props) {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const navigate = useNavigate();
 
   const togglePassword = () => {
     setShowPassword(!showPassword);
@@ -87,9 +89,10 @@ export function SignUpFormContentComponent(props) {
       data: dataToSend
     }).then(res => console.log(res.data)).catch(error => console.log(error))
     console.log(process.env.REACT_APP_BASE_API_URL)
+    navigate("/sign-up/modal");
   };
+  
   // TODO: add error hndling (separate task)
-  // TODO: add modal about email being sent
 
   return (
     <div className={styles["signup-form"]}>
diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js
new file mode 100644
index 000000000..639d67f4a
--- /dev/null
+++ b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js
@@ -0,0 +1,28 @@
+import styles from "./SignUpModalPage.module.css";
+import DotDecorComponent from "../UI/dotDecor/DotDecor";
+
+export function SignUpModalPage() {
+  return (
+    <div className={styles["modal"]}>
+      <div className={styles["modal__body"]}>
+        <DotDecorComponent position={"up-right"} />
+        <div className={styles["container-modal"]}>
+            <div className={styles["modal__header"]}>Реєстрація майже завершена</div>
+            <div className={styles["modal__footer"]}>
+                <p>
+                  На зазначену Вами електронну пошту відправлено листа. <br />
+                  Будь ласка перейдіть за посиланням з листа для підтвердження вказаної електронної адреси. <br />
+                  На цьому реєстрацію завершено. <br />
+                  <div className={styles["resend-line"]}>
+                    <a href="/sign-up/resend-activation" className={styles["resend-line__link"]}>
+                      Не отримали лист?
+                    </a>
+                  </div>
+                </p>
+            </div>
+        </div>
+        <DotDecorComponent position={"down-left"} />
+      </div>
+    </div>
+  );
+}
diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css
new file mode 100644
index 000000000..aca4be8ca
--- /dev/null
+++ b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css
@@ -0,0 +1,73 @@
+.modal {
+  width: 1512px;
+  border-radius: 8px;
+  background: var(--wf-base-white, #fff);
+}
+  
+.modal__body {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 725px;
+  background: var(--primary-green-20, #f1fff7);
+}
+
+.container-modal {
+  width: 600px;
+  height: 225px;
+  position: absolute;
+  z-index: 2;
+}
+  
+.modal__header {
+  display: flex;
+  padding: 18px 24px;
+  align-items: flex-start;
+  gap: 36px;
+  align-self: stretch;
+  background: var(--main-white, #fff);
+
+  /* border & divider/divider ↓ */
+  box-shadow: 0px -1px 0px 0px #f0f0f0 inset;
+  color: var(--character-title-85, rgba(0, 0, 0, 0.85));
+  font-feature-settings: "calt" off;
+
+  /* Text/Body/16-Semi bold */
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  /* 125% */
+  letter-spacing: -0.16px;
+}
+  
+.modal__footer {
+  display: flex;
+  padding: 16px 16px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  background: var(--main-white, #fff);
+
+  /* border & divider/divider ↑ */
+  box-shadow: 0px 1px 0px 0px #f0f0f0 inset;
+}
+
+.resend-line {
+  margin-top: 20px;
+}
+
+.resend-line__link {
+  color: var(--accent-accelerate-1500, #00a3cf);
+  font-feature-settings: "calt" off;
+
+  /* Text/Body/14-Regular */
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.14px;
+}