Merge pull request #705 from ita-social-projects/#704-AuthorizationRe…

…placeErrorComponentWithToastMessages

#704 [Authorization] Replace error component with toast messages

FrontEnd/src/components/authorization/AuthorizationPage.jsx

@@ -1,18 +1,14 @@
-import { useState } from 'react';
 import Login from '../authorization/Login';
-import AlertMessage from '../authorization/AlertMessage';
 import classes from './AuthorizationPage.module.css';
 import dots_decor from './dots_decor.svg';
 
 const AuthorizationPage = () => {
-  const [errorText, setErrorText] = useState('');
 
   return (
     <div className={classes['auth-page']}>
-      {errorText && <AlertMessage errorMessage={errorText} setErrorMessage={setErrorText} />}
       <img className={classes['frame-img-left']} src={dots_decor} alt="frame" />
       <img className={classes['frame-img-right']} src={dots_decor} alt="frame" />
-      <Login setErrorMessage={setErrorText} />
+      <Login />
     </div>
   );
 };

FrontEnd/src/components/authorization/Login.jsx

@@ -2,9 +2,9 @@ import LoginPage from './LoginPage';
 import SignUpInvitation from './SignUpInvitation';
 import classes from './Login.module.css';
 
-const Login = (props) => {
+const Login = () => {
   return <div className={classes.login}>
-    <LoginPage setErrorMessage={props.setErrorMessage} />
+    <LoginPage />
     <SignUpInvitation />
   </div>;
 };

FrontEnd/src/components/authorization/LoginPage.jsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import axios from 'axios';
 import { useStopwatch } from 'react-timer-hook';
+import { toast } from 'react-toastify';
 
 import validator from 'validator';
 import EyeVisible from './EyeVisible';
@@ -11,7 +12,7 @@ import classes from './LoginPage.module.css';
 import { useAuth } from '../../hooks/';
 import checkIfStaff from '../adminPage/checkIfStaff';
 
-const LoginContent = (props) => {
+const LoginContent = () => {
   const { login } = useAuth();
   const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
@@ -42,19 +43,13 @@ const LoginContent = (props) => {
     mode: 'all',
   });
 
-  const { setErrorMessage } = props;
-
   useEffect(() => {
     let errorMessage = '';
 
     if (errors.email?.message && errors.password?.message) {
-      if (errors.email.message === errors.password.message) {
-        errorMessage = errors.email.message;
-      } else {
-        errorMessage = `${errors.email?.message || ''}\n${
-          errors.password?.message || ''
-        }`;
-      }
+      errorMessage = errors.email.message === errors.password.message
+        ? errors.email.message
+        : `${errors.email?.message || ''}\n${errors.password?.message || ''}`;
     } else if (errors.email?.message) {
       errorMessage = errors.email.message;
     } else if (errors.password?.message) {
@@ -65,13 +60,12 @@ const LoginContent = (props) => {
       errorMessage = errors.rateError.message;
     }
 
-    setErrorMessage(errorMessage);
+    errorMessage && toast.error(errorMessage);
   }, [
     errors.email?.message,
     errors.password?.message,
     errors.unspecifiedError?.message,
     errors.rateError?.message,
-    setErrorMessage,
   ]);
 
   useEffect(() => {