From 96ec39e69a52d109555e926cc19f657cd7ba5163 Mon Sep 17 00:00:00 2001
From: Igor Borzunov <Igor.Borzunov@rosbank.ru>
Date: Fri, 8 Oct 2021 20:30:18 +0300
Subject: [PATCH] =?UTF-8?q?feat(front-login-page):=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC?=
 =?UTF-8?q?=D0=B0=20=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B8=D0=B7=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B8=20=D1=81=20=D1=8D=D1=84=D1=84=D0=B5=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BE=D0=BC=20=D0=B8=20ng-zorro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                 |   1 +
 frontend/src/content/Login/Login.jsx |  66 ++++++++++++++
 frontend/src/content/Table/Table.tsx | 131 ---------------------------
 frontend/src/content/form/Form.tsx   |  86 ++++++++++++------
 4 files changed, 123 insertions(+), 161 deletions(-)
 create mode 100644 frontend/src/content/Login/Login.jsx
 delete mode 100644 frontend/src/content/Table/Table.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ce51593..ac7fe6c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
 import { Filter } from "./content/Filter";
 import { LoginForm } from "./content/form/Form";
 
+
 import "antd/dist/antd.css";
 import "./App.css";
 
diff --git a/frontend/src/content/Login/Login.jsx b/frontend/src/content/Login/Login.jsx
new file mode 100644
index 0000000..bffd020
--- /dev/null
+++ b/frontend/src/content/Login/Login.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'antd/dist/antd.css';
+import './index.css';
+import { Form, Input, Button, Checkbox } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+
+const NormalLoginForm = () => {
+    const onFinish = values => {
+        console.log('Received values of form: ', values);
+    };
+
+    return (
+        <Form
+            name="normal_login"
+            className="login-form"
+            initialValues={{
+                remember: true,
+            }}
+            onFinish={onFinish}
+        >
+            <Form.Item
+                name="username"
+                rules={[
+                    {
+                        required: true,
+                        message: 'Please input your Username!',
+                    },
+                ]}
+            >
+                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
+            </Form.Item>
+            <Form.Item
+                name="password"
+                rules={[
+                    {
+                        required: true,
+                        message: 'Please input your Password!',
+                    },
+                ]}
+            >
+                <Input
+                    prefix={<LockOutlined className="site-form-item-icon" />}
+                    type="password"
+                    placeholder="Password"
+                />
+            </Form.Item>
+            <Form.Item>
+                <Form.Item name="remember" valuePropName="checked" noStyle>
+                    <Checkbox>Remember me</Checkbox>
+                </Form.Item>
+
+                <a className="login-form-forgot" href="">
+                    Forgot password
+                </a>
+            </Form.Item>
+
+            <Form.Item>
+                <Button type="primary" htmlType="submit" className="login-form-button">
+                    Log in
+                </Button>
+                Or <a href="">register now!</a>
+            </Form.Item>
+        </Form>
+    );
+};
diff --git a/frontend/src/content/Table/Table.tsx b/frontend/src/content/Table/Table.tsx
deleted file mode 100644
index 7890ff6..0000000
--- a/frontend/src/content/Table/Table.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Table, Button, Space } from 'antd';
-import ReactDOM from 'react-dom';
-import React from "react";
-
-const {  Table, Button, Space  } = antd;
-
-const data = [
-    {
-        key: '1',
-        name: 'John Brown',
-        age: 32,
-        address: 'New York No. 1 Lake Park',
-    },
-    {
-        key: '2',
-        name: 'Jim Green',
-        age: 42,
-        address: 'London No. 1 Lake Park',
-    },
-    {
-        key: '3',
-        name: 'Joe Black',
-        age: 32,
-        address: 'Sidney No. 1 Lake Park',
-    },
-    {
-        key: '4',
-        name: 'Jim Red',
-        age: 32,
-        address: 'London No. 2 Lake Park',
-    },
-];
-
-class App extends React.Component {
-    state = {
-        filteredInfo: null,
-        sortedInfo: null,
-    };
-
-    handleChange = (pagination: any, filters: any, sorter: any) => {
-        console.log('Various parameters', pagination, filters, sorter);
-        this.setState({
-            filteredInfo: filters,
-            sortedInfo: sorter,
-        });
-    };
-
-    clearFilters = () => {
-        this.setState({ filteredInfo: null });
-    };
-
-    clearAll = () => {
-        this.setState({
-            filteredInfo: null,
-            sortedInfo: null,
-        });
-    };
-
-    setAgeSort = () => {
-        this.setState({
-            sortedInfo: {
-                order: 'descend',
-                columnKey: 'age',
-            },
-        });
-    };
-
-    render() {
-        let { sortedInfo, filteredInfo } = this.state;
-        // @ts-ignore
-        sortedInfo = sortedInfo || {};
-        // @ts-ignore
-        filteredInfo = filteredInfo || {};
-        // @ts-ignore
-        // @ts-ignore
-        // @ts-ignore
-        // @ts-ignore
-        // @ts-ignore
-        // @ts-ignore
-        const columns = [
-            {
-                title: 'Name',
-                dataIndex: 'name',
-                key: 'name',
-                filters: [
-                    { text: 'Joe', value: 'Joe' },
-                    { text: 'Jim', value: 'Jim' },
-                ],
-                filteredValue: filteredInfo.name || null,
-                onFilter: (value: any, record: { name: string | any[]; }) => record.name.includes(value),
-                sorter: (a: { name: string | any[]; }, b: { name: string | any[]; }) => a.name.length - b.name.length,
-                sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
-                ellipsis: true,
-            },
-            {
-                title: 'Age',
-                dataIndex: 'age',
-                key: 'age',
-                sorter: (a: { age: number; }, b: { age: number; }) => a.age - b.age,
-                sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
-                ellipsis: true,
-            },
-            {
-                title: 'Address',
-                dataIndex: 'address',
-                key: 'address',
-                filters: [
-                    { text: 'London', value: 'London' },
-                    { text: 'New York', value: 'New York' },
-                ],
-                filteredValue: filteredInfo.address || null,
-                onFilter: (value: any, record: { address: string | any[]; }) => record.address.includes(value),
-                sorter: (a: { address: string | any[]; }, b: { address: string | any[]; }) => a.address.length - b.address.length,
-                sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
-                ellipsis: true,
-            },
-        ];
-        return (
-            <>
-                <Space style={{ marginBottom: 16 }}>
-                    <Button onClick={this.setAgeSort}>Sort age</Button>
-                    <Button onClick={this.clearFilters}>Clear filters</Button>
-                    <Button onClick={this.clearAll}>Clear filters and sorters</Button>
-                </Space>
-                <Table columns={columns} dataSource={data} onChange={this.handleChange} />
-            </>
-        );
-    }
-}
-
-ReactDOM.render(<Table />, document.getElementById('container')
diff --git a/frontend/src/content/form/Form.tsx b/frontend/src/content/form/Form.tsx
index 417ddd8..df43466 100644
--- a/frontend/src/content/form/Form.tsx
+++ b/frontend/src/content/form/Form.tsx
@@ -1,6 +1,7 @@
 import { useForm } from 'effector-forms'
 import { useStore } from 'effector-react'
 import { loginForm, loginFx } from "./model";
+import { Form, Input, Button, Checkbox } from 'antd';
 
 export const LoginForm = () => {
   const { fields, submit, eachValid } = useForm(loginForm)
@@ -13,35 +14,60 @@ export const LoginForm = () => {
   }
 
   return (
-      <form onSubmit={onSubmit}>
-        <input
-            type="text"
-            value={fields.email.value}
-            disabled={pending}
-            onChange={(e) => fields.email.onChange(e.target.value)}
-        />
-        <div>
-          {fields.email.errorText({
-            "email": "enter email",
-          })}
-        </div>
-        <input
-            type="password"
-            value={fields.password.value}
-            disabled={pending}
-            onChange={(e) => fields.password.onChange(e.target.value)}
-        />
-        <div>
-          {fields.password.errorText({
-            "required": "password required"
-          })}
-        </div>
-        <button
-            disabled={!eachValid || pending}
-            type="submit"
-        >
-          Login
-        </button>
-      </form>
+      <Form onSubmit={onSubmit}
+            name="basic"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 5 }}
+            initialValues={{ remember: true }}
+            autoComplete="off"
+      >
+          <Form.Item
+              label="Username"
+              name="username"
+              rules={[{ required: true, message: 'Please input your username!' }]}
+          >
+              <Input
+                  type="text"
+                  value={fields.email.value}
+                  disabled={pending}
+                  onChange={(e) => fields.email.onChange(e.target.value)}
+              />
+              <div>
+                  {fields.email.errorText({
+                      "email": "enter email",
+                  })}
+              </div>
+          </Form.Item>
+
+          <Form.Item
+              label="Username"
+              name="username"
+              rules={[{ required: true, message: 'Please input your username!' }]}
+          >
+              <Input
+                  type="password"
+                  value={fields.password.value}
+                  disabled={pending}
+                  onChange={(e) => fields.password.onChange(e.target.value)}
+              />
+              <div>
+                  {fields.password.errorText({
+                      "required": "password required"
+                  })}
+              </div>
+          </Form.Item>
+          <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 5, span: 5 }}>
+              <Checkbox>Remember me</Checkbox>
+          </Form.Item>
+          <Form.Item wrapperCol={{ offset: 5, span: 5 }}>
+              <Button
+                  disabled={!eachValid || pending}
+                  type="submit"
+              >
+                  Login
+              </Button>
+          </Form.Item>
+      </Form>
+
   )
 }