diff --git a/src/App.js b/src/App.js index 49ee5eb..9b81ac1 100644 --- a/src/App.js +++ b/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() { + + +
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index cd144f6..055497b 100644 --- a/src/pages/Login.jsx +++ b/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 @@ -39,7 +40,7 @@ export default function Login() { history.push('well') }catch(e){ if(e.status === 400) - openNotificationError(e.message) + openNotificationError(e.body) console.error(`Error ${e}`) setErrorVisible(true) @@ -61,8 +62,9 @@ export default function Login() {
({ validator() { return showError(isErrorVisible, new Error('Неправильные логин или пароль!')) @@ -83,7 +85,7 @@ export default function Login() { ({ validator() { return showError(isErrorVisible) @@ -102,10 +104,17 @@ export default function Login() { - - +
+ +
+
+ +
+ Отправить заявку на регистрацию +
+
{loader && } diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx new file mode 100644 index 0000000..a84d68b --- /dev/null +++ b/src/pages/Register.jsx @@ -0,0 +1,198 @@ +import { Card, Form, Input, Select, Button, notification } from 'antd'; +import { UserOutlined, + LockOutlined, + EyeInvisibleOutlined, + EyeTwoTone } 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 openNotification = (message, type, title) => { + notification[type]({ + message: title||'Ошибка', + description: message, + }); +}; + +const { Option } = Select; + +const companies = [ + { name: "ООО «Газпромнефть-Хантос» ", value: 1 }, + { name: "АО «НафтаГаз»", value: 2 }, + { name: "ООО «Нафтагаз Бурение»", value: 3 }, + { name: "ООО «Газпромнефть-ННГ»", value: 4 } +]; + +const showError = (isErrorVisible, errorObj) => { + if (isErrorVisible) + return Promise.reject(errorObj) + + return Promise.resolve() +} + +const getValidationRules = (isRequired, message, isErrorVisible, errorObj) => { + return [ + { required: isRequired, message: message }, + () => ({ + validator() { + return showError(isErrorVisible, errorObj) + } + }) + ] +} + + +export default function Register() { + const [loader, setLoader] = useState(false); + const [isLengthErrorVisible, setIsLengthErrorVisible] = useState(false); + const [isPasswordLengthErrorVisible, setIsPasswordLengthErrorVisible] = useState(false); + const [isPasswordMismatchErrorVisible, setIsPasswordMismatchErrorVisible] = useState(false); + const [selectedCompanyId, setSelectedCompanyId] = useState(companies[0].value); + const history = useHistory(); + const [form] = Form.useForm(); + + const logoIcon = АСБ + + const children = companies.map((line) => ( + + )); + + const checkFormErrors = (formData) => { + if(formData.login.length < 4 || formData.login.length > 50){ + setIsLengthErrorVisible(true) + form.validateFields() + return true + } + + if(formData.password.length < 4 || formData.password.length > 50) { + setIsPasswordLengthErrorVisible(true) + form.validateFields() + return true + } + + if(formData.password !== formData.confirmPassword) { + setIsPasswordMismatchErrorVisible(true) + form.validateFields() + return true + } + + return false + } + + let handleRegister = async (formData) =>{ + + if(checkFormErrors(formData)) + return + + formData.idCompany = +selectedCompanyId + + setLoader(true) + try{ + await AuthService.register(formData) + setLoader(false) + openNotification("Заявка на регистрацию отправлена.", 'success') + history.push("/login"); + }catch(e){ + openNotification(e.body, 'error') + console.error(`Error ${e}`) + setLoader(false) + } + } + + const createInput = (name, placeholder, isRequired, requiredValidationMessage, lengthValidationMessage) => { + + const rules = getValidationRules(true, requiredValidationMessage, + isLengthErrorVisible, new Error(lengthValidationMessage)) + + return ( + + } + onChange={() => { + setIsLengthErrorVisible(false) + form.validateFields() + }} + /> + + ) + } + + const createPasswordInput = (name, message, errorObj, isErrorVisible, setIsErrorVisible) => { + return ( + + (visible ? : )} + prefix={} + onChange={() => { + setIsErrorVisible(false) + form.validateFields() + }} + /> + + ) + } + + return ( +
+ +
+ {createInput('login', 'Пользователь', true, + 'Пожалуйста, введите имя!', + 'Допустимая длина логина от 3 до 50 символов!')} + {createPasswordInput('password', 'Пожалуйста, введите пароль!', + new Error('Допускаются пароли от 3х до 50ти символов'), + isPasswordLengthErrorVisible, setIsPasswordLengthErrorVisible)} + {createPasswordInput('confirmPassword', 'Пожалуйста, введите пароль повторно!', + new Error('Пароли не совпадают!'), isPasswordMismatchErrorVisible, + setIsPasswordMismatchErrorVisible)} + {createInput('name', 'Имя', false)} + {createInput('surName', 'Фамилия', false)} + {createInput('patronymic', 'Отчество',false)} + {createInput('email', 'Email',false)} + {createInput('phone', 'Номер телефона',false)} + + + + {createInput('position', 'Должность',false)} + + +
+ +
+
+ +
+ Назад +
+ +
+
+ {loader && } +
+ ) +} \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 59c2d76..39aef5a 100644 --- a/src/styles/index.css +++ b/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; +} +