#436 [Reset Password] Fix UI defects

FrontEnd/src/components/HeaderFooter/footer/short/ShortFooter.jsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import css from './ShortFooter.module.css';
 
 const LINKS = [
@@ -34,7 +35,7 @@ function ShortFooter() {
                     <div className={css['footer-info__text']}>Copyright 2022 Company name.</div>
                     <div className={css['footer-links']}>
                         {LINKS.map( (element) => (
-                            <a className={css['footer-link__text']} key={element.id} href={element.link}>{element.title}</a>
+                            <Link className={css['footer-link__text']} key={element.id} to={element.link}>{element.title}</Link>
                         ))}
                     </div>
                 </div>

FrontEnd/src/components/PrivacyPolicyPage/UI/footer/Footer.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import css from './Footer.module.css';
 import logo from './logo.svg';
 
@@ -35,7 +36,7 @@ function Footer() {
                 <div className={css['footer-info__text']}>Copyright 2022 Company name.</div>
                 <div className={css['footer-links']}>
                     {LINKS.map( (element) => (
-                        <a className={css['footer-link__text']} key={element.id} href={element.link}>{element.title}</a>
+                        <Link className={css['footer-link__text']} key={element.id} to={element.link}>{element.title}</Link>
                     ))}
                 </div>
             </div>

FrontEnd/src/components/PrivacyPolicyPage/UI/header/Menu.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import css from './Menu.module.css';
 
 const MENU = [
@@ -28,9 +29,9 @@ function Menu() {
         <div className={css['header-menu-section']}>
             {MENU.map((element) => (
                 <div key={element.id} className={css['header-menu-element']}>
-                    <a className={css['header-menu-element__text']} key={element.id} href={element.link}>
+                    <Link className={css['header-menu-element__text']} key={element.id} to={element.link}>
                         {element.title}
-                    </a>
+                    </Link>
                 </div>
             ))}
         </div>

FrontEnd/src/components/PrivacyPolicyPage/UI/header/Profile.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import css from './Profile.module.css';
 import avatar_image from './Avatar.png';
 
@@ -6,7 +7,7 @@ function Profile() {
         <div className={css['header-profile-section']}>
             <img className={css['header-profile__avatar']} src={avatar_image} alt=""/>
             <div className={css['header-profile-tab']}>
-                <a href="profile">Профіль</a>
+                <Link to="profile">Профіль</Link>
             </div>
         </div>
     );

FrontEnd/src/components/ProfileDetail/DetailedInfo/DataContacts.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { PropTypes } from 'prop-types';
 import PhoneEmail from './PhoneEmail';
 import classes from './DataContacts.module.css';
@@ -62,9 +63,9 @@ function DataContacts ({ data }) {
                   {value.map((contact, index) => {
                     if (contact.url) {
                       return (
-                        <a key={index} href={contact.url}>
+                        <Link key={index} to={contact.url}>
                           {contact.svgPath}
-                        </a>
+                        </Link>
                       );
                     }
                   return null;

FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.js

@@ -13,7 +13,7 @@ export function SendEmailRestorePasswordFormContentComponent({ setIsValid }) {
 
   const errorMessageTemplates = {
     required: 'Обов’язкове поле',
-    email: 'Email не відповідає вимогам',
+    email: 'Формат електронної адреси некоректний',
   };
 
   const {
@@ -46,7 +46,7 @@ export function SendEmailRestorePasswordFormContentComponent({ setIsValid }) {
         navigate('/reset-password/modal');
       })
       .catch(() => {
-        toast.error('Формат електронної пошти некоректний.');
+        toast.error('Зазначена електронна адреса не зареєстрована.');
       });
   };
 
@@ -62,9 +62,6 @@ export function SendEmailRestorePasswordFormContentComponent({ setIsValid }) {
         <div className={styles['send-email-form__row']}>
           <div className={styles['send-email-form__column']}>
             <div className={styles['send-email-form__label']}>
-              <label className={styles['send-email-form__label--required']}>
-                *
-              </label>
               <label className={styles['send-email-form__label--text']}>
                 Електронна пошта
               </label>

FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/EmailFormContent.module.css

@@ -6,29 +6,28 @@
     gap: 10px;
     align-self: stretch;
 }
-  
+
 .send-email-form__container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
 }
-  
+
 .send-email-form__row {
     display: flex;
     align-items: flex-start;
     gap: 8px;
 }
-  
+
 .send-email-form__column {
     display: flex;
-    width: 257px;
     height: 84px;
     padding-bottom: 0px;
     flex-direction: column;
     align-items: flex-start;
 }
-  
+
 .send-email-form__label {
     display: flex;
     gap: 4px;
@@ -37,33 +36,22 @@
     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% */
+    line-height: 20px;
     letter-spacing: -0.14px;
     text-align: left;
 }
-
-.send-email-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;
-}
-
+
 .send-email-form__label--text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     flex: 1 0 0;
 }
-  
+
 .send-email-form__field {
     display: flex;
     width: 520px;
@@ -72,7 +60,7 @@
     border-radius: 2px;
     background: var(--main-white, #fff);
 }
-  
+
 .send-email-form__input {
     display: flex;
     height: 22px;
@@ -85,30 +73,27 @@
     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;
 }
-  
+
 .send-email-form__input:focus {
     outline: none;
 }
-  
+
 .send-email-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;
-}
+}

FrontEnd/src/components/RestorePassword/components/restorepassword/restorepassword-form/RestorePasswordFormContent.js

@@ -34,7 +34,7 @@ export function RestorePasswordFormContentComponent({ setIsValid }) {
     handleSubmit,
     getValues,
     formState: { errors, isValid },
-  } = useForm();
+  } = useForm({mode: 'all'});
 
   useEffect(() => {
     const formIsValid = isValid;
@@ -123,7 +123,7 @@ export function RestorePasswordFormContentComponent({ setIsValid }) {
                 </label>
                 <div className={styles['reset-password-form__label--password']}>
                   <label className={styles['reset-password-form__label--text']}>
-                    Повторіть пароль
+                    Повторіть новий пароль
                   </label>
                 </div>
               </div>

FrontEnd/src/components/RestorePassword/pages/RestorePasswordPage.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import styles from './RestorePasswordPage.module.css';
 import DotDecorComponent from '../UI/dotDecor/DotDecor';
 import { RestorePasswordFormComponent } from '../components/restorepassword/RestorePasswordForm';
@@ -13,9 +14,9 @@ export function RestorePasswordPage() {
             <div className={styles['sign-in-line__text']}>
               Вже були на нашому сайті?
             </div>
-            <a href="/login" className={styles['sign-in-line__link']}>
+            <Link to="/login" className={styles['sign-in-line__link']}>
               Увійти
-            </a>
+            </Link>
           </div>
         </div>
         <DotDecorComponent position={'down-left'} />

FrontEnd/src/components/RestorePassword/pages/SendEmailRestorePasswordPage.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import styles from './SendEmailRestorePassword.module.css';
 import DotDecorComponent from '../UI/dotDecor/DotDecor';
 import { SendEmailRestorePasswordFormComponent } from '../components/restorepassword/SendEmailForm';
@@ -13,9 +14,9 @@ export function SendEmailRestorePasswordPage() {
             <div className={styles['sign-in-line__text']}>
               Вже були на нашому сайті?
             </div>
-            <a href="/login" className={styles['sign-in-line__link']}>
+            <Link to="/login" className={styles['sign-in-line__link']}>
               Увійти
-            </a>
+            </Link>
           </div>
         </div>
         <DotDecorComponent position={'down-left'} />

FrontEnd/src/components/SignUp/pages/ResendActivationPage.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import styles from './SignUpPage.module.css';
 import DotDecorComponent from '../UI/dotDecor/DotDecor';
 import { ResendActivationFormComponent } from '../components/signup/ResendActivationForm';
@@ -13,9 +14,9 @@ export function ResendActivationPage() {
             <div className={styles['sign-in-line__text']}>
               Вже були на нашому сайті?
             </div>
-            <a href="/login" className={styles['sign-in-line__link']}>
+            <Link to="/login" className={styles['sign-in-line__link']}>
               Увійти
-            </a>
+            </Link>
           </div>
         </div>
         <DotDecorComponent position={'down-left'} />

FrontEnd/src/components/SignUp/pages/SignUpModalPage.js

@@ -15,9 +15,9 @@ export function SignUpModalPage() {
                   Будь ласка перейдіть за посиланням з листа для підтвердження вказаної електронної адреси. <br />
                   На цьому реєстрацію завершено. <br />
                   <div className={styles['resend-line']}>
-                    <a href="/sign-up/resend-activation" className={styles['resend-line__link']}>
+                    <Link to="/sign-up/resend-activation" className={styles['resend-line__link']}>
                       Не отримали лист?
-                    </a>
+                    </Link>
                   </div>
                 </p>
             </div>

FrontEnd/src/components/SignUp/pages/SignUpPage.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import styles from './SignUpPage.module.css';
 import DotDecorComponent from '../UI/dotDecor/DotDecor';
 import { SignUpFormComponent } from '../components/signup/SignUpForm';
@@ -13,9 +14,9 @@ export function SignUpPage() {
             <div className={styles['sign-in-line__text']}>
               Вже були на нашому сайті?
             </div>
-            <a href="/login" className={styles['sign-in-line__link']}>
+            <Link to="/login" className={styles['sign-in-line__link']}>
               Увійти
-            </a>
+            </Link>
           </div>
         </div>
         <DotDecorComponent position={'down-left'} />

FrontEnd/src/components/authorization/LoginPage.jsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import { useState, useEffect } from 'react';
-import { useNavigate  } from 'react-router-dom';
+import { useNavigate, Link  } from 'react-router-dom';
 import axios from 'axios';
 import validator from 'validator';
 import EyeVisible from './EyeVisible';
@@ -150,20 +150,20 @@ const LoginContent = (props) => {
                     {errors.unspecifiedError && errors.unspecifiedError.message}
               </span>
             </div>
-            <a href="/reset-password" className={classes['forget-password']}>Забули пароль?</a>
+            <Link to="/reset-password" className={classes['forget-password']}>Забули пароль?</Link>
           </div>
 
         </div>
         <div className={classes['login-footer']}>
           <div className={classes['login-footer-buttons']}>
-          <a href="/">
+            <Link to="/">
               <button
                 type="button"
                 className={classes['login-footer-buttons__main']}
               >
                 Головна
               </button>
-            </a>
+            </Link>
             <button
               disabled={!isValid}
               type="submit"

FrontEnd/src/components/authorization/SignUpInvitation.jsx

@@ -1,10 +1,11 @@
+import { Link } from 'react-router-dom';
 import classes from './SignUpInvitation.module.css';
 
 const SignUpInvitation = () => {
     return (
         <div className={classes['signup-invitation']}>
             <p>Вперше на нашому сайті?</p>
-            <a href="/sign-up">Зареєструйтесь</a>
+            <Link to="/sign-up">Зареєструйтесь</Link>
         </div>
     );
 };

FrontEnd/src/components/errorPages/ErrorPage404.jsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import css from './ErrorPage404.module.css';
 import { Button } from 'antd';
 
@@ -15,7 +16,7 @@ export default function ErrorPage404() {
             </p>
           </div>
           <Button>
-            <a className={css['button-text']} href="/">Повернутися на Головну</a>
+            <Link className={css['button-text']} to="/">Повернутися на Головну</Link>
           </Button>
         </div>
       </div>

FrontEnd/src/context/AuthContextProvider.js

@@ -60,12 +60,6 @@ export function AuthProvider ({ children }) {
       }
     );
 
-    if (authToken) {
-      login(authToken);
-    } else {
-      logout();
-    }
-
     setLoading(false);
   }, []);