From 0c41cc8784e2c4a800afe053a866aed0e5ae8846 Mon Sep 17 00:00:00 2001
From: KharchenkoVV <vv.harchenko@autodrilling.ru>
Date: Wed, 1 Sep 2021 16:24:11 +0500
Subject: [PATCH] Added incorrect login/password error in login form

---
 src/pages/Login.jsx | 53 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 8675561..cd144f6 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -24,7 +24,9 @@ const setUser = (user) =>{
 
 export default function Login() {
   const [loader, setLoader] = useState(false);
+  const [isErrorVisible, setErrorVisible] = useState(false);
   const history = useHistory();
+  const [form] = Form.useForm();
 
   const logoIcon = <img src={logo} alt="АСБ" className="logo"/>
 
@@ -38,26 +40,65 @@ export default function Login() {
     }catch(e){
       if(e.status === 400)
         openNotificationError(e.message)
-      console.error(`Error ${e}`)      
+      console.error(`Error ${e}`)
+
+      setErrorVisible(true)     
+      form.validateFields() 
       setLoader(false)
     }
   }
+
+  const showError = (isErrorVisible, errorObj) => {
+    if (isErrorVisible)
+      return Promise.reject(errorObj)
+
+    return Promise.resolve()
+  }
   
   return (
     <div className='login_page shadow'>
       <Card title="Система мониторинга" className='shadow' bordered={true} style={{ width: 350 }} extra={logoIcon}>
-        <Form onFinish={handleLogin}>
+        <Form form={form} onFinish={handleLogin}>
           <Form.Item
             name="login"
-            rules={[{ required: true, message: 'Пожалуйста введите имя!' }]}>
-            <Input placeholder="Пользователь" prefix={<UserOutlined />}/>
+            rules={[
+              { required: true, message: 'Пожалуйста введите имя!' },
+                () => ({
+                  validator() {
+                    return showError(isErrorVisible, new Error('Неправильные логин или пароль!'))
+                  }
+              })
+            ]}
+          >
+            <Input 
+              placeholder="Пользователь" 
+              prefix={<UserOutlined />} 
+              onChange={() => {
+                setErrorVisible(false)
+                form.validateFields()
+              }}
+            />
           </Form.Item>
 
           <Form.Item
             name="password"
-            rules={[{ required: true, message: 'Пожалуйста введите пароль!' }]}
+            rules={[
+              { required: true, message: 'Пожалуйста введите пароль!' },
+                () => ({
+                  validator() {
+                    return showError(isErrorVisible)
+                  }
+              })
+            ]}
           >
-            <Input.Password placeholder='пароль' prefix={<LockOutlined />}/>
+            <Input.Password 
+              placeholder='пароль' 
+              prefix={<LockOutlined />}
+              onChange={() => { 
+                setErrorVisible(false)
+                form.validateFields()
+              }}
+            />
           </Form.Item>
 
           <Form.Item>