Create a page with info about sending email activation

ita-social-projects · Oct 4, 2023 · 1a341e8 · 1a341e8
1 parent 8bd2e52
commit 1a341e8
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}