forked from ddrilling/asb_cloud_front
CF2-85: Added register form validation
This commit is contained in:
KharchenkoVladimir
parent
aaa26161da
commit
2f6e2fbc4e
@ -1,13 +1,16 @@
|
||||
import { Card, Form, Input, Select, Button, notification } from 'antd';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons'
|
||||
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 openNotificationError = (message, title) => {
|
||||
notification['error']({
|
||||
const openNotification = (message, type, title) => {
|
||||
notification[type]({
|
||||
message: title||'Ошибка',
|
||||
description: message,
|
||||
});
|
||||
@ -22,9 +25,30 @@ const companies = [
|
||||
{ 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 [isErrorVisible, setErrorVisible] = 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();
|
||||
@ -35,251 +59,128 @@ export default function Register() {
|
||||
<Option key={line.value}>{line.name}</Option>
|
||||
));
|
||||
|
||||
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)
|
||||
openNotificationError("Заявка на регистрацию отправлена. ")
|
||||
openNotification("Заявка на регистрацию отправлена.", 'success')
|
||||
history.push("/login");
|
||||
}catch(e){
|
||||
if(e.status === 400)
|
||||
openNotificationError(e.message)
|
||||
openNotification(e.message, 'error')
|
||||
console.error(`Error ${e}`)
|
||||
|
||||
setErrorVisible(true)
|
||||
form.validateFields()
|
||||
setLoader(false)
|
||||
}
|
||||
}
|
||||
|
||||
const showError = (isErrorVisible, errorObj) => {
|
||||
if (isErrorVisible)
|
||||
return Promise.reject(errorObj)
|
||||
const createInput = (name, placeholder, isRequired, requiredValidationMessage, lengthValidationMessage) => {
|
||||
|
||||
return Promise.resolve()
|
||||
const rules = getValidationRules(true, requiredValidationMessage,
|
||||
isLengthErrorVisible, new Error(lengthValidationMessage))
|
||||
|
||||
return (
|
||||
<Form.Item
|
||||
name={name}
|
||||
rules={isRequired ? rules : []}
|
||||
>
|
||||
<Input
|
||||
placeholder={placeholder}
|
||||
prefix={<UserOutlined />}
|
||||
onChange={() => {
|
||||
setIsLengthErrorVisible(false)
|
||||
form.validateFields()
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
)
|
||||
}
|
||||
|
||||
const createPasswordInput = (name, message, errorObj, isErrorVisible, setIsErrorVisible) => {
|
||||
return (
|
||||
<Form.Item
|
||||
name={name}
|
||||
rules={getValidationRules(true, message, isErrorVisible, errorObj)}
|
||||
>
|
||||
<Input.Password
|
||||
placeholder='Подтверждение пароля'
|
||||
iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
|
||||
prefix={<LockOutlined />}
|
||||
onChange={() => {
|
||||
setIsErrorVisible(false)
|
||||
form.validateFields()
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
{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', 'Отчество',false)}
|
||||
{createInput('phone', 'Номер телефона',false)}
|
||||
<Form.Item
|
||||
name="idCompany"
|
||||
initialValue={companies[0].name}
|
||||
rules={[
|
||||
{ required: true, message: 'Пожалуйста, выберите компанию' },
|
||||
() => ({
|
||||
validator() {
|
||||
return showError(isErrorVisible)
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
placeholder="Выберите компанию"
|
||||
className="filter-selector"
|
||||
className="m-0"
|
||||
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>
|
||||
{createInput('position', 'Должность',false)}
|
||||
|
||||
<Form.Item>
|
||||
<div className='register-button'>
|
||||
<Button type="primary" htmlType="submit">
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
>
|
||||
Зарегистрироваться
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user