tethysfaceid/components/LogInForm/logInComponent.js

import React, { useState } from 'react';
import { Card, Form, Input, Button, Modal, Alert, Affix, Divider } from 'antd';
import { LoginOutlined, UserOutlined } from '@ant-design/icons';




const LogInComponent = ({ onLogIn, loading }) => {


  const layout = {
    labelCol: { span: 24 },
    wrapperCol: { span: 24 },
  };

  return (
    <Card>
      <Form {...layout} name="basic" initialValues={{ remember: true }} onFinish={onLogIn}>
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

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

        <Form.Item>
          <Button
            loading={loading}
            type="primary"
            block
            htmlType="submit"
            className="margin-top-3x-desktop margin-top-2x-mobile margin-right-3x-desktop  margin-right-2x-mobile"
          >
            LogIn
                <LoginOutlined />
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default LogInComponent;