128 lines
4.6 KiB
JavaScript
128 lines
4.6 KiB
JavaScript
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { Button, Form, Input, Typography } from 'antd';
|
|
import axios from 'axios';
|
|
// import { dispatchBox, dispatchToken } from 'features/Login/loginSlice';
|
|
import React, { useState } from 'react';
|
|
// import { useDispatch } from 'react-redux';
|
|
// import { useHistory } from "react-router-dom";
|
|
import { HOST } from '../../config/index';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const Login = () => {
|
|
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// const dispatch = useDispatch();
|
|
|
|
// let history = useHistory();
|
|
|
|
const onFinish = async (values) => {
|
|
setLoading(true);
|
|
const dataReq = {
|
|
email: values.email,
|
|
password: values.password,
|
|
}
|
|
|
|
await axios({
|
|
method: 'POST',
|
|
url: `${HOST}/api/login`,
|
|
headers: {},
|
|
data: dataReq
|
|
}).then((res) => {
|
|
if (res.data.status === 10000) {
|
|
// dispatch(dispatchToken({ token: 'Bearer ' + res.data.access_token }));
|
|
// dispatch(dispatchBox({ rule: res.data.user_info.rule }))
|
|
setError('');
|
|
localStorage.setItem('refresh_token', 'Bearer ' + res.data.refresh_token);
|
|
localStorage.setItem('access_token', 'Bearer ' + res.data.access_token);
|
|
localStorage.setItem('rule', res.data.user_info.rule);
|
|
|
|
// history.push('/preferential-management')
|
|
} else {
|
|
setError('Sai tài khoản hoặc mật khẩu');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
setError('Vui lòng kiểm tra lại đường truyền mạng')
|
|
console.error(err);
|
|
})
|
|
setLoading(false);
|
|
};
|
|
|
|
const onFinishFailed = (errorInfo) => {
|
|
console.log('Failed:', errorInfo);
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="login__page">
|
|
<div className="login__form">
|
|
<div className="login__sec">
|
|
<h2 className="login__text">Đăng nhập</h2>
|
|
<Form
|
|
layout="vertical"
|
|
name="normal_login"
|
|
className="login-form"
|
|
initialValues={{
|
|
remember: true,
|
|
}}
|
|
onFinish={onFinish}
|
|
onFinishFailed={onFinishFailed}
|
|
>
|
|
<Form.Item
|
|
name="email"
|
|
label="Email"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '',
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
className="input__Cus"
|
|
prefix={<UserOutlined className="site-form-item-icon" />}
|
|
placeholder="Email" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
label="Mật khẩu"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '',
|
|
},
|
|
]}
|
|
>
|
|
<Input.Password
|
|
className="input__Cus"
|
|
prefix={<LockOutlined className="site-form-item-icon" />}
|
|
type="password"
|
|
placeholder="Password"
|
|
/>
|
|
</Form.Item>
|
|
<div className="login__error">
|
|
{error && <Text strong="true" className="hide__error" type="danger">* Sai tài khoản mật khẩu </Text>}
|
|
</div>
|
|
<Form.Item>
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
loading={loading}
|
|
className="login-form-button"
|
|
>
|
|
Đăng nhập
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Login; |