Merge pull request #262 from ita-social-projects/#216-AddModalWindowE…

…mailVarify #216 add modal window email varify
ita-social-projects · Oct 28, 2023 · 801fd0a · 801fd0a
2 parents dd8e69f + 818afe8
commit 801fd0a
Show file tree

Hide file tree

Showing 14 changed files with 786 additions and 5 deletions.
diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
@@ -20,6 +20,7 @@
     "react-router-dom": "^6.4.1",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "swr": "^2.2.2",
     "validator": "^13.11.0",
     "web-vitals": "^2.1.4"

diff --git a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js b/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js
@@ -0,0 +1,47 @@
+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 updateIsValid = (value) => {
+    setIsValid(value);
+  };
+  return (
+    <div className={styles['form__container']}>
+      <div className={styles['form__header']}>
+        Надіслати лист для активації ще раз
+      </div>
+      <div className={styles['form__footer']}>
+        <p>
+          Введіть електронну адресу вказану при реєстрації для повторного
+          надіслення листа. <br />
+          На зазначену Вами електронну пошту буде відправлено листа з посиланням
+          для активації. <br />
+        </p>
+      </div>
+      <ResendActivationFormContentComponent setIsValid={updateIsValid} />
+      <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>
+  );
+}
diff --git a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.module.css 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);
+}
+
diff --git a/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.js b/FrontEnd/src/components/SignUp/components/signup/signup-form/ResendActivationFormContent.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 './ResendActivationFormContent.module.css';
+
+export function ResendActivationFormContentComponent({ 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/resend_activation/`,
+      withCredentials: false,
+      data: dataToSend,
+    })
+      .then(() => {
+        setIsValid(true);
+        navigate('/login');
+      })
+      .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>
+  );
+}
+
+ResendActivationFormContentComponent.propTypes = {
+  setIsValid: PropTypes.func.isRequired,
+};