108 lines
2.8 KiB
TypeScript
108 lines
2.8 KiB
TypeScript
import React from 'react';
|
||
import { Form, Input, Button, Typography, message } from 'antd';
|
||
import {
|
||
EyeInvisibleOutlined,
|
||
EyeTwoTone,
|
||
UserOutlined,
|
||
} from '@ant-design/icons';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { AuthService } from '@/services/authService';
|
||
import { Auth } from '@/types/auth';
|
||
|
||
const { Text, Link } = Typography;
|
||
|
||
export default function LoginPage() {
|
||
const navigate = useNavigate();
|
||
|
||
const onFinish = async (values: any) => {
|
||
await AuthService.login(values as Auth);
|
||
navigate('/');
|
||
};
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
height: '100vh',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: '100%',
|
||
maxWidth: 472,
|
||
padding: 24,
|
||
background: '#fff',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div style={{ marginBottom: 32 }}>
|
||
<img
|
||
src="./icons/logo.svg"
|
||
alt="logo"
|
||
style={{ width: 128, height: 128, marginBottom: 16 }}
|
||
/>
|
||
</div>
|
||
|
||
<Form
|
||
name="login"
|
||
onFinish={onFinish}
|
||
layout="vertical"
|
||
>
|
||
<Form.Item
|
||
name="login"
|
||
rules={[{ required: true, message: 'Введите login' }]}
|
||
>
|
||
<Input size="large" placeholder="Логин" prefix={<UserOutlined />} />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="password"
|
||
rules={[{ required: true, message: 'Введите пароль' }]}
|
||
>
|
||
<Input.Password
|
||
size="large"
|
||
placeholder="Пароль"
|
||
iconRender={(visible) =>
|
||
visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
|
||
}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<Button
|
||
type="primary"
|
||
htmlType="submit"
|
||
block
|
||
size="large"
|
||
style={{
|
||
backgroundColor: '#C2DA3D',
|
||
borderColor: '#C2DA3D',
|
||
color: '#000',
|
||
}}
|
||
>
|
||
Войти
|
||
</Button>
|
||
</Form.Item>
|
||
|
||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||
Нажимая кнопку Войти, Вы полностью принимаете{' '}
|
||
<Link href="/offer" target="_blank">
|
||
Публичную оферту
|
||
</Link>{' '}
|
||
и{' '}
|
||
<Link href="/privacy" target="_blank">
|
||
Политику обработки персональных данных
|
||
</Link>
|
||
</Text>
|
||
</Form>
|
||
|
||
<div style={{ marginTop: 256 }}>
|
||
<Link href="/forgot-password">Забыли пароль?</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|