From c865879b8a8799a017e2eda4e2434ac40144095f Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Wed, 11 Sep 2024 20:36:18 +0200
Subject: [PATCH] password validation fixed

---
 FrontEnd/package-lock.json                    | 312 +-----------------
 FrontEnd/package.json                         |   2 +-
 .../signup/signup-form/SignUpFormContent.jsx  |  55 ++-
 .../signup-form/SignUpFormContent.module.css  |   6 +-
 .../authorization/LoginPage.module.css        |   5 +-
 5 files changed, 51 insertions(+), 329 deletions(-)

diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json
index 5b382f25d..394833959 100644
--- a/FrontEnd/package-lock.json
+++ b/FrontEnd/package-lock.json
@@ -11,7 +11,7 @@
         "@ant-design/icons": "^5.2.6",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@mui/material": "^5.14.5",
+        "@hookform/error-message": "^2.0.1",
         "@react-input/mask": "^1.2.5",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -2750,40 +2750,16 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
-      "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
-      "dependencies": {
-        "@floating-ui/utils": "^0.1.1"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
-      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
-      "dependencies": {
-        "@floating-ui/core": "^1.4.1",
-        "@floating-ui/utils": "^0.1.1"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
-      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
-      "dependencies": {
-        "@floating-ui/dom": "^1.5.1"
-      },
+    "node_modules/@hookform/error-message": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.1.tgz",
+      "integrity": "sha512-U410sAr92xgxT1idlu9WWOVjndxLdgPUHEB8Schr27C9eh7/xUnITWpCMF93s+lGiG++D4JnbSnrb5A21AdSNg==",
       "peerDependencies": {
         "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
+        "react-dom": ">=16.8.0",
+        "react-hook-form": "^7.0.0"
       }
     },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
-      "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw=="
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -3811,223 +3787,6 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "node_modules/@mui/base": {
-      "version": "5.0.0-beta.13",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.13.tgz",
-      "integrity": "sha512-uC0l97pBspfDAp+iz2cJq8YZ8Sd9i73V77+WzUiOAckIVEyCm5dyVDZCCO2/phmzckVEeZCGcytybkjMQuhPQw==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@emotion/is-prop-valid": "^1.2.1",
-        "@floating-ui/react-dom": "^2.0.1",
-        "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.14.7",
-        "@popperjs/core": "^2.11.8",
-        "clsx": "^2.0.0",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.2.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.14.7",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.7.tgz",
-      "integrity": "sha512-sCWTUNElBPgB30iLvWe3PU7SIlTKZNf6/E/sko85iHVeHCM6WPkDw+y89CrZYjhFNmPqt2fIQM/pZu+rP2lFLA==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      }
-    },
-    "node_modules/@mui/material": {
-      "version": "5.14.7",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.7.tgz",
-      "integrity": "sha512-jIZj9F7zMv6IlyaYDVv5M2Kp20jIX8c0kzuwteySHS/A0IvPVyomQEPtWc51MCbpDNCqzwoZUp3rQtA2lI8k7A==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@mui/base": "5.0.0-beta.13",
-        "@mui/core-downloads-tracker": "^5.14.7",
-        "@mui/system": "^5.14.7",
-        "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.14.7",
-        "@types/react-transition-group": "^4.4.6",
-        "clsx": "^2.0.0",
-        "csstype": "^3.1.2",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.2.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/private-theming": {
-      "version": "5.14.7",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.7.tgz",
-      "integrity": "sha512-Y86+hmDnJab2Ka42PgxKpK3oL7EiacbeeX3X/lG9LGO0wSc45wZjHeTfIlVSkkUCkexiMKEJp5NlSjZhr27NRQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@mui/utils": "^5.14.7",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/styled-engine": {
-      "version": "5.14.7",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.7.tgz",
-      "integrity": "sha512-hKBETEDsIAkL8/mBwPiQj/vw28OeIhMXC3Tvj4J2bb9snxAKpiZioR1PwqP+6P41twsC/GKBd0Vr9oaWYaHuMg==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@emotion/cache": "^11.11.0",
-        "csstype": "^3.1.2",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/system": {
-      "version": "5.14.7",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.7.tgz",
-      "integrity": "sha512-jeZtHglc+Pi6qjGoopT6O4RqYXVBMqHVOsjMGP0hxGSSPm1T4gsAu7jU8eqGx9YwwjvvJ0eotTjFqw7iJ6qE2Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@mui/private-theming": "^5.14.7",
-        "@mui/styled-engine": "^5.14.7",
-        "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.14.7",
-        "clsx": "^2.0.0",
-        "csstype": "^3.1.2",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/types": {
-      "version": "7.2.4",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
-      "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
-      "peerDependencies": {
-        "@types/react": "*"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/utils": {
-      "version": "5.14.7",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.7.tgz",
-      "integrity": "sha512-RtheP/aBoPogVdi8vj8Vo2IFnRa4mZVmnD0RGlVZ49yF60rZs+xP4/KbpIrTr83xVs34QmHQ2aQ+IX7I0a0dDw==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^18.2.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.2.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -4145,15 +3904,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@rc-component/color-picker": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.5.1.tgz",
@@ -5026,22 +4776,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-is": {
-      "version": "18.2.1",
-      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
-      "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.6",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
-      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6743,14 +6477,6 @@
         "wrap-ansi": "^7.0.0"
       }
     },
-    "node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -8443,15 +8169,6 @@
         "utila": "~0.4"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -17572,21 +17289,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index 07b6d1d22..4f0c3d281 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -12,7 +12,7 @@
     "@ant-design/icons": "^5.2.6",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.5",
+    "@hookform/error-message": "^2.0.1",
     "@react-input/mask": "^1.2.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
diff --git a/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.jsx b/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.jsx
index eb4ef7865..7ae1d9451 100644
--- a/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.jsx
+++ b/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, Suspense } from 'react';
 import { useForm } from 'react-hook-form';
