Added incorrect login/password error in login form

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"/>
 
@@ -39,25 +41,64 @@ export default function Login() {
       if(e.status === 400)
         openNotificationError(e.message)
       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: 'Пожалуйста введите имя!' }]}>
+            rules={[
-            <Input placeholder="Пользователь" prefix={<UserOutlined />}/>
+              { 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>