controlador-descarga/views/login/index.php

<style>
  .site-card {
    height: 100vh;
    width: 100vw;
    padding: 20px;
    background: #ececec;
  }
  .content {
    width: 100%;
    height: 100%;
  }
  .grid {
    width: 25%;
    text-align: center;
  }
</style>
<script type="text/babel">
  const { LoadingOutlined } = window.icons;
  const { Card, Form, Input, Button, Row, Col, Modal } = window.antd;

  const App = () => {

    let onFinish = async (f) => {
      let request = {
        "method": "POST",
        "headers": {
          "Content-Type": "application/json",
          "<?= \Yii::$app->getRequest()->csrfParam ?>": "<?= \Yii::$app->getRequest()->csrfToken ?>", 
        },
        body: JSON.stringify({
          "usuario": f.usuario,
          "clave": f.clave
        })
      };
      let resp = await fetch("/login", request);
      let data = await resp.json();
      if(data && data.success) {
        window.location.href = "/";
        return;
      }

      Modal.warning({title: "Los datos ingresados son incorrectos"});
    }

    return (
      <div className="site-card">
        <Row>
          <Col span={8} offset={8}>
            <Card>
              <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinish}
                autoComplete="off"
                >
                <Form.Item
                  label="Usuario"
                  name="usuario"
                  rules={[{ required: true, message: 'El Correo es obligatorio' }]}
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label="Contraseña"
                  name="clave"
                  rules={[{ required: true, message: 'La Contraseña es obligatoria' }]}
                >
                  <Input.Password />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                  <Button type="primary" htmlType="submit">
                    Iniciar Sesión
                  </Button>
                </Form.Item>
              </Form>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }

  ReactDOM.render(<App />, document.getElementById('root'));
</script>