CF2-85: Added base registration page

src/App.js

@@ -6,6 +6,7 @@ import {
 import {ConfigProvider} from 'antd'
 import locale from "antd/lib/locale/ru_RU"
 import Login from './pages/Login'
+import Register from './pages/Register'
 import Main from './pages/Main'
 import { OpenAPI } from './services/api'
 import { PrivateRoute } from './components/Private'
@@ -21,6 +22,9 @@ export default function App() {
           <Route path="/login">
             <Login />
           </Route>
+          <Route path="/register">
+            <Register />
+          </Route>
           <PrivateRoute path="/">
             <Main />
           </PrivateRoute>

src/pages/Login.jsx

@@ -3,8 +3,9 @@ import { UserOutlined, LockOutlined } from '@ant-design/icons'
 import logo from '../images/logo_32.png'
 import Loader from '../components/Loader'
 import { useState } from 'react'
-import { useHistory } from "react-router-dom";
+import {Link, useHistory} from "react-router-dom";
 import { AuthService, OpenAPI } from '../services/api/'
+import '../styles/index.css'
 
 const { login } = AuthService
 
@@ -61,8 +62,9 @@ export default function Login() {
         <Form form={form} onFinish={handleLogin}>
           <Form.Item
             name="login"
+            validateStatus={isErrorVisible ? "error" : "validating"}
             rules={[
-              { required: true, message: 'Пожалуйста введите имя!' },
+              { required: true, message: 'Пожалуйста, введите имя пользователя' },
                 () => ({
                   validator() {
                     return showError(isErrorVisible, new Error('Неправильные логин или пароль!'))
@@ -83,7 +85,7 @@ export default function Login() {
           <Form.Item
             name="password"
             rules={[
-              { required: true, message: 'Пожалуйста введите пароль!' },
+              { required: true, message: 'Пожалуйста, введите пароль' },
                 () => ({
                   validator() {
                     return showError(isErrorVisible)
@@ -102,10 +104,17 @@ export default function Login() {
           </Form.Item>
 
           <Form.Item>
-            <Button type="primary" htmlType="submit">
+            <div className='login-button'>
-              Вход
+              <Button type="primary" htmlType="submit">
-            </Button>
+                Вход
-          </Form.Item>                                   
+              </Button>
+            </div>
+          </Form.Item>
+
+          <div className='text-align-center'>
+            <Link to={`/register`}>Отправить заявку на регистрацию</Link>
+          </div>
+
         </Form>
       </Card>
       {loader && <Loader/>}

src/pages/Register.jsx

@@ -0,0 +1,297 @@
+import { Card, Form, Input, Select, Button, notification } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons'
+import logo from '../images/logo_32.png'
+import Loader from '../components/Loader'
+import { useState } from 'react'
+import { Link, useHistory } from "react-router-dom";
+import { AuthService } from '../services/api/'
+
+const openNotificationError = (message, title) => {
+    notification['error']({
+        message: title||'Ошибка',
+        description: message,
+    });
+};
+
+const { Option } = Select;
+
+const companies = [
+    { name: "ООО «Газпромнефть-Хантос» ", value: 1 },
+    { name: "АО «НафтаГаз»", value: 2 },
+    { name: "ООО «Нафтагаз Бурение»", value: 3 },
+    { name: "ООО «Газпромнефть-ННГ»", value: 4 }
+];
+
+export default function Register() {
+    const [loader, setLoader] = useState(false);
+    const [isErrorVisible, setErrorVisible] = useState(false);
+    const [selectedCompanyId, setSelectedCompanyId] = useState(companies[0].value);
+    const history = useHistory();
+    const [form] = Form.useForm();
+
+    const logoIcon = <img src={logo} alt="АСБ" className="logo"/>
+
+    const children = companies.map((line) => (
+        <Option key={line.value}>{line.name}</Option>
+    ));
+
+    let handleRegister = async (formData) =>{
+        formData.idCompany = +selectedCompanyId
+
+        setLoader(true)
+        try{
+            await AuthService.register(formData)
+            setLoader(false)
+            openNotificationError("Заявка на регистрацию отправлена. ")
+            history.push("/login");
+        }catch(e){
+            if(e.status === 400)
+                openNotificationError(e.message)
+            console.error(`Error ${e}`)
+
+            setErrorVisible(true)
+            form.validateFields()
+            setLoader(false)
+        }
+    }
+
+    const showError = (isErrorVisible, errorObj) => {
+        if (isErrorVisible)
+            return Promise.reject(errorObj)
+
+        return Promise.resolve()
+    }
+
+    return (
+        <div className='login_page shadow'>
+            <Card title="Система мониторинга" className='shadow' bordered={true} style={{ width: 350 }} extra={logoIcon}>
+                <Form form={form} onFinish={handleRegister}>
+                    <Form.Item
+                        name="login"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите имя!' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible, new Error('Неправильные логин или пароль!'))
+                                }
+                            })
+                        ]}
+                    >
+                        <Input
+                            placeholder="Пользователь"
+                            prefix={<UserOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="password"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите пароль!' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Input.Password
+                            placeholder='пароль'
+                            prefix={<LockOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="confirmPassword"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите пароль повторно' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Input.Password
+                            placeholder='Подтверждение пароля'
+                            prefix={<LockOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="name"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите имя' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Input
+                            placeholder='Имя'
+                            prefix={<LockOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="surName"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите фамилию' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Input
+                            placeholder='Фамилия'
+                            prefix={<LockOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="patronymic"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите отчество' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Input
+                            placeholder='Отчество'
+                            prefix={<LockOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="email"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите email' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Input
+                            placeholder='Email'
+                            prefix={<LockOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="phone"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите номер телефона' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Input
+                            placeholder='Номер телефона'
+                            prefix={<LockOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="idCompany"
+                        initialValue={companies[0].name}
+                        rules={[
+                            { required: true, message: 'Пожалуйста, выберите компанию' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Select
+                            placeholder="Выберите компанию"
+                            className="filter-selector"
+                            value={selectedCompanyId}
+                            onChange={setSelectedCompanyId}
+                        >
+                            {children}
+                        </Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        name="position"
+                        rules={[
+                            { required: true, message: 'Пожалуйста, введите должность' },
+                            () => ({
+                                validator() {
+                                    return showError(isErrorVisible)
+                                }
+                            })
+                        ]}
+                    >
+                        <Input
+                            placeholder='Должность'
+                            prefix={<LockOutlined />}
+                            onChange={() => {
+                                setErrorVisible(false)
+                                form.validateFields()
+                            }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <div className='register-button'>
+                            <Button type="primary" htmlType="submit">
+                                Зарегистрироваться
+                            </Button>
+                        </div>
+                    </Form.Item>
+
+                    <div className='text-align-center'>
+                        <Link to={`/login`}>Назад</Link>
+                    </div>
+
+                </Form>
+            </Card>
+            {loader && <Loader/>}
+        </div>
+    )
+}

src/services/api/models/UserDto.ts

@@ -10,6 +10,9 @@ export type UserDto = {
     name?: string | null;
     surname?: string | null;
     patronymic?: string | null;
+    email?: string | null;
+    phone?: string | null;
+    position?: string | null;
     id?: number;
     idCompany?: number | null;
     idRole?: number | null;

src/services/api/models/UserTokenDto.ts

@@ -8,6 +8,9 @@ export type UserTokenDto = {
     name?: string | null;
     surname?: string | null;
     patronymic?: string | null;
+    email?: string | null;
+    phone?: string | null;
+    position?: string | null;
     id?: number;
     companyName?: string | null;
     roleName?: string | null;

src/styles/index.css

@@ -75,6 +75,10 @@ body {
   vertical-align: center;
 }
 
+.text-align-center {
+  text-align: center;
+}
+
 .text-align-r-container {
   width: 100%; 
   text-align: right;
@@ -97,3 +101,13 @@ code {
   width: 100%;
 }
 
+.login-button {
+  width: 20%;
+  margin: auto;
+}
+
+.register-button {
+  width: 50%;
+  margin: auto;
+}
+