Create a page for resend email activation

ita-social-projects · Oct 4, 2023 · beac3af · beac3af
1 parent 39bd173
commit beac3af
Show file tree

Hide file tree

Showing 7 changed files with 405 additions and 4 deletions.
diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json
diff --git a/FrontEnd/src/components/SignUp/components/signup/ResendActivationForm.js 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 (
+    <div className={styles["form__container"]}>
+      <div className={styles["form__header"]}>Надіслати лист для активації ще раз</div>
+      <div className={styles["form__footer"]}>
+        <p>
+          Введіть електронну адресу вказану при реєстрації для повторного надіслення листа. <br />
+          На зазначену Вами електронну пошту буде відправлено листа з посиланням для активації. <br />
+        </p>
+      </div>
+      <ResendActivationFormContentComponent 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>
+  );
+}
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,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 (
+    <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>
+    </div>
+  );
+}
diff --git a/...rc/components/SignUp/components/signup/signup-form/ResendActivationFormContent.module.css b/...rc/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;
+}