81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
import {Form, Input, Button, Row, Col, Typography} from 'antd';
|
|
import {useEffect, useState} from 'react';
|
|
import {useAuth} from "../../../Hooks/AuthContext.jsx";
|
|
import {useNavigate} from "react-router-dom";
|
|
|
|
const {Title} = Typography;
|
|
|
|
const LoginPage = () => {
|
|
const {user, login} = useAuth();
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
navigate("/");
|
|
}
|
|
document.title = "Авторизация";
|
|
}, [user, navigate]);
|
|
|
|
const onFinish = async (values) => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
await login(values);
|
|
navigate("/");
|
|
} catch (error) {
|
|
setError(`Ошибка при входе: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Row justify="center" align="middle" style={{minHeight: '100vh'}}>
|
|
<Col xs={24} sm={18} md={12} lg={8} xl={6}>
|
|
<div style={{padding: 20, border: '1px solid #ddd', borderRadius: 8}}>
|
|
<Title level={2} style={{textAlign: 'center'}}>Авторизация</Title>
|
|
|
|
{error && <div style={{color: 'red', marginBottom: 15}}>{error}</div>}
|
|
|
|
<Form
|
|
name="login"
|
|
initialValues={{remember: true}}
|
|
onFinish={onFinish}
|
|
>
|
|
<Form.Item
|
|
name="login"
|
|
rules={[{required: true, message: 'Пожалуйста, введите логин'}]}
|
|
>
|
|
<Input placeholder="Логин"/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="password"
|
|
rules={[{required: true, message: 'Пожалуйста, введите пароль'}]}
|
|
>
|
|
<Input.Password placeholder="Пароль"/>
|
|
</Form.Item>
|
|
|
|
<Form.Item>
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
block
|
|
loading={loading}
|
|
>
|
|
Войти
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default LoginPage;
|