From 63c8adccc8497aea45eec34b8130f26e6bfb1d5f Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Sun, 3 Nov 2024 12:25:01 +0100 Subject: [PATCH] component renamed, rout updated --- FrontEnd/src/index.module.css | 2 +- .../pages/Authorization/LoginPage.module.css | 2 +- .../SignUp/ActivateProfileModalPage.jsx | 70 --------------- .../SignUp/SignUp/ActivateProfilePage.jsx | 57 ++++++++++++ ...ule.css => ActivateProfilePage.module.css} | 87 +++++++++++-------- .../SignUp/ResendActivationPage.module.css | 1 + .../SignUp/SignUp/SignUpCompletionPage.jsx | 2 +- .../SignUp/SignUpCompletionPage.module.css | 5 +- FrontEnd/src/routes/ClientRouter.jsx | 4 +- 9 files changed, 118 insertions(+), 112 deletions(-) delete mode 100644 FrontEnd/src/pages/SignUp/SignUp/ActivateProfileModalPage.jsx create mode 100644 FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx rename FrontEnd/src/pages/SignUp/SignUp/{ActivateProfileModalPage.module.css => ActivateProfilePage.module.css} (62%) diff --git a/FrontEnd/src/index.module.css b/FrontEnd/src/index.module.css index 14cb1cba3..34e14b302 100644 --- a/FrontEnd/src/index.module.css +++ b/FrontEnd/src/index.module.css @@ -15,4 +15,4 @@ a { display: flex; scroll-behavior: smooth; font-family: 'Inter', sans-serif; -} \ No newline at end of file +} diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css index fbd983960..2146e1dfe 100644 --- a/FrontEnd/src/pages/Authorization/LoginPage.module.css +++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css @@ -2,7 +2,7 @@ display: flex; justify-content: center; width: 100vw; - min-height: var(--min-height-block-main); + flex-grow: 1; flex-shrink: 0; background: var(--light-seashell-background); padding: 80px 0; diff --git a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfileModalPage.jsx b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfileModalPage.jsx deleted file mode 100644 index c796b0ed2..000000000 --- a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfileModalPage.jsx +++ /dev/null @@ -1,70 +0,0 @@ -import { useState, useEffect } from 'react'; -import axios from 'axios'; -import { useParams } from 'react-router-dom'; -import LoginPage from '../../../pages/Authorization/LoginPage'; -import styles from './ActivateProfileModalPage.module.css'; - -export function ActivateProfileModalPage() { - 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/pages/SignUp/SignUp/ActivateProfilePage.jsx b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx new file mode 100644 index 000000000..39af45841 --- /dev/null +++ b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx @@ -0,0 +1,57 @@ +import { useState, useEffect } from 'react'; +import axios from 'axios'; +import { useParams, Link } from 'react-router-dom'; +import styles from './ActivateProfilePage.module.css'; + +export function ActivateProfilePage() { + const { uid, token } = useParams(); + const [activationStatus, setActivationStatus] = useState(''); + + 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); + } catch (error) { + setActivationStatus('Помилка активації'); + } + }; + + useEffect(() => { + handleActivation(); + }, []); + + return ( +
+
+
+
+ {activationStatus === 'Помилка активації' + ? 'Помилка активації' + : 'Реєстрація завершена!'} +
+
+

+ {activationStatus === 'Помилка активації' + ? 'Під час активації сталася помилка. Спробуйте ще раз або зв\'яжіться з підтримкою.' + : 'Ви успішно підтвердили вказану електронну адресу.'} +

+
+
+
+ + Повернутися до входу + +
+
+
+
+
+ ); +} diff --git a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfileModalPage.module.css b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.module.css similarity index 62% rename from FrontEnd/src/pages/SignUp/SignUp/ActivateProfileModalPage.module.css rename to FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.module.css index c570f5f1a..2431389db 100644 --- a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfileModalPage.module.css +++ b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.module.css @@ -1,31 +1,39 @@ -.modal { - position: absolute; - top: 50%; - left: 50.5%; - float: left; - transform: translate(-50%, -50%); - width: 375px; +.activation-page { + width: 100vw; border-radius: 8px; - z-index: 999; + background: var(--light-seashell-background); + padding: 80px 0; + display: flex; + flex-grow: 1; + justify-content: center; } -.blur-background { - backdrop-filter: blur(3px); - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 997; + +.activation-page__body { + display: flex; + align-self: center; + flex-direction: column; + align-items: center; + max-width: 572px; + min-width: 345px; + gap: 24px; + } -.modal__header { +.activation-page__container { display: flex; - padding: 18px 24px; + width: 375px; + flex-direction: column; align-items: flex-start; - gap: 36px; - align-self: stretch; + border-radius: 6px; background: var(--main-white, #fff); +} + +.activation-page__header { + display: flex; + align-self: stretch; + padding: 16px 24px; + box-shadow: 0px -1px 0px 0px #f0f0f0 inset; color: var(--character-title-85, rgba(0, 0, 0, 0.85)); font-feature-settings: "calt" off; font-family: var(--font-main); @@ -36,18 +44,27 @@ letter-spacing: -0.16px; } -.modal__content { +.activation-page__footer { display: flex; padding: 16px 24px; - justify-content: flex-start; align-items: center; gap: 8px; align-self: stretch; - background: var(--main-white, #fff); box-shadow: 0px 1px 0px 0px #f0f0f0 inset; } -.modal__content--text { +.activation-page__content { + align-self: stretch; + flex-grow: 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + gap: 10px; + padding: 24px; +} + +.activation-page__text { font-family: var(--font-main); font-size: 14px; font-weight: 400; @@ -57,16 +74,6 @@ color: var(--main-text-color); } -.modal__footer { - display: flex; - padding: 16px 24px; - align-items: center; - gap: 8px; - align-self: stretch; - background: var(--main-white, #fff); - box-shadow: 0px 1px 0px 0px #f0f0f0 inset; -} - .button-container { display: flex; align-items: flex-start; @@ -93,7 +100,17 @@ } @media only screen and (min-width: 768px) { - .modal { + .activation-page { + padding: 104px 0; + } + + .activation-page__container { width: 572px; } } + +@media only screen and (min-width: 1512px) { + .activation-page { + padding: 120px 0; + } +} diff --git a/FrontEnd/src/pages/SignUp/SignUp/ResendActivationPage.module.css b/FrontEnd/src/pages/SignUp/SignUp/ResendActivationPage.module.css index 111620786..7cf077eae 100644 --- a/FrontEnd/src/pages/SignUp/SignUp/ResendActivationPage.module.css +++ b/FrontEnd/src/pages/SignUp/SignUp/ResendActivationPage.module.css @@ -4,6 +4,7 @@ background: var(--light-seashell-background); padding: 80px 0; display: flex; + flex-grow: 1; justify-content: center; } diff --git a/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.jsx b/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.jsx index a7653d0e9..bf7a13cb5 100644 --- a/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.jsx +++ b/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.jsx @@ -27,7 +27,7 @@ export function SignUpCompletionPage() { - + ); } diff --git a/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.module.css b/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.module.css index 66caf7d1c..c258ecc21 100644 --- a/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.module.css +++ b/FrontEnd/src/pages/SignUp/SignUp/SignUpCompletionPage.module.css @@ -4,6 +4,7 @@ background: var(--light-seashell-background); padding: 80px 0; display: flex; + flex-grow: 1; justify-content: center; } @@ -128,7 +129,7 @@ } @media only screen and (min-width: 768px) { - .completion-page__body { + .completion-page { padding: 104px 0; } @@ -138,7 +139,7 @@ } @media only screen and (min-width: 1512px) { - .completion-page__body { + .completion-page { padding: 120px 0; } } diff --git a/FrontEnd/src/routes/ClientRouter.jsx b/FrontEnd/src/routes/ClientRouter.jsx index 7a8f29787..40ed8bdbf 100644 --- a/FrontEnd/src/routes/ClientRouter.jsx +++ b/FrontEnd/src/routes/ClientRouter.jsx @@ -19,7 +19,7 @@ import ProfilePage from '../pages/ProfilePage/ProfilePage'; import { SignUpPage } from '../pages/SignUp/SignUp/SignUpPage'; import { SignUpCompletionPage } from '../pages/SignUp/SignUp/SignUpCompletionPage'; import { ResendActivationPage } from '../pages/SignUp/SignUp/ResendActivationPage'; -import { ActivateProfileModalPage } from '../pages/SignUp/SignUp/ActivateProfileModalPage'; +import { ActivateProfilePage } from '../pages/SignUp/SignUp/ActivateProfilePage'; import { SendEmailRestorePasswordPage } from '../pages/RestorePassword/Pages/SendEmailRestorePasswordPage'; import { RestorePasswordPage } from '../pages/RestorePassword/Pages/RestorePasswordPage'; import { RestorePasswordModalPage } from '../pages/RestorePassword/Pages/RestorePasswordModalPage'; @@ -85,7 +85,7 @@ function ClientRouter() { /> } + element={} />