component renamed, rout updated

ita-social-projects · Nov 3, 2024 · 63c8adc · 63c8adc
1 parent cf05e00
commit 63c8adc
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 112 deletions.
diff --git 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;
-}
+}
diff --git 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
diff --git a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx 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 (
+    <div className={styles['activation-page']}>
+      <div  className={styles['activation-page__body']}>
+        <div  className={styles['activation-page__container']}>
+          <div className={styles['activation-page__header']}>
+            {activationStatus === 'Помилка активації'
+              ? 'Помилка активації'
+              : 'Реєстрація завершена!'}
+          </div>
+          <div className={styles['activation-page__content']}>
+            <p className={styles['activation-page__text']}>
+              {activationStatus === 'Помилка активації'
+                ? 'Під час активації сталася помилка. Спробуйте ще раз або зв\'яжіться з підтримкою.'
+                : 'Ви успішно підтвердили вказану електронну адресу.'}
+            </p>
+          </div>
+          <div className={styles['activation-page__footer']}>
+            <div className={styles['button-container']}>
+              <Link className={styles['signup-page__button']} to="/login">
+                Повернутися до входу
+              </Link>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/...ignUp/ActivateProfileModalPage.module.css → ...nUp/SignUp/ActivateProfilePage.module.css b/...ignUp/ActivateProfileModalPage.module.css → ...nUp/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
@@ -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
@@ -27,7 +27,7 @@ export function SignUpCompletionPage() {
             </div>
           </div>
         </div>
-        </div>
+      </div>
     </div>
   );
 }
diff --git 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
@@ -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() {
         />
         <Route
           path="/activate/:uid/:token"
-          element={<ActivateProfileModalPage />}
+          element={<ActivateProfilePage />}
         />
         <Route
           path="/reset-password"