From 334e316020256af032047394d06768c18822c2f0 Mon Sep 17 00:00:00 2001 From: whooaami Date: Mon, 9 Oct 2023 20:33:37 +0300 Subject: [PATCH] Create modal for email activation --- .../pages/ActivateProfileModal.module.css | 112 ++++++++++++++++++ .../SignUp/pages/ActivateProfilePage.js | 80 +++++++++++++ .../src/components/basicPage/BasicPage.jsx | 2 + forum/settings.py | 2 +- 4 files changed, 195 insertions(+), 1 deletion(-) create mode 100644 FrontEnd/src/components/SignUp/pages/ActivateProfileModal.module.css create mode 100644 FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js diff --git a/FrontEnd/src/components/SignUp/pages/ActivateProfileModal.module.css b/FrontEnd/src/components/SignUp/pages/ActivateProfileModal.module.css new file mode 100644 index 000000000..8c05b1a37 --- /dev/null +++ b/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); +} diff --git a/FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js b/FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js new file mode 100644 index 000000000..f99bd87b0 --- /dev/null +++ b/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 ( +
+ + {modalVisible && ( +
+
+
+
+
+ {activationStatus === "Помилка активації" + ? "Помилка активації" + : "Реєстрація завершена!"} +
+
+ {activationStatus === "Помилка активації" ? ( +

+ Під час активації сталася помилка. + Спробуйте ще раз або зв'яжіться з підтримкою. +

+ ) : ( + + Ви успішно підтвердили вказану електронну адресу. + + )} +
+
+
+ +
+
+
+
+
+ )} + {modalVisible &&
} +
+ ); +} diff --git a/FrontEnd/src/components/basicPage/BasicPage.jsx b/FrontEnd/src/components/basicPage/BasicPage.jsx index bf2995143..22b983dd8 100644 --- a/FrontEnd/src/components/basicPage/BasicPage.jsx +++ b/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() { } /> } /> } /> + } /> } />