Create modal for email activation

FrontEnd/src/components/SignUp/pages/ActivateProfileModal.module.css

@@ -0,0 +1,112 @@
+.modal {
+  position: absolute; /* or fixed */
+  top: 50%;
+  left: 52%;
+  transform: translate(-50%, -50%);
+  width: 610px;
+  max-width: 90%;
+  border-radius: 8px;
+  background: var(--wf-base-white, #fff);
+  z-index: 999;
+}
+
+.blur-background {
+  backdrop-filter: blur(3px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 997;
+}
+
+.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__content {
+  display: flex;
+  padding: 16px 24px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  background: var(--main-white, #fff);
+
+  /* border & divider/divider ↑ */
+  box-shadow: 0px 1px 0px 0px #f0f0f0 inset;
+}
+
+.modal__footer {
+  display: flex;
+  padding: 16px 24px;
+  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;
+}
+
+.button-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.signup-page__button {
+  display: flex;
+  padding: 5px 15px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid var(--primary-green-80, #1f9a7c);
+  background: var(--main-white, #fff);
+
+  /* drop-shadow/button-secondary */
+  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
+
+  color: var(--primary-green-80, #1f9a7c);
+  text-align: center;
+  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;
+  text-decoration: none;
+
+  cursor: pointer;
+}
+
+.signup-page__button:hover {
+  border: 1px solid var(--primary-green-80, #1f9a7c);
+  background: var(--primary-green-80, #1f9a7c);
+  color: var(--main-white, #fff);
+}

FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { useParams } from "react-router-dom";
+import AuthorizationPage from "../../authorization/AuthorizationPage";
+import styles from "./ActivateProfileModal.module.css";
+
+export function ActivationProfilePage() {
+  const { uid, token } = useParams();
+  const [activationStatus, setActivationStatus] = useState("");
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleActivation = async () => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_BASE_API_URL}/api/auth/users/activation/`,
+        {
+          uid: uid,
+          token: token,
+        }
+      );
+
+      setActivationStatus(response.data.message);
+      setModalVisible(true);
+    } catch (error) {
+      setActivationStatus("Помилка активації");
+      setModalVisible(true);
+    }
+  };
+
+  useEffect(() => {
+    handleActivation();
+  }, []);
+
+  const closeModal = () => {
+    setModalVisible(false);
+  };
+
+  return (
+    <div>
+      <AuthorizationPage />
+      {modalVisible && (
+        <div className={styles["modal"]}>
+          <div className={styles["modal__overlay"]} onClick={closeModal}></div>
+          <div className={styles["modal__body"]}>
+            <div className={styles["container-modal"]}>
+              <div className={styles["modal__header"]}>
+                {activationStatus === "Помилка активації"
+                  ? "Помилка активації"
+                  : "Реєстрація завершена!"}
+              </div>
+              <div className={styles["modal__content"]}>
+                {activationStatus === "Помилка активації" ? (
+                  <p>
+                    Під час активації сталася помилка.
+                    Спробуйте ще раз або зв'яжіться з підтримкою.
+                  </p>
+                ) : (
+                    <a>
+                      Ви успішно підтвердили вказану електронну адресу.
+                    </a>
+                )}
+              </div>
+              <div className={styles["modal__footer"]}>
+                <div className={styles["button-container"]}>
+                  <button
+                    className={styles["signup-page__button"]}
+                    onClick={closeModal}
+                  >
+                    Закрити
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {modalVisible && <div className={styles["blur-background"]}></div>}
+    </div>
+  );
+}

FrontEnd/src/components/basicPage/BasicPage.jsx

@@ -6,6 +6,7 @@ import AuthorizationPage from "../authorization/AuthorizationPage";
 import { SignUpPage } from "../SignUp/pages/SignUpPage";
 import { SignUpModalPage } from "../SignUp/pages/SignUpModalPage";
 import { ResendActivationPage } from "../SignUp/pages/ResendActivationPage";
+import { ActivationProfilePage } from "../SignUp/pages/ActivateProfilePage";
 import PrivacyPolicy from "../PrivacyPolicyPage/privacy/PrivacyPolicyComponent";
 import TermsAndConditions from "../terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent";
 import Footer from "../HeaderFooter/footer/Footer";
@@ -33,6 +34,7 @@ function BasicPage() {
           <Route path="/sign-up" element={<SignUpPage />} />
           <Route path="/sign-up/modal" element={<SignUpModalPage />} />
           <Route path="/sign-up/resend-activation" element={<ResendActivationPage />} />
+          <Route path="/activate/:uid/:token" element={<ActivationProfilePage />} />
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />
           <Route
             path="/terms-and-conditions"

forum/settings.py

@@ -184,7 +184,7 @@
     'PASSWORD_RESET_CONFIRM_URL': '#/password/reset/confirm/{uid}/{token}',
     'PASSWORD_RESET_CONFIRM_RETYPE': True,
     'PASSWORD_RESET_SHOW_EMAIL_NOT_FOUND': True,
-    'ACTIVATION_URL': '#/activate/{uid}/{token}',
+    'ACTIVATION_URL': 'activate/{uid}/{token}',
     'SEND_ACTIVATION_EMAIL': True,
     'HIDE_USERS': False,
     'LOGIN_FIELD': 'email',