From 32bb0a93455c2a224f439fd0763818831b3bbc73 Mon Sep 17 00:00:00 2001 From: whooaami Date: Sat, 28 Oct 2023 19:20:23 +0300 Subject: [PATCH] Create page for email sending --- .../RestorePassword/UI/dotDecor/DotDecor.js | 35 +++++ .../UI/dotDecor/DotDecor.module.css | 25 ++++ .../restorepassword/SendEmailForm.js | 43 ++++++ .../restorepassword/SendEmailForm.module.css | 131 ++++++++++++++++++ .../restorepassword-form/EmailFormContent.js | 102 ++++++++++++++ .../EmailFormContent.module.css | 114 +++++++++++++++ .../pages/SendEmailRestorePassword.module.css | 55 ++++++++ .../pages/SendEmailRestorePasswordPage.js | 25 ++++ 8 files changed, 530 insertions(+) create mode 100644 FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.js create mode 100644 FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.module.css create mode 100644 FrontEnd/src/components/RestorePassword/components/restorepassword/SendEmailForm.js create mode 100644 FrontEnd/src/components/RestorePassword/components/restorepassword/SendEmailForm.module.css create mode 100644 FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.js create mode 100644 FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.module.css create mode 100644 FrontEnd/src/components/RestorePassword/pages/SendEmailRestorePassword.module.css create mode 100644 FrontEnd/src/components/RestorePassword/pages/SendEmailRestorePasswordPage.js diff --git a/FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.js b/FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.js new file mode 100644 index 000000000..6210a1b36 --- /dev/null +++ b/FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.js @@ -0,0 +1,35 @@ +import css from './DotDecor.module.css'; + +const DotRow = () => { + const circle = ( + + + + ); + + const dots = [...Array(7)].map(() => circle); + + return
{dots}
; +}; + +function DotDecorComponent(props) { + const blockPosition = props.position; + return ( +
+ + + + + + +
+ ); +} + +export default DotDecorComponent; diff --git a/FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.module.css b/FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.module.css new file mode 100644 index 000000000..be8ff670d --- /dev/null +++ b/FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.module.css @@ -0,0 +1,25 @@ +.dot-block { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + position: absolute; + z-index: 1; + } + + .dot-block.up-right { + top: 205px; + left: 971px; + } + + .dot-block.down-left { + top: 530px; + left: 358px; + } + + .dot-row { + display: flex; + align-items: flex-start; + gap: 24px; + } + \ No newline at end of file diff --git a/FrontEnd/src/components/RestorePassword/components/restorepassword/SendEmailForm.js b/FrontEnd/src/components/RestorePassword/components/restorepassword/SendEmailForm.js new file mode 100644 index 000000000..e0fd5faa3 --- /dev/null +++ b/FrontEnd/src/components/RestorePassword/components/restorepassword/SendEmailForm.js @@ -0,0 +1,43 @@ +import styles from './SendEmailForm.module.css'; +import { SendEmailRestorePasswordFormContentComponent } from './restorepassword-form/EmailFormContent'; +import { useState } from 'react'; +import { Link } from 'react-router-dom'; + +export function SendEmailRestorePasswordFormComponent() { + const [isValid, setIsValid] = useState(false); + + return ( +
+
+ Забули пароль +
+
+

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

+
+ +
+
+ + Скасувати + + +
+
+
+ ); +} diff --git a/FrontEnd/src/components/RestorePassword/components/restorepassword/SendEmailForm.module.css b/FrontEnd/src/components/RestorePassword/components/restorepassword/SendEmailForm.module.css new file mode 100644 index 000000000..fb3140708 --- /dev/null +++ b/FrontEnd/src/components/RestorePassword/components/restorepassword/SendEmailForm.module.css @@ -0,0 +1,131 @@ +.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); +} diff --git a/FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.js b/FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.js new file mode 100644 index 000000000..0a4990fc0 --- /dev/null +++ b/FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.js @@ -0,0 +1,102 @@ +import { useEffect } from 'react'; +import { useForm } from 'react-hook-form'; +import { useNavigate } from 'react-router-dom'; +import { PropTypes } from 'prop-types'; +import { toast, ToastContainer } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; +import axios from 'axios'; +import styles from './EmailFormContent.module.css'; + +export function SendEmailRestorePasswordFormContentComponent({ setIsValid }) { + 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', + }); + + useEffect(() => { + const formIsValid = isValid; + setIsValid(formIsValid); + }, [isValid, setIsValid]); + + const onSubmit = () => { + const dataToSend = { + email: getValues('email'), + }; + + axios({ + method: 'post', + url: `${process.env.REACT_APP_BASE_API_URL}/api/auth/users/reset_password/`, + withCredentials: false, + data: dataToSend, + }) + .then(() => { + setIsValid(true); + navigate('/reset-password/modal'); + }) + .catch(() => { + toast.error('Activation failed. Please try again.'); + }); + }; + + return ( +
+
+
+
+
+ + +
+
+ +
+
+ {errors.email && errors.email.message} +
+
+
+
+ +
+ ); +} + +SendEmailRestorePasswordFormContentComponent.propTypes = { + setIsValid: PropTypes.func.isRequired, +}; diff --git a/FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.module.css b/FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.module.css new file mode 100644 index 000000000..02fee1e53 --- /dev/null +++ b/FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.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/RestorePassword/pages/SendEmailRestorePassword.module.css b/FrontEnd/src/components/RestorePassword/pages/SendEmailRestorePassword.module.css new file mode 100644 index 000000000..7ef1e4f56 --- /dev/null +++ b/FrontEnd/src/components/RestorePassword/pages/SendEmailRestorePassword.module.css @@ -0,0 +1,55 @@ +.sign-up { + width: 1512px; + border-radius: 8px; + background: var(--wf-base-white, #fff); + } + + .sign-up__body { + display: flex; + align-items: center; + justify-content: space-around; + height: 725px; + background: var(--primary-green-20, #f1fff7); + } + + .container { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 24px; + position: absolute; + z-index: 2; + } + + .sign-in-line { + display: flex; + align-items: flex-start; + gap: 8px; + } + + .sign-in-line__text { + color: #000; + 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; + } + + .sign-in-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; + } + \ No newline at end of file diff --git a/FrontEnd/src/components/RestorePassword/pages/SendEmailRestorePasswordPage.js b/FrontEnd/src/components/RestorePassword/pages/SendEmailRestorePasswordPage.js new file mode 100644 index 000000000..2132cdb2c --- /dev/null +++ b/FrontEnd/src/components/RestorePassword/pages/SendEmailRestorePasswordPage.js @@ -0,0 +1,25 @@ +import styles from './SendEmailRestorePassword.module.css'; +import DotDecorComponent from '../UI/dotDecor/DotDecor'; +import { SendEmailRestorePasswordFormComponent } from '../components/restorepassword/SendEmailForm'; + +export function SendEmailRestorePasswordPage() { + return ( +
+
+ +
+ +
+
+ Вже були на нашому сайті? +
+ + Увійти + +
+
+ +
+
+ ); +}