95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import {Button, Form, Divider, Modal, Row, Col, Space, Notification} from '@douyinfe/semi-ui'
|
|
import {useState} from "react";
|
|
import {useNavigate} from "react-router-dom";
|
|
import {useUserinfoStore} from "../store/userinfoStore.ts";
|
|
|
|
type FieldType = {
|
|
account: string;
|
|
password: string;
|
|
};
|
|
|
|
const {Input, Checkbox} = Form
|
|
|
|
export const LoginComponent = () => {
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const navigate = useNavigate();
|
|
const {login} = useUserinfoStore()
|
|
|
|
const onFinish = async (values: FieldType) => {
|
|
|
|
setLoading(true);
|
|
try {
|
|
const user = await login(values)
|
|
setVisible(true);
|
|
navigate('/dashboard')
|
|
} catch (err) {
|
|
// 登录失败
|
|
console.log(err)
|
|
// 登录失败
|
|
Notification.error({
|
|
content: '登录失败，请检查用户名和密码'
|
|
})
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const [visible, setVisible] = useState(false);
|
|
const hideModal = () => setVisible(false)
|
|
|
|
return (<div>
|
|
<Modal
|
|
centered
|
|
visible={visible}
|
|
width={450}
|
|
footer={null}
|
|
maskClosable={false}
|
|
title='登录'
|
|
onCancel={hideModal}
|
|
>
|
|
<Form
|
|
onSubmit={onFinish}
|
|
>
|
|
<Form.Input
|
|
field="username"
|
|
placeholder="请输入用户名"
|
|
noLabel
|
|
rules={[{required: true, message: '用户名不可空'}]}
|
|
/>
|
|
<Form.Input
|
|
type="password"
|
|
field="password"
|
|
placeholder="请输入登录密码"
|
|
noLabel
|
|
rules={[{required: true, message: '密码不可空'}]}
|
|
/>
|
|
<div className='flex align-center space-between'>
|
|
<Form.Checkbox
|
|
field="remember"
|
|
value={false}
|
|
noLabel
|
|
>下次自动登录</Form.Checkbox>
|
|
<Space>
|
|
<Button theme='light' onClick={hideModal}>取消</Button>
|
|
<Button type='primary' theme='solid' loading={loading} htmlType="submit">登录</Button>
|
|
</Space>
|
|
</div>
|
|
</Form>
|
|
{/*<div style={{ padding: '30px 0 20px' }}>*/}
|
|
{/* <Divider>OR</Divider>*/}
|
|
{/* <div className="text-center" style={{ marginTop: 20 }}>*/}
|
|
{/* <Space>*/}
|
|
{/* <Button icon={<GoogleOutlined />}>GOOGLE</Button>*/}
|
|
{/* <Button theme='solid' type="primary" icon={<GithubOutlined />}>GITHUB</Button>*/}
|
|
{/* </Space>*/}
|
|
{/* </div>*/}
|
|
{/*</div>*/}
|
|
</Modal>
|
|
{visible ? 'xxx' : '0000'}
|
|
<Button type="primary" onClick={() => {
|
|
setVisible(true)
|
|
// Modal.success({ title: 'This is a success message', content: 'bla bla bla...' });
|
|
}}>点击登录</Button>
|
|
</div>)
|
|
}
|