simple auth error handling

src/components/Auth/AuthForDevelopers.js

@@ -27,6 +27,7 @@ const AuthForDevelopers = () => {
 
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
+  const [error, setError] = useState(null);
 
   if(isAuth) {
     return <Redirect to='/' />
@@ -67,6 +68,10 @@ const AuthForDevelopers = () => {
                     onChange={(e) => setPassword(e.target.value)}
                   />
 
+                  { error && <div className={style.form__error}>
+                    {error}
+                  </div> }
+
                   <div className={style.form__buttons}>
                     <button
                       className={style.form__btn}
@@ -79,6 +84,10 @@ const AuthForDevelopers = () => {
                           dispatch: ()=> {
                             dispatch(auth(true))
                             dispatch(loading(false))
+                          },
+                          catchError: () => {
+                            setError('Некорректные данные')
+                            dispatch(loading(false))
                           }
                         })
                       } : ()=>{}}

src/components/Auth/AuthForDevelopers.module.css

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

src/components/Auth/AuthForPartners.js

@@ -28,6 +28,7 @@ const AuthForPartners = () => {
   
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
+  const [error, setError] = useState(null);
 
   if(isAuth) {
     return <Redirect to='/' />
@@ -62,6 +63,10 @@ const AuthForPartners = () => {
                     onChange={(e) => setPassword(e.target.value)}
                   />
 
+                  { error && <div className={style.form__error}>
+                    {error}
+                  </div> }
+
                   <div className={style.form__buttons}>
                   <button
                     className={style.form__btn}
@@ -74,6 +79,10 @@ const AuthForPartners = () => {
                         dispatch: ()=> {
                           dispatch(auth(true))
                           dispatch(loading(false))
+                        },
+                        catchError: () => {
+                          setError('Некорректные данные')
+                          dispatch(loading(false))
                         }
                       })
                     } : ()=>{}}

src/components/Auth/AuthForPartners.module.css

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

src/server/server.js

@@ -64,7 +64,7 @@ export const fetchForm = async (link, info) => {
   } catch (error) {}
 }
 
-export const fetchAuth = async ({ username, password, dispatch }) => {
+export const fetchAuth = async ({ username, password, dispatch, catchError }) => {
   const baseURL = process.env.REACT_APP_BASE_URL;
   const apiURL = process.env.REACT_APP_API_URL;
   try {
@@ -84,6 +84,7 @@ export const fetchAuth = async ({ username, password, dispatch }) => {
     )
 
     if(!response.ok) {
+      catchError();
       return response.statusText;
     }