Create page for email sending

FrontEnd/src/components/RestorePassword/UI/dotDecor/DotDecor.js

@@ -0,0 +1,35 @@
+import css from './DotDecor.module.css';
+
+const DotRow = () => {
+  const circle = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="5"
+      height="5"
+      viewBox="0 0 5 5"
+      fill="none"
+    >
+      <circle cx="2.5" cy="2.5" r="2.5" fill="#1F9A7C" />
+    </svg>
+  );
+
+  const dots = [...Array(7)].map(() => circle);
+
+  return <div className={css['dot-row']}>{dots}</div>;
+};
+
+function DotDecorComponent(props) {
+  const blockPosition = props.position;
+  return (
+    <div className={`${css['dot-block']} ${css[blockPosition]}`}>
+      <DotRow />
+      <DotRow />
+      <DotRow />
+      <DotRow />
+      <DotRow />
+      <DotRow />
+    </div>
+  );
+}
+
+export default DotDecorComponent;

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;
+  }
+

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 (
+    <div className={styles['form__container']}>
+      <div className={styles['form__header']}>
+        Забули пароль
+      </div>
+      <div className={styles['form__footer']}>
+        <p>
+          Введіть електронну адресу вказану при реєстрації для відновлення паролю. <br />
+          На зазначену Вами електронну пошту буде відправлено листа з посиланням
+          для відновлення паролю. <br />
+        </p>
+      </div>
+      <SendEmailRestorePasswordFormContentComponent setIsValid={setIsValid} />
+      <div className={styles['form__footer']}>
+        <div className={styles['button-container']}>
+          <Link className={styles['signup-page__button']} to="/sign-up">
+            Скасувати
+          </Link>
+          <button
+            disabled={!isValid}
+            form="signUpForm"
+            className={
+              isValid
+                ? styles['resend-activation__button']
+                : styles['resend-activation__button__disabled']
+            }
+            type="submit"
+          >
+            Надіслати
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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);
+}

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 (
+    <div className={styles['resend-activation-form']}>
+      <form
+        id="signUpForm"
+        className={styles['resend-activation-form__container']}
+        onSubmit={handleSubmit(onSubmit)}
+        autoComplete="off"
+        noValidate
+      >
+        <div className={styles['resend-activation-form__row']}>
+          <div className={styles['resend-activation-form__column']}>
+            <div className={styles['resend-activation-form__label']}>
+              <label
+                className={styles['resend-activation-form__label--required']}
+              >
+                *
+              </label>
+              <label className={styles['resend-activation-form__label--text']}>
+                Електронна пошта
+              </label>
+            </div>
+            <div className={styles['resend-activation-form__field']}>
+              <input
+                className={styles['resend-activation-form__input']}
+                placeholder="Електронна пошта"
+                type="email"
+                {...register('email', {
+                  required: errorMessageTemplates.required,
+                  pattern: {
+                    value: emailPattern,
+                    message: errorMessageTemplates.email,
+                  },
+                })}
+              />
+            </div>
+            <div className={styles['resend-activation-form__error']}>
+              {errors.email && errors.email.message}
+            </div>
+          </div>
+        </div>
+      </form>
+      <ToastContainer position="top-right" autoClose={3000} />
+    </div>
+  );
+}
+
+SendEmailRestorePasswordFormContentComponent.propTypes = {
+  setIsValid: PropTypes.func.isRequired,
+};