подключил регистрацию
This commit is contained in:
parent
1929318d55
commit
7bd89686a9
@ -1,6 +1,7 @@
|
|||||||
import {Button, Col, Flex, Form, Input, Select, Typography} from "antd";
|
import {Button, Col, DatePicker, Flex, Form, Input, Select, Tooltip, Typography} from "antd";
|
||||||
import {UserOutlined, MailOutlined, LockOutlined} from "@ant-design/icons";
|
import {UserOutlined, MailOutlined, LockOutlined, InfoCircleOutlined, CalendarOutlined} from "@ant-design/icons";
|
||||||
import useRegisterPage from "./useRegisterPage.js";
|
import useRegisterPage from "./useRegisterPage.js";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
const {Title, Text} = Typography;
|
const {Title, Text} = Typography;
|
||||||
|
|
||||||
@ -23,23 +24,9 @@ const RegisterPage = () => {
|
|||||||
onFinish={onFinish}
|
onFinish={onFinish}
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
>
|
>
|
||||||
<Form.Item
|
|
||||||
label="Роль"
|
|
||||||
name="role"
|
|
||||||
rules={[{required: true, message: "Выберите роль"}]}
|
|
||||||
>
|
|
||||||
<Select
|
|
||||||
placeholder="Выберите роль"
|
|
||||||
size="large"
|
|
||||||
>
|
|
||||||
<Select.Option value="student">Студент</Select.Option>
|
|
||||||
<Select.Option value="teacher">Преподаватель</Select.Option>
|
|
||||||
</Select>
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="Имя"
|
label="Имя"
|
||||||
name="firstName"
|
name="first_name"
|
||||||
rules={[{required: true, message: "Введите имя"}]}
|
rules={[{required: true, message: "Введите имя"}]}
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
@ -51,7 +38,7 @@ const RegisterPage = () => {
|
|||||||
|
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="Фамилия"
|
label="Фамилия"
|
||||||
name="lastName"
|
name="last_name"
|
||||||
rules={[{required: true, message: "Введите фамилию"}]}
|
rules={[{required: true, message: "Введите фамилию"}]}
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
@ -75,6 +62,19 @@ const RegisterPage = () => {
|
|||||||
size="large"
|
size="large"
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="birthdate"
|
||||||
|
label="Дата рождения"
|
||||||
|
rules={[{required: true, message: "Введите дату рождения"}]}
|
||||||
|
>
|
||||||
|
<DatePicker
|
||||||
|
suffixIcon={<CalendarOutlined/>}
|
||||||
|
format="DD.MM.YYYY"
|
||||||
|
style={{width: "100%"}}
|
||||||
|
size="large"
|
||||||
|
maxDate={dayjs()}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="Логин"
|
label="Логин"
|
||||||
@ -87,6 +87,13 @@ const RegisterPage = () => {
|
|||||||
size="large"
|
size="large"
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
<Tooltip
|
||||||
|
title="Пароль должен содержать не менее 8 символов, включая хотя бы одну букву и одну цифру и один специальный символ"
|
||||||
|
>
|
||||||
|
<Typography.Title level={3} style={{width: 30}}>
|
||||||
|
<InfoCircleOutlined/>
|
||||||
|
</Typography.Title>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="Пароль"
|
label="Пароль"
|
||||||
@ -105,7 +112,7 @@ const RegisterPage = () => {
|
|||||||
|
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="Подтверждение пароля"
|
label="Подтверждение пароля"
|
||||||
name="confirmPassword"
|
name="repeat_password"
|
||||||
dependencies={['password']}
|
dependencies={['password']}
|
||||||
rules={[
|
rules={[
|
||||||
{required: true, message: "Подтвердите пароль"},
|
{required: true, message: "Подтвердите пароль"},
|
||||||
|
|||||||
@ -1,9 +1,18 @@
|
|||||||
import { message } from 'antd';
|
import {message, notification} from 'antd';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import {useNavigate} from 'react-router-dom';
|
||||||
|
import {useRegisterUserMutation} from "../../../Api/usersApi.js";
|
||||||
|
|
||||||
const useRegisterPage = () => {
|
const useRegisterPage = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const [
|
||||||
|
createUser,
|
||||||
|
{
|
||||||
|
isLoading,
|
||||||
|
isError,
|
||||||
|
}
|
||||||
|
] = useRegisterUserMutation();
|
||||||
|
|
||||||
const pageContainerStyle = {
|
const pageContainerStyle = {
|
||||||
width: 450,
|
width: 450,
|
||||||
padding: 40,
|
padding: 40,
|
||||||
@ -12,10 +21,30 @@ const useRegisterPage = () => {
|
|||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
};
|
};
|
||||||
|
|
||||||
const onFinish = (values) => {
|
const onFinish = async (values) => {
|
||||||
console.log('Регистрация:', values);
|
const payload = {
|
||||||
message.success('Регистрация выполнена успешно!');
|
...values,
|
||||||
navigate('/login');
|
birthdate: values.birthdate
|
||||||
|
? values.birthdate.format("YYYY-MM-DD")
|
||||||
|
: null,
|
||||||
|
};
|
||||||
|
console.log(payload)
|
||||||
|
try {
|
||||||
|
await createUser(payload);
|
||||||
|
|
||||||
|
notification.success({
|
||||||
|
title: "Успешно",
|
||||||
|
message: "Пользователь успешно создан",
|
||||||
|
placement: "topRight",
|
||||||
|
})
|
||||||
|
navigate('/login');
|
||||||
|
} catch {
|
||||||
|
notification.error({
|
||||||
|
title: "Ошибка",
|
||||||
|
message: "Пользователь не создан",
|
||||||
|
placement: "topRight",
|
||||||
|
})
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user