141 lines
3.7 KiB
TypeScript
141 lines
3.7 KiB
TypeScript
import { usercontrollerGetuser, usercontrollerLogin } from '@/servers/api/user';
|
|
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
|
import {
|
|
LoginFormPage,
|
|
ProConfigProvider,
|
|
ProFormText,
|
|
} from '@ant-design/pro-components';
|
|
import { history, useModel } from '@umijs/max';
|
|
import { App, theme } from 'antd';
|
|
import {useDeviceFingerprint} from '@/hooks/useDeviceFingerprint';
|
|
import { useState } from 'react';
|
|
|
|
const Page = () => {
|
|
const { setInitialState } = useModel('@@initialState');
|
|
const { token } = theme.useToken();
|
|
const { message } = App.useApp();
|
|
const deviceId = useDeviceFingerprint();
|
|
const [ isAuth, setIsAuth ] = useState(false)
|
|
|
|
console.log(deviceId) ;
|
|
|
|
const onFinish = async (values: { username: string; password: string }) => {
|
|
try {
|
|
const { data, success, code, message: msg } = await usercontrollerLogin({...values, deviceId});
|
|
if (success) {
|
|
message.success('登录成功');
|
|
localStorage.setItem('token', data?.token as string);
|
|
const { data: user } = await usercontrollerGetuser();
|
|
setInitialState({ user });
|
|
history.push('/');
|
|
return
|
|
}
|
|
if(code === 10001){
|
|
message.info("验证码已发送至管理邮箱")
|
|
setIsAuth(true);
|
|
return;
|
|
}
|
|
message.error(msg);
|
|
|
|
} catch {
|
|
message.error('登录失败');
|
|
}
|
|
};
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundColor: 'white',
|
|
height: '100vh',
|
|
}}
|
|
>
|
|
<LoginFormPage
|
|
backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
|
|
backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
|
|
title="Yoone"
|
|
containerStyle={{
|
|
backgroundColor: 'rgba(0, 0, 0,0.65)',
|
|
backdropFilter: 'blur(4px)',
|
|
}}
|
|
onFinish={onFinish}
|
|
>
|
|
<ProFormText
|
|
name="username"
|
|
fieldProps={{
|
|
size: 'large',
|
|
prefix: (
|
|
<UserOutlined
|
|
style={{
|
|
color: token.colorText,
|
|
}}
|
|
className={'prefixIcon'}
|
|
/>
|
|
),
|
|
}}
|
|
placeholder={'请输入用户名!'}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请输入用户名!',
|
|
},
|
|
]}
|
|
/>
|
|
<ProFormText.Password
|
|
name="password"
|
|
fieldProps={{
|
|
size: 'large',
|
|
prefix: (
|
|
<LockOutlined
|
|
style={{
|
|
color: token.colorText,
|
|
}}
|
|
className={'prefixIcon'}
|
|
/>
|
|
),
|
|
}}
|
|
placeholder={'请输入密码！'}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请输入密码！',
|
|
},
|
|
]}
|
|
/>
|
|
{
|
|
isAuth?
|
|
<ProFormText
|
|
name="authCode"
|
|
label="验证码"
|
|
width="lg"
|
|
placeholder="请输入验证码"
|
|
rules={[{ required: true, message: '请输入验证码' }]}
|
|
/>:<></>
|
|
}
|
|
{/* <div
|
|
style={{
|
|
marginBlockEnd: 24,
|
|
}}
|
|
>
|
|
<ProFormCheckbox noStyle name="autoLogin">
|
|
自动登录
|
|
</ProFormCheckbox>
|
|
<a
|
|
style={{
|
|
float: 'right',
|
|
}}
|
|
>
|
|
忘记密码
|
|
</a>
|
|
</div> */}
|
|
</LoginFormPage>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default () => {
|
|
return (
|
|
<ProConfigProvider>
|
|
<Page />
|
|
</ProConfigProvider>
|
|
);
|
|
};
|