73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Link, useNavigate } from 'react-router-dom';
|
||
import { Button, Form, Input } from 'antd';
|
||
import { } from '../core/api/Api'
|
||
import IRegisterRequest from '../Requests/RegisterRequest';
|
||
import Text from 'antd/es/typography/Text';
|
||
import { createUser } from '../API/api';
|
||
|
||
export function RegisterPage () {
|
||
const [name, setName] = useState('');
|
||
const [email, setEmail] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const navigate = useNavigate();
|
||
|
||
const handleFinish = async () => {
|
||
// Create the user data object to send to the API
|
||
const userData: IRegisterRequest = {
|
||
name,
|
||
email,
|
||
password,
|
||
};
|
||
|
||
try {
|
||
if (!navigator.onLine) {
|
||
alert('No internet connection');
|
||
return;
|
||
}
|
||
const response = await createUser(userData); // Pass the userData object
|
||
|
||
if (response) {
|
||
navigate('/login'); // Redirect to the login page after successful registration
|
||
alert('Пользователь успешно зарегестрирован!');
|
||
} else {
|
||
console.error('Error registering:');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error registering:', error, userData);
|
||
alert('Error registering');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="container mx-auto" style={{ maxWidth: '20%', marginTop: '200px'}}>
|
||
<Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '40px', marginTop: '20px'}}>Регистрация</Text>
|
||
<Form onFinish={handleFinish}>
|
||
<Form.Item label="Имя" name="name" rules={[{ required: true, message: 'Пожалуйста, введите имя!' }]}>
|
||
<Input value={name} onChange={e => setName(e.target.value)} />
|
||
</Form.Item>
|
||
<Form.Item label="Email" name="email" rules={[{ required: true, type: 'email', message: 'Пожалуйста, введите корректный адрес почты!' }]}>
|
||
<Input value={email} onChange={e => setEmail(e.target.value)} />
|
||
</Form.Item>
|
||
<Form.Item label="Пароль" name="password" rules={[{ required: true, min: 8, message: 'Пароль должен содержать не менее 8 символов!' }]}>
|
||
<Input
|
||
type="password"
|
||
value={password}
|
||
onChange={e => setPassword(e.target.value)}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type="primary" htmlType="submit">
|
||
Регистрация
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
<p>
|
||
Уже есть аккаунт? <Link to="/login">Войдите</Link>
|
||
</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default RegisterPage;
|