ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CF2-85: Added base registration page

Browse Source
This commit is contained in:
KharchenkoVladimir 2021-10-21 17:27:53 +05:00
parent 2f9efe938c
commit aaa26161da
6 changed files with 337 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -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>

21
src/pages/Login.jsx
View File

@ -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">
Вход
</Button>
<div className='login-button'>
<Button type="primary" htmlType="submit">
Вход
</Button>
</div>
</Form.Item>
<div className='text-align-center'>
<Link to={`/register`}>Отправить заявку на регистрацию</Link>
</div>
</Form>
</Card>
{loader && <Loader/>}

297
src/pages/Register.jsx Normal file
View File

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

3
src/services/api/models/UserDto.ts
View File

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

3
src/services/api/models/UserTokenDto.ts
View File

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

14
src/styles/index.css
View File

@ -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;
}