83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import React, {useEffect, useRef, useState} from "react";
|
|
import {IconGithubLogo, IconWeibo} from "@douyinfe/semi-icons";
|
|
import css from './index.module.scss'
|
|
import {LoginComponent} from "../../components/LoginComponent.tsx";
|
|
import {useNavigate} from "react-router-dom";
|
|
import {useUserinfoStore} from "../../store/userinfoStore.ts";
|
|
import {Button, Divider, Form, Modal, Notification, Space} from "@douyinfe/semi-ui";
|
|
import {cx} from "@emotion/css";
|
|
|
|
const DefaultPage: React.FC = () => {
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const navigate = useNavigate();
|
|
const {login, userinfo} = useUserinfoStore()
|
|
|
|
const onFinish = async (values: any) => {
|
|
setLoading(true);
|
|
try {
|
|
const user = await login(values)
|
|
navigate('/dashboard')
|
|
} catch (err) {
|
|
// 登录失败
|
|
console.log(err)
|
|
// 登录失败
|
|
Notification.error({
|
|
content: '登录失败，请检查用户名和密码',
|
|
position: 'top',
|
|
// duration: 2,
|
|
})
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
if (userinfo && userinfo.id > 0) {
|
|
navigate('/dashboard')
|
|
}
|
|
}, [userinfo])
|
|
|
|
return (<div className={css.index}>
|
|
{/*<LoginComponent/>*/}
|
|
<div className={css.loginWrapper}>
|
|
<h2 className={cx('text-center', css.title)}>登录</h2>
|
|
<Form
|
|
onSubmit={onFinish}
|
|
>
|
|
<Form.Input
|
|
field="account"
|
|
placeholder="请输入用户名"
|
|
noLabel
|
|
rules={[{required: true, message: '用户名不可空'}]}
|
|
/>
|
|
<Form.Input
|
|
type="password"
|
|
field="password"
|
|
placeholder="请输入登录密码"
|
|
noLabel
|
|
rules={[{required: true, message: '密码不可空'}]}
|
|
/>
|
|
<Form.Checkbox
|
|
field="remember"
|
|
value={false}
|
|
noLabel
|
|
>下次自动登录</Form.Checkbox>
|
|
<div className='flex align-center space-between'>
|
|
<Button block type='primary' theme='solid' loading={loading} htmlType="submit">登录</Button>
|
|
</div>
|
|
</Form>
|
|
<div style={{padding: '30px 0 20px'}}>
|
|
<Divider>OR</Divider>
|
|
<div className="text-center" style={{marginTop: 20}}>
|
|
<Space>
|
|
<Button icon={<IconWeibo/>}>GOOGLE</Button>
|
|
<Button theme='solid' type="primary" icon={<IconGithubLogo/>}>GITHUB</Button>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>);
|
|
}
|
|
export default DefaultPage;
|