From b128e4b4cd4e3e259b390c60b292afdf4e9152e6 Mon Sep 17 00:00:00 2001
From: kurpfish <ph4z3r_f@mail.ru>
Date: Wed, 11 Aug 2021 16:39:54 +0300
Subject: [PATCH] simple auth error handling

---
 src/components/Auth/AuthForDevelopers.js         | 9 +++++++++
 src/components/Auth/AuthForDevelopers.module.css | 7 +++++++
 src/components/Auth/AuthForPartners.js           | 9 +++++++++
 src/components/Auth/AuthForPartners.module.css   | 7 +++++++
 src/server/server.js                             | 3 ++-
 5 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/Auth/AuthForDevelopers.js b/src/components/Auth/AuthForDevelopers.js
index 65be31e8..0a49388e 100644
--- a/src/components/Auth/AuthForDevelopers.js
+++ b/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))
                           }
                         })
                       } : ()=>{}}
diff --git a/src/components/Auth/AuthForDevelopers.module.css b/src/components/Auth/AuthForDevelopers.module.css
index 9642ce39..678e4578 100644
--- a/src/components/Auth/AuthForDevelopers.module.css
+++ b/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;
diff --git a/src/components/Auth/AuthForPartners.js b/src/components/Auth/AuthForPartners.js
index e174e9ab..d757fe6d 100644
--- a/src/components/Auth/AuthForPartners.js
+++ b/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))
                         }
                       })
                     } : ()=>{}}
diff --git a/src/components/Auth/AuthForPartners.module.css b/src/components/Auth/AuthForPartners.module.css
index 7728cbc6..54791dc2 100644
--- a/src/components/Auth/AuthForPartners.module.css
+++ b/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;
diff --git a/src/server/server.js b/src/server/server.js
index 4a3e2513..c120037f 100644
--- a/src/server/server.js
+++ b/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;
     }