HomeWork/project/my-project/src/components/signIn.js

import { Form, Input, Button, Row, Col, Alert } from 'antd';
import { connect } from 'react-redux';
import { actionFullLogin } from '../action';
import { useHistory } from 'react-router-dom';
import { useEffect, useState } from 'react';

const Sign = ({ getState, auth, logStatus, user }) => {
  const [logMessage, setLogMessage] = useState(false);

  const history = useHistory();

  useEffect(
    () => {
      if ((auth).length !== 0) {
        history.push('/');
      }

      if (user.payload && user.payload.sub && user.payload.sub.acl.includes('admin')) {
        history.push('/admin');
      }
    }, [auth]);

  const onFinish = (values) => {
    console.log('Success:', values);
    getState(values.username, values.password);

    setLogMessage(!logMessage);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (

    <Row>
      <Col span ={7}>

     </Col>
      <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
       >
      <Form.Item
        label="Имя"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Пароль"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Войти
          </Button>
        </Form.Item>

        { logMessage &&
        logStatus === 'RESOLVED' &&
        (auth).length === 0 &&
         <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Alert
          message="Ошибка"
          description="Неправильно введен логин или пароль"
          type="error"

         />
        </Form.Item>}

      </Form>
    </Row>
  );
};

const mapStateToProps = state => ({
  auth: state.auth?.token || '',
  logStatus: state.promise.login?.status || '',
  user: state.auth || ''

});

const SignIn = connect(mapStateToProps, { getState: actionFullLogin })(Sign);

export default SignIn;