sweet alert error handling

package-lock.json

@@ -9946,6 +9946,11 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM="
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -10358,6 +10363,11 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
       "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
     },
+    "mousetrap": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
+      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -14620,6 +14630,23 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "sweetalert2": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.19.0.tgz",
+      "integrity": "sha512-nFL++N3bitkEkd487Tv4i5ZxusmnoAAXHjtk7lp603Opxb8wlvVnz3hqa7qiIw6QFL04JC810E6qVQNf8s0vYQ=="
+    },
+    "sweetalert2-react": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2-react/-/sweetalert2-react-0.8.3.tgz",
+      "integrity": "sha512-l960IJWHE6BHDEImcn//thzQOY9moVccf6xgg42HDyLwpU/2wLvv9P82fD0sQn0WGAUwbjDz3Xfuj9oQI4iFzQ==",
+      "requires": {
+        "lodash.pick": "^4.4.0",
+        "mousetrap": "^1.6.0",
+        "prop-types": "^15.0.0",
+        "sweetalert2": "^8.5.0",
+        "warning": "^4.0.3"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -24,6 +24,7 @@
     "redux-devtools-extension": "^2.13.9",
     "sass": "^1.34.0",
     "sass-loader": "^11.1.1",
+    "sweetalert2-react": "^0.8.3",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/components/Auth/AuthForDevelopers.js

@@ -20,6 +20,11 @@ import { selectIsLoading } from '../../redux/loaderSlice';
 import { Redirect, Link } from 'react-router-dom';
 import { Loader } from '../Loader/Loader'
 
+import { withSwalInstance } from 'sweetalert2-react';
+import swal from 'sweetalert2';
+ 
+const SweetAlert = withSwalInstance(swal);
+
 const AuthForDevelopers = () => {
   const dispatch = useDispatch()
   const isAuth = useSelector(selectAuth)
@@ -68,8 +73,15 @@ const AuthForDevelopers = () => {
                     onChange={(e) => setPassword(e.target.value)}
                   />
 
+                  
+
                   { error && <div className={style.form__error}>
-                    {error}
+                    <SweetAlert
+                      show={!!error}
+                      title="Ошибка"
+                      text={error}
+                      onConfirm={() => setError(null)}
+                    />
                   </div> }
 
                   <div className={style.form__buttons}>
@@ -86,7 +98,7 @@ const AuthForDevelopers = () => {
                             dispatch(loading(false))
                           },
                           catchError: () => {
-                            setError('Некорректные данные')
+                            setError('Некорректные данные для входа')
                             dispatch(loading(false))
                           }
                         })

src/components/Auth/AuthForDevelopers.module.css

@@ -192,12 +192,11 @@
   color: #6aaf5c !important;
 }
 
-.form__error {
+/* .form__error {
   font-size: 16px;
   color: #b21;
   margin-left: 45px;
-  margin-bottom: 16px;
+} */
-}
 
 @media (max-width: 575.98px) {
   .form__btn {

src/components/Auth/AuthForPartners.js

@@ -21,6 +21,11 @@ import { selectIsLoading } from '../../redux/loaderSlice';
 import { Redirect, Link } from 'react-router-dom';
 import { Loader } from '../Loader/Loader'
 
+import { withSwalInstance } from 'sweetalert2-react';
+import swal from 'sweetalert2';
+ 
+const SweetAlert = withSwalInstance(swal);
+
 const AuthForPartners = () => {
   const dispatch = useDispatch()
   const isAuth = useSelector(selectAuth)
@@ -64,7 +69,12 @@ const AuthForPartners = () => {
                   />
 
                   { error && <div className={style.form__error}>
-                    {error}
+                  <SweetAlert
+                    show={!!error}
+                    title="Ошибка"
+                    text={error}
+                    onConfirm={() => setError(null)}
+                  />
                   </div> }
 
                   <div className={style.form__buttons}>
@@ -81,7 +91,7 @@ const AuthForPartners = () => {
                           dispatch(loading(false))
                         },
                         catchError: () => {
-                          setError('Некорректные данные')
+                          setError('Некорректные данные для входа')
                           dispatch(loading(false))
                         }
                       })

src/components/Auth/AuthForPartners.module.css

@@ -189,12 +189,11 @@
   color: #6aaf5c !important;
 }
 
-.form__error {
+/* .form__error {
   font-size: 16px;
   color: #b21;
   margin-left: 45px;
-  margin-bottom: 16px;
+} */
-}
 
 @media (max-width: 575.98px) {
   .form__btn {