feat(front-login-page): добавлена форма авторизации с эффектором и ng…

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";
 

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>
+    );
+};

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>
+
   )
 }