From beac3af56ce2a4512b699ad120c1df8780ae0e3d Mon Sep 17 00:00:00 2001 From: whooaami Date: Wed, 4 Oct 2023 13:42:53 +0300 Subject: [PATCH] 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() { } /> )} } /> + } /> + } /> } />