+import { ErrorMessage } from '@hookform/error-message';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import axios from 'axios';
@@ -33,6 +34,7 @@ export function SignUpFormContentComponent(props) {
     nameSurnameFieldLength: 'Введіть від 2 до 50 символів',
     companyFieldLength: 'Введіть від 2 до 100 символів',
     notAllowedSymbols: 'Поле містить недопустимі символи та/або цифри',
+    maxLength: 'Кількість символів перевищує максимально допустиму (50 символів)',
   };
 
   const {
@@ -43,9 +45,11 @@ export function SignUpFormContentComponent(props) {
     setValue,
     setError,
     clearErrors,
+    trigger,
     formState: { errors, isValid },
   } = useForm({
     mode: 'all',
+    criteriaMode: 'all',
   });
 
   const { setIsValid } = props;
@@ -107,23 +111,15 @@ export function SignUpFormContentComponent(props) {
     setIsValid(isValid);
   }, [isValid, setIsValid]);
 
+  const handleValidation = async () => {
+    await trigger(['password', 'confirmPassword']);
+  };
+
   useEffect(() => {
     if (watch('password') && watch('confirmPassword')) {
-      if (watch('password') !== watch('confirmPassword')) {
-        setError('password', {
-          type: 'manual',
-          message: errorMessageTemplates.confirmPassword,
-        });
-        setError('confirmPassword', {
-          type: 'manual',
-          message: errorMessageTemplates.confirmPassword,
-        });
-      } else {
-        clearErrors('password');
-        clearErrors('confirmPassword');
-      }
+      handleValidation();
     }
-  }, [watch('password'), watch('confirmPassword'), setError, clearErrors]);
+  }, [watch('confirmPassword'), watch('password')]);
 
   const onSubmit = () => {
     const dataToSend = {
@@ -269,8 +265,15 @@ export function SignUpFormContentComponent(props) {
                     value: PASSWORD_PATTERN,
                     message: errorMessageTemplates.password,
                   },
+                  maxLength: {
+                    value: 50,
+                    message: errorMessageTemplates.maxLength
+                  },
+                  validate: (value) =>
+                    watch('confirmPassword') !== value
+                      ? errorMessageTemplates.confirmPassword
+                      : null,
                 })}
-                maxLength={50}
               />
               <span
                 className={styles['password-visibility']}
@@ -280,7 +283,16 @@ export function SignUpFormContentComponent(props) {
               </span>
             </div>
             <div className={styles['signup-form__error']}>
-            {errors.password && <p>{errors.password.message}</p>}
+              <ErrorMessage
+                errors={errors}
+                name="password"
+                render={({ messages }) =>
+                  messages &&
+                  Object.entries(messages).map(([type, message]) => (
+                    <p key={type}>{message}</p>
+                  ))
+                }
+              />
             </div>
           </div>
           <div className={styles['signup-form__column']}>
@@ -304,12 +316,15 @@ export function SignUpFormContentComponent(props) {
                 type={showConfirmPassword ? 'text' : 'password'}
                 {...register('confirmPassword', {
                   required: errorMessageTemplates.required,
+                  maxLength: {
+                    value: 50,
+                    message: errorMessageTemplates.maxLength
+                  },
                   validate: (value) =>
                     watch('password') !== value
                       ? errorMessageTemplates.confirmPassword
                       : null,
                 })}
-                maxLength={50}
               />
               <span
                 className={styles['password-visibility']}
@@ -319,7 +334,11 @@ export function SignUpFormContentComponent(props) {
               </span>
             </div>
             <div className={styles['signup-form__error']}>
-              {errors.confirmPassword && errors.confirmPassword.message}
+              <ErrorMessage
+                errors={errors}
+                name="confirmPassword"
+                render={({ message }) => <p>{message}</p>}
+                />
             </div>
           </div>
         </div>
diff --git a/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.module.css b/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.module.css
index 6575f0d07..f0ac94b65 100644
--- a/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.module.css
+++ b/FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.module.css
@@ -23,7 +23,7 @@
 .signup-form__column {
   display: flex;
   width: 257px;
-  height: 84px;
+  min-height: 84px;
   padding-bottom: 0px;
   flex-direction: column;
   align-items: flex-start;
@@ -169,8 +169,8 @@
 
 .signup-form__error {
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
-  gap: 10px;
   align-self: stretch;
   color: var(--red-red-100, #f34444);
   font-family: var(--font-messages);
@@ -338,4 +338,4 @@ input[type="checkbox"]:checked::before {
 
 .password-visibility {
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/components/authorization/LoginPage.module.css b/FrontEnd/src/components/authorization/LoginPage.module.css
index 1fbdbf1b3..b67a3336f 100644
--- a/FrontEnd/src/components/authorization/LoginPage.module.css
+++ b/FrontEnd/src/components/authorization/LoginPage.module.css
@@ -76,6 +76,7 @@
   flex-direction: column;
   align-items: center;
   align-self: stretch;
+  overflow: hidden;
 }
 
 .login-content__email input {
@@ -122,6 +123,7 @@
   border-radius: 2px;
   border: 1px solid #d9d9d9;
   background: #fff;
+  overflow: hidden;
 }
 
 .login-content__password__wrapper {
@@ -235,8 +237,7 @@
   letter-spacing: -0.16px;
 }
 
-.login-footer-buttons__signin__disabled
- {
+.login-footer-buttons__signin__disabled {
   opacity: 50%;
   cursor: default;
 }