#284 fe restore password

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/RestorePasswordForm.js

@@ -0,0 +1,33 @@
+import styles from './RestorePasswordForm.module.css';
+import { RestorePasswordFormContentComponent } from './restorepassword-form/RestorePasswordFormContent';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+
+export function RestorePasswordFormComponent() {
+  const [isValid, setIsValid] = useState(false);
+  const updateIsValid = (value) => {
+    setIsValid(value);
+  };
+  return (
+    <div className={styles['form__container']}>
+      <div className={styles['form__header']}>Відновлення паролю</div>
+      <RestorePasswordFormContentComponent setIsValid={updateIsValid}/>
+      <div className={styles['form__footer']}>
+        <div className={styles['button-container']}>
+          <Link className={styles['main-page__button']} to="/">
+            Головна
+          </Link>
+          <button
+            disabled={!isValid}
+            form="resetPasswordForm"
+            className={isValid ? styles['sign-up__button'] : styles['sign-up__button__disabled']}
+            type="submit"
+          >
+            Зберегти
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

FrontEnd/src/components/RestorePassword/components/restorepassword/RestorePasswordForm.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: 10px 16px;
+  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;
+}
+
+.main-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;
+}
+
+.main-page__button:hover {
+  border: 1px solid var(--primary-green-80, #1f9a7c);
+  background: var(--primary-green-80, #1f9a7c);
+  color: var(--main-white, #fff);
+}
+
+.sign-up__button,
+.sign-up__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;
+}
+
+.sign-up__button__disabled {
+  opacity: 50%;
+  cursor: default;
+}
+
+.sign-up__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/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['login-page__button']} to="/login">
+            Скасувати
+          </Link>
+          <button
+            disabled={!isValid}
+            form="signUpForm"
+            className={
+              isValid
+                ? styles['send-email__button']
+                : styles['send-email__button__disabled']
+            }
+            type="submit"
+          >
+            Надіслати
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}