From 1a341e8638aa9df284be7dc6fe71e0cc0c8cdc78 Mon Sep 17 00:00:00 2001 From: whooaami Date: Wed, 4 Oct 2023 12:15:07 +0300 Subject: [PATCH 01/11] Create a page with info about sending email activation --- FrontEnd/package.json | 2 +- .../signup/signup-form/SignUpFormContent.js | 5 +- .../SignUp/pages/SignUpModalPage.js | 28 +++++++ .../SignUp/pages/SignUpModalPage.module.css | 73 +++++++++++++++++++ 4 files changed, 106 insertions(+), 2 deletions(-) create mode 100644 FrontEnd/src/components/SignUp/pages/SignUpModalPage.js create mode 100644 FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css diff --git a/FrontEnd/package.json b/FrontEnd/package.json index 99b235d83..07edb2ed9 100644 --- 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 index 994a0d3b8..43da3b7ee 100644 --- 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 (
diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js new file mode 100644 index 000000000..639d67f4a --- /dev/null +++ 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 ( +
+
+ +
+
Реєстрація майже завершена
+
+

+ На зазначену Вами електронну пошту відправлено листа.
+ Будь ласка перейдіть за посиланням з листа для підтвердження вказаної електронної адреси.
+ На цьому реєстрацію завершено.
+

+

+
+
+ +
+
+ ); +} diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css new file mode 100644 index 000000000..aca4be8ca --- /dev/null +++ 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; +} From 39bd17332950a59b9d23866235e5540daa945186 Mon Sep 17 00:00:00 2001 From: whooaami Date: Wed, 4 Oct 2023 12:46:12 +0300 Subject: [PATCH 02/11] Fix style for email activation page --- .../src/components/SignUp/pages/SignUpModalPage.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css index aca4be8ca..8bda8d301 100644 --- a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css +++ b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css @@ -13,7 +13,7 @@ } .container-modal { - width: 600px; + width: 610px; height: 225px; position: absolute; z-index: 2; @@ -44,7 +44,7 @@ .modal__footer { display: flex; - padding: 16px 16px; + padding: 16px 24px; justify-content: flex-end; align-items: center; gap: 8px; From beac3af56ce2a4512b699ad120c1df8780ae0e3d Mon Sep 17 00:00:00 2001 From: whooaami Date: Wed, 4 Oct 2023 13:42:53 +0300 Subject: [PATCH 03/11] Create a page for resend email activation --- FrontEnd/package-lock.json | 8 +- .../components/signup/ResendActivationForm.js | 36 +++++ .../signup/ResendActivationForm.module.css | 132 ++++++++++++++++++ .../ResendActivationFormContent.js | 90 ++++++++++++ .../ResendActivationFormContent.module.css | 114 +++++++++++++++ .../SignUp/pages/ResendActivationPage.js | 25 ++++ .../src/components/basicPage/BasicPage.jsx | 4 + 7 files changed, 405 insertions(+), 4 deletions(-) create mode 100644 FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js create mode 100644 FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.module.css create mode 100644 FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js create mode 100644 FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.module.css create mode 100644 FrontEnd/src/components/SignUp/pages/ResendActivationPage.js diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json index c854d9348..a94e2c885 100644 --- a/FrontEnd/package-lock.json +++ b/FrontEnd/package-lock.json @@ -14,7 +14,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", @@ -5544,9 +5544,9 @@ } }, "node_modules/axios": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz", - "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz", + "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==", "dependencies": { "follow-redirects": "^1.15.0", "form-data": "^4.0.0", diff --git a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js new file mode 100644 index 000000000..aa5c27c92 --- /dev/null +++ b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js @@ -0,0 +1,36 @@ +import styles from "./ResendActivationForm.module.css"; +import { ResendActivationFormContentComponent } from "./signup-form/ResendActivationFormContent"; +import { useState } from "react"; +import { Link } from "react-router-dom" + + +export function ResendActivationFormComponent() { + const [isValid, setIsValid] = useState(false) + return ( +
+
Надіслати лист для активації ще раз
+
+

+ Введіть електронну адресу вказану при реєстрації для повторного надіслення листа.
+ На зазначену Вами електронну пошту буде відправлено листа з посиланням для активації.
+

+
+ +
+
+ + Скасувати + + +
+
+
+ ); +} diff --git a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.module.css b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.module.css new file mode 100644 index 000000000..23e1acd2a --- /dev/null +++ b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.module.css @@ -0,0 +1,132 @@ +.form__container { + display: flex; + width: 572px; + flex-direction: column; + align-items: flex-start; + + border-radius: 2px; + background: var(--conditional-pop-over, #fff); + + /* drop-shadow/0.12+0.8+0.5 */ + box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), + 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12); +} + +.form__header { + display: flex; + padding: 16px 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; +} + +.form__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); +} + +.resend-activation__button, +.resend-activation__button__disabled { + 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(--primary-green-80, #1f9a7c); + + /* drop-shadow/button-primary */ + box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04); + color: var(--main-white, #fff); + 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; + + cursor: pointer; +} + +.resend-activation__button__disabled { + opacity: 50%; + cursor: default; +} + +.resend-activation__button:hover { + border: 1px solid var(--primary-green-80, #1f9a7c); + background: var(--main-white, #fff); + color: var(--primary-green-80, #1f9a7c); +} + \ No newline at end of file diff --git a/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js b/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js new file mode 100644 index 000000000..52b89e596 --- /dev/null +++ b/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js @@ -0,0 +1,90 @@ +import { useEffect } from "react"; +import { useForm } from "react-hook-form"; +import { useNavigate } from 'react-router-dom'; + +import axios from "axios"; +import styles from "./ResendActivationFormContent.module.css"; + +export function ResendActivationFormContentComponent(props) { + const navigate = useNavigate(); + + const errorMessageTemplates = { + required: "Обов’язкове поле", + email: "Email не відповідає вимогам", + }; + + const emailPattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i; + + const { + register, + handleSubmit, + getValues, + formState: { errors, isValid }, + } = useForm({ + mode: "all", + }); + + const { setIsValid } = props; + + useEffect(() => { + const formIsValid = isValid; + setIsValid(formIsValid); + }, [isValid, setIsValid]); + + const onSubmit = (event) => { + const dataToSend = { + email: getValues("email"), + }; + + axios({ + method: 'post', + url: `${process.env.REACT_APP_BASE_API_URL}/api/auth/users/resend_activation/`, + withCredentials: false, + data: dataToSend + }).then(res => console.log(res.data)).catch(error => console.log(error)) + console.log(process.env.REACT_APP_BASE_API_URL) + navigate("/login"); + }; + + return ( +
+
+
+
+
+ + +
+
+ +
+
+ {errors.email && errors.email.message} +
+
+
+
+
+ ); +} diff --git a/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.module.css b/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.module.css new file mode 100644 index 000000000..02fee1e53 --- /dev/null +++ b/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.module.css @@ -0,0 +1,114 @@ +.resend-activation-form { + display: flex; + padding: 24px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; +} + +.resend-activation-form__container { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; +} + +.resend-activation-form__row { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.resend-activation-form__column { + display: flex; + width: 257px; + height: 84px; + padding-bottom: 0px; + flex-direction: column; + align-items: flex-start; +} + +.resend-activation-form__label { + display: flex; + gap: 4px; + align-self: stretch; + + color: var(--main-black-90, #292e32); + 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; /* 142.857% */ + letter-spacing: -0.14px; + text-align: left; +} + +.resend-activation-form__label--required { + color: var(--dust-red-5, #ff4d4f); + text-align: right; + font-family: SimSong; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22.001px; +} + +.resend-activation-form__label--text { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1 0 0; +} + +.resend-activation-form__field { + display: flex; + width: 520px; + align-items: center; + align-self: stretch; + border-radius: 2px; + background: var(--main-white, #fff); +} + +.resend-activation-form__input { + display: flex; + height: 22px; + padding: 5px 12px; + align-items: center; + gap: 4px; + flex: 1 0 0; + border-radius: 2px; + border: 1px solid var(--neutral-5, #d9d9d9); + background: var(--main-white, #fff); + color: var(--character-title-85, rgba(0, 0, 0, 0.85)); + + /* Body/regular */ + font-family: Roboto, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; +} + +.resend-activation-form__input:focus { + outline: none; +} + +.resend-activation-form__error { + display: flex; + padding: 1px 0px; + align-items: flex-start; + gap: 10px; + align-self: stretch; + color: var(--red-red-100, #f34444); + + /* Body/regular */ + font-family: Roboto, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; +} diff --git a/FrontEnd/src/components/SignUp/pages/ResendActivationPage.js b/FrontEnd/src/components/SignUp/pages/ResendActivationPage.js new file mode 100644 index 000000000..7ed35b640 --- /dev/null +++ b/FrontEnd/src/components/SignUp/pages/ResendActivationPage.js @@ -0,0 +1,25 @@ +import styles from "./SignUpPage.module.css"; +import DotDecorComponent from "../UI/dotDecor/DotDecor"; +import { ResendActivationFormComponent } from "../components/signup/ResendActivationForm"; + +export function ResendActivationPage() { + return ( +
+
+ +
+ +
+
+ Вже були на нашому сайті? +
+ + Увійти + +
+
+ +
+
+ ); +} diff --git a/FrontEnd/src/components/basicPage/BasicPage.jsx b/FrontEnd/src/components/basicPage/BasicPage.jsx index 6f0d553bb..bf2995143 100644 --- a/FrontEnd/src/components/basicPage/BasicPage.jsx +++ b/FrontEnd/src/components/basicPage/BasicPage.jsx @@ -4,6 +4,8 @@ import MainPage from "../landing-page/MainPage"; import ProfilePage from "../ProfilePage/ProfilePage"; import AuthorizationPage from "../authorization/AuthorizationPage"; import { SignUpPage } from "../SignUp/pages/SignUpPage"; +import { SignUpModalPage } from "../SignUp/pages/SignUpModalPage"; +import { ResendActivationPage } from "../SignUp/pages/ResendActivationPage"; import PrivacyPolicy from "../PrivacyPolicyPage/privacy/PrivacyPolicyComponent"; import TermsAndConditions from "../terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent"; import Footer from "../HeaderFooter/footer/Footer"; @@ -29,6 +31,8 @@ function BasicPage() { } /> )} } /> + } /> + } /> } /> Date: Wed, 4 Oct 2023 15:11:59 +0300 Subject: [PATCH 04/11] Add button cancel for modal page --- .../SignUp/pages/SignUpModalPage.js | 8 ++++ .../SignUp/pages/SignUpModalPage.module.css | 44 ++++++++++++++++++- 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js index 639d67f4a..2765690c1 100644 --- a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js +++ b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js @@ -1,3 +1,4 @@ +import { Link } from "react-router-dom" import styles from "./SignUpModalPage.module.css"; import DotDecorComponent from "../UI/dotDecor/DotDecor"; @@ -20,6 +21,13 @@ export function SignUpModalPage() {

+
+
+ + Закрити + +
+
diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css index 8bda8d301..0809e9e85 100644 --- a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css +++ b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css @@ -14,7 +14,7 @@ .container-modal { width: 610px; - height: 225px; + height: 290px; position: absolute; z-index: 2; } @@ -71,3 +71,45 @@ line-height: 20px; letter-spacing: -0.14px; } + +.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); +} From 334e316020256af032047394d06768c18822c2f0 Mon Sep 17 00:00:00 2001 From: whooaami Date: Mon, 9 Oct 2023 20:33:37 +0300 Subject: [PATCH 05/11] 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() { } /> } /> } /> + } /> } /> Date: Wed, 11 Oct 2023 13:46:23 +0300 Subject: [PATCH 06/11] Fix by linter --- .../components/signup/ResendActivationForm.js | 24 +++++----- .../ResendActivationFormContent.js | 44 +++++++++---------- .../signup/signup-form/SignUpFormContent.js | 2 +- .../SignUp/pages/ActivateProfilePage.js | 42 +++++++++--------- .../SignUp/pages/ResendActivationPage.js | 20 ++++----- .../SignUp/pages/SignUpModalPage.js | 30 ++++++------- .../src/components/basicPage/BasicPage.jsx | 6 +-- 7 files changed, 84 insertions(+), 84 deletions(-) diff --git a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js index aa5c27c92..fa360f1c0 100644 --- a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js +++ b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js @@ -1,30 +1,30 @@ -import styles from "./ResendActivationForm.module.css"; -import { ResendActivationFormContentComponent } from "./signup-form/ResendActivationFormContent"; -import { useState } from "react"; -import { Link } from "react-router-dom" +import styles from './ResendActivationForm.module.css'; +import { ResendActivationFormContentComponent } from './signup-form/ResendActivationFormContent'; +import { useState } from 'react'; +import { Link } from 'react-router-dom'; export function ResendActivationFormComponent() { - const [isValid, setIsValid] = useState(false) + const [isValid, setIsValid] = useState(false); return ( -
-
Надіслати лист для активації ще раз
-
+
+
Надіслати лист для активації ще раз
+

Введіть електронну адресу вказану при реєстрації для повторного надіслення листа.
На зазначену Вами електронну пошту буде відправлено листа з посиланням для активації.

-
-
- +
+
+ Скасувати
)} - {modalVisible &&
} + {modalVisible &&
}
); } diff --git a/FrontEnd/src/components/SignUp/pages/ResendActivationPage.js b/FrontEnd/src/components/SignUp/pages/ResendActivationPage.js index 7ed35b640..61caee12b 100644 --- a/FrontEnd/src/components/SignUp/pages/ResendActivationPage.js +++ b/FrontEnd/src/components/SignUp/pages/ResendActivationPage.js @@ -1,24 +1,24 @@ -import styles from "./SignUpPage.module.css"; -import DotDecorComponent from "../UI/dotDecor/DotDecor"; -import { ResendActivationFormComponent } from "../components/signup/ResendActivationForm"; +import styles from './SignUpPage.module.css'; +import DotDecorComponent from '../UI/dotDecor/DotDecor'; +import { ResendActivationFormComponent } from '../components/signup/ResendActivationForm'; export function ResendActivationPage() { return ( -
-
- +
+
+
-
-
+
+
Вже були на нашому сайті?
- + Увійти
- +
); diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js index 2765690c1..1c335c07d 100644 --- a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js +++ b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js @@ -1,35 +1,35 @@ -import { Link } from "react-router-dom" -import styles from "./SignUpModalPage.module.css"; -import DotDecorComponent from "../UI/dotDecor/DotDecor"; +import { Link } from 'react-router-dom'; +import styles from './SignUpModalPage.module.css'; +import DotDecorComponent from '../UI/dotDecor/DotDecor'; export function SignUpModalPage() { return ( -
-
- -
-
Реєстрація майже завершена
-
+
+
+ +
+
Реєстрація майже завершена
+

На зазначену Вами електронну пошту відправлено листа.
Будь ласка перейдіть за посиланням з листа для підтвердження вказаної електронної адреси.
На цьому реєстрацію завершено.
-

-
-
- +
+
+ Закрити
- +
); diff --git a/FrontEnd/src/components/basicPage/BasicPage.jsx b/FrontEnd/src/components/basicPage/BasicPage.jsx index e6fb9c676..4269a97cb 100644 --- a/FrontEnd/src/components/basicPage/BasicPage.jsx +++ b/FrontEnd/src/components/basicPage/BasicPage.jsx @@ -11,9 +11,9 @@ import PrivacyPolicy from '../PrivacyPolicyPage/privacy/PrivacyPolicyComponent'; import ProfileListPage from '../profileList/ProfileListPage'; import ProfilePage from '../ProfilePage/ProfilePage'; 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 { SignUpModalPage } from '../SignUp/pages/SignUpModalPage'; +import { ResendActivationPage } from '../SignUp/pages/ResendActivationPage'; +import { ActivationProfilePage } from '../SignUp/pages/ActivateProfilePage'; import ScrollToTopButton from '../PrivacyPolicyPage/privacy/ScrollToTopButton'; import TermsAndConditions from '../terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent'; import { useAuth } from '../../hooks'; From 0c48092dd89e4850d789ce3d8160b64b8ce8b43f Mon Sep 17 00:00:00 2001 From: whooaami Date: Wed, 11 Oct 2023 13:59:03 +0300 Subject: [PATCH 07/11] Fix by linter --- forum/settings.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/forum/settings.py b/forum/settings.py index c94b8f9e3..acd7b2abc 100644 --- a/forum/settings.py +++ b/forum/settings.py @@ -185,7 +185,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", From 5e17301b4b96f8ee05fc8626b16e0619394b5625 Mon Sep 17 00:00:00 2001 From: whooaami Date: Wed, 11 Oct 2023 14:16:39 +0300 Subject: [PATCH 08/11] Fix --- .../signup/signup-form/ResendActivationFormContent.js | 2 +- FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js b/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js index 59f219ac9..729626cda 100644 --- a/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js +++ b/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js @@ -31,7 +31,7 @@ export function ResendActivationFormContentComponent(props) { setIsValid(formIsValid); }, [isValid, setIsValid]); - const onSubmit = (event) => { + const onSubmit = () => { const dataToSend = { email: getValues('email'), }; diff --git a/FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js b/FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js index e2190d102..5a4aa39fe 100644 --- a/FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js +++ b/FrontEnd/src/components/SignUp/pages/ActivateProfilePage.js @@ -52,7 +52,7 @@ export function ActivationProfilePage() { {activationStatus === 'Помилка активації' ? (

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

) : ( From c991cc2ee329748ae650f978cfcf61dd9c0851e4 Mon Sep 17 00:00:00 2001 From: whooaami Date: Wed, 18 Oct 2023 21:03:31 +0300 Subject: [PATCH 09/11] Fixed --- .../components/signup/ResendActivationForm.js | 23 ++++++++++++++----- .../ResendActivationFormContent.js | 21 +++++++++-------- .../pages/ActivateProfileModal.module.css | 14 +---------- 3 files changed, 30 insertions(+), 28 deletions(-) diff --git a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js index fa360f1c0..4aec832a8 100644 --- a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js +++ b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js @@ -3,19 +3,26 @@ import { ResendActivationFormContentComponent } from './signup-form/ResendActiva import { useState } from 'react'; import { Link } from 'react-router-dom'; - export function ResendActivationFormComponent() { const [isValid, setIsValid] = useState(false); + + const updateIsValid = (value) => { + setIsValid(value); + }; return (
-
Надіслати лист для активації ще раз
+
+ Надіслати лист для активації ще раз +

- Введіть електронну адресу вказану при реєстрації для повторного надіслення листа.
- На зазначену Вами електронну пошту буде відправлено листа з посиланням для активації.
+ Введіть електронну адресу вказану при реєстрації для повторного + надіслення листа.
+ На зазначену Вами електронну пошту буде відправлено листа з посиланням + для активації.

- +
@@ -24,7 +31,11 @@ export function ResendActivationFormComponent() {