94 lines
3.3 KiB
JavaScript
94 lines
3.3 KiB
JavaScript
import { useState } from 'react';
|
|
import axios from 'axios';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Header from './Header';
|
|
|
|
const Registration = () => {
|
|
const navigate = useNavigate();
|
|
const [username, setuserName] = useState('');
|
|
const [display_name, setdisplayName] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [password_confirm, setPassword_confirm] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
|
|
// Добавление пользователя
|
|
const addUser = async (e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const newUser = { username, display_name, password, password_confirm};
|
|
await axios.post('/api/users/register', newUser);
|
|
alert('Регистрация успешна! Перейдите на страницу входа.');
|
|
navigate('/login');
|
|
setuserName('');
|
|
setPassword('');
|
|
setPassword_confirm('');
|
|
} catch (err) {
|
|
setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleLoginClick = () => {
|
|
navigate('/login'); // Переход к входу
|
|
};
|
|
|
|
return (
|
|
<><Header />
|
|
<div className="login-page">
|
|
<h2>Регистрация</h2>
|
|
{
|
|
error && <div className="error">{error}</div>
|
|
}
|
|
<form onSubmit={addUser}>
|
|
<div>
|
|
<label>Логин:</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setuserName(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Никнейм:</label>
|
|
<input
|
|
type="text"
|
|
value={display_name}
|
|
onChange={(e) => setdisplayName(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Пароль:</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Подтверждение пароля:</label>
|
|
<input
|
|
type="password"
|
|
value={password_confirm}
|
|
onChange={(e) => setPassword_confirm(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<button type="submit" disabled={loading}>
|
|
{loading ? 'Регистрация...' : 'Зарегистрироваться'}
|
|
</button>
|
|
</form>
|
|
<button onClick={handleLoginClick}>
|
|
Уже есть аккаунт? Войти
|
|
</button>
|
|
</div></>
|
|
);
|
|
}
|
|
|
|
export default Registration;
|