add authorization

src/app/components/login-layout/LoginLayout.tsx

@@ -0,0 +1,99 @@
+import {Button, Card, Form, Input, Layout} from 'antd';
+import {useForm} from 'antd/lib/form/Form';
+import {AxiosError} from 'axios';
+import React, {FC, memo, useCallback, useState} from 'react';
+import {createUseStyles} from 'react-jss';
+import authServiceApi from '../../../core/infrastructure/AuthServiceAPI';
+
+type LoginModel = {
+    login: string;
+    password: string;
+};
+
+const useStyles = createUseStyles({
+    input: {
+        marginBottom: '16px'
+    },
+    layout: {
+        height: '100%'
+    },
+    content: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+});
+
+const formItemLayout = {
+    labelCol: {
+        xs: {span: 24},
+        sm: {span: 8}
+    },
+    wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 16}
+    }
+};
+
+const LoginLayout: FC = () => {
+    const classes = useStyles();
+
+    const [disabled, setDisabled] = useState(false);
+
+    const [form] = useForm<LoginModel>();
+
+    const handleSubmit = useCallback(() => {
+        const {login, password} = form.getFieldsValue();
+        setDisabled(true);
+        authServiceApi.auth(login, password).catch((error: AxiosError) => {
+            const message = error.response?.data.message;
+            const errors = message ? [message] : ['Some error'];
+            const validationParams = {
+                validating: false,
+                errors
+            };
+            form.setFields([
+                {...validationParams, name: 'login'},
+                {...validationParams, name: 'password'}
+            ]);
+            setDisabled(false);
+        });
+    }, [form]);
+
+    return (
+        <Layout className={classes.layout}>
+            <Layout.Content className={classes.content}>
+                <Card title="Admin Panel" style={{width: 300}}>
+                    <Form {...formItemLayout} form={form} onFinish={handleSubmit}>
+                        <Form.Item
+                            hasFeedback
+                            className={classes.input}
+                            name="login"
+                            label="Login:"
+                            rules={[{required: true}]}
+                        >
+                            <Input disabled={disabled} />
+                        </Form.Item>
+                        <Form.Item
+                            hasFeedback
+                            className={classes.input}
+                            name="password"
+                            label="Password:"
+                            rules={[{required: true}]}
+                        >
+                            <Input.Password disabled={disabled} />
+                        </Form.Item>
+                        <Form.Item wrapperCol={{offset: 8, span: 16}}>
+                            <Button htmlType="submit" disabled={disabled}>
+                                Sign in
+                            </Button>
+                        </Form.Item>
+                    </Form>
+                </Card>
+            </Layout.Content>
+        </Layout>
+    );
+};
+
+export default memo(LoginLayout);