期贤
4 years ago
4 changed files with 338 additions and 3 deletions
@ -0,0 +1,48 @@ |
|||||
|
@import (reference) '~antd/es/style/themes/index'; |
||||
|
|
||||
|
.container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100vh; |
||||
|
overflow: auto; |
||||
|
background: @layout-body-background; |
||||
|
} |
||||
|
|
||||
|
.lang { |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
line-height: 44px; |
||||
|
text-align: right; |
||||
|
:global(.ant-dropdown-trigger) { |
||||
|
margin-right: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
flex: 1; |
||||
|
padding: 32px 0; |
||||
|
} |
||||
|
|
||||
|
@media (min-width: @screen-md-min) { |
||||
|
.container { |
||||
|
background-image: url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr'); |
||||
|
background-size: cover; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 32px 0 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
margin-left: 8px; |
||||
|
color: rgba(0, 0, 0, 0.2); |
||||
|
font-size: 24px; |
||||
|
vertical-align: middle; |
||||
|
cursor: pointer; |
||||
|
transition: color 0.3s; |
||||
|
|
||||
|
&:hover { |
||||
|
color: @primary-color; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,290 @@ |
|||||
|
import Footer from '@/components/Footer'; |
||||
|
import { login } from '@/services/ant-design-pro/api'; |
||||
|
import { getFakeCaptcha } from '@/services/ant-design-pro/login'; |
||||
|
import { |
||||
|
AlipayCircleOutlined, |
||||
|
LockOutlined, |
||||
|
MobileOutlined, |
||||
|
TaobaoCircleOutlined, |
||||
|
UserOutlined, |
||||
|
WeiboCircleOutlined, |
||||
|
} from '@ant-design/icons'; |
||||
|
import { |
||||
|
LoginForm, |
||||
|
ProFormCaptcha, |
||||
|
ProFormCheckbox, |
||||
|
ProFormText, |
||||
|
} from '@ant-design/pro-components'; |
||||
|
import { FormattedMessage, history, SelectLang, useIntl, useModel } from '@umijs/max'; |
||||
|
import { Alert, message, Tabs } from 'antd'; |
||||
|
import React, { useState } from 'react'; |
||||
|
import styles from './index.less'; |
||||
|
|
||||
|
const LoginMessage: React.FC<{ |
||||
|
content: string; |
||||
|
}> = ({ content }) => { |
||||
|
return ( |
||||
|
<Alert |
||||
|
style={{ |
||||
|
marginBottom: 24, |
||||
|
}} |
||||
|
message={content} |
||||
|
type="error" |
||||
|
showIcon |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const Login: React.FC = () => { |
||||
|
const [userLoginState, setUserLoginState] = useState<API.LoginResult>({}); |
||||
|
const [type, setType] = useState<string>('account'); |
||||
|
const { initialState, setInitialState } = useModel('@@initialState'); |
||||
|
|
||||
|
const intl = useIntl(); |
||||
|
|
||||
|
const fetchUserInfo = async () => { |
||||
|
const userInfo = await initialState?.fetchUserInfo?.(); |
||||
|
if (userInfo) { |
||||
|
await setInitialState((s) => ({ |
||||
|
...s, |
||||
|
currentUser: userInfo, |
||||
|
})); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const handleSubmit = async (values: API.LoginParams) => { |
||||
|
try { |
||||
|
// 登录
|
||||
|
const msg = await login({ ...values, type }); |
||||
|
if (msg.status === 'ok') { |
||||
|
const defaultLoginSuccessMessage = intl.formatMessage({ |
||||
|
id: 'pages.login.success', |
||||
|
defaultMessage: '登录成功！', |
||||
|
}); |
||||
|
message.success(defaultLoginSuccessMessage); |
||||
|
await fetchUserInfo(); |
||||
|
const urlParams = new URL(window.location.href).searchParams; |
||||
|
history.push(urlParams.get('redirect') || '/'); |
||||
|
return; |
||||
|
} |
||||
|
console.log(msg); |
||||
|
// 如果失败去设置用户错误信息
|
||||
|
setUserLoginState(msg); |
||||
|
} catch (error) { |
||||
|
const defaultLoginFailureMessage = intl.formatMessage({ |
||||
|
id: 'pages.login.failure', |
||||
|
defaultMessage: '登录失败，请重试！', |
||||
|
}); |
||||
|
console.log(error); |
||||
|
message.error(defaultLoginFailureMessage); |
||||
|
} |
||||
|
}; |
||||
|
const { status, type: loginType } = userLoginState; |
||||
|
|
||||
|
return ( |
||||
|
<div className={styles.container}> |
||||
|
<div className={styles.lang} data-lang> |
||||
|
{SelectLang && <SelectLang />} |
||||
|
</div> |
||||
|
<div className={styles.content}> |
||||
|
<LoginForm |
||||
|
logo={<img alt="logo" src="/logo.svg" />} |
||||
|
title="Ant Design" |
||||
|
subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })} |
||||
|
initialValues={{ |
||||
|
autoLogin: true, |
||||
|
}} |
||||
|
actions={[ |
||||
|
<FormattedMessage |
||||
|
key="loginWith" |
||||
|
id="pages.login.loginWith" |
||||
|
defaultMessage="其他登录方式" |
||||
|
/>, |
||||
|
<AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.icon} />, |
||||
|
<TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.icon} />, |
||||
|
<WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.icon} />, |
||||
|
]} |
||||
|
onFinish={async (values) => { |
||||
|
await handleSubmit(values as API.LoginParams); |
||||
|
}} |
||||
|
> |
||||
|
<Tabs activeKey={type} onChange={setType}> |
||||
|
<Tabs.TabPane |
||||
|
key="account" |
||||
|
tab={intl.formatMessage({ |
||||
|
id: 'pages.login.accountLogin.tab', |
||||
|
defaultMessage: '账户密码登录', |
||||
|
})} |
||||
|
/> |
||||
|
<Tabs.TabPane |
||||
|
key="mobile" |
||||
|
tab={intl.formatMessage({ |
||||
|
id: 'pages.login.phoneLogin.tab', |
||||
|
defaultMessage: '手机号登录', |
||||
|
})} |
||||
|
/> |
||||
|
</Tabs> |
||||
|
|
||||
|
{status === 'error' && loginType === 'account' && ( |
||||
|
<LoginMessage |
||||
|
content={intl.formatMessage({ |
||||
|
id: 'pages.login.accountLogin.errorMessage', |
||||
|
defaultMessage: '账户或密码错误(admin/ant.design)', |
||||
|
})} |
||||
|
/> |
||||
|
)} |
||||
|
{type === 'account' && ( |
||||
|
<> |
||||
|
<ProFormText |
||||
|
name="username" |
||||
|
fieldProps={{ |
||||
|
size: 'large', |
||||
|
prefix: <UserOutlined className={styles.prefixIcon} />, |
||||
|
}} |
||||
|
placeholder={intl.formatMessage({ |
||||
|
id: 'pages.login.username.placeholder', |
||||
|
defaultMessage: '用户名: admin or user', |
||||
|
})} |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: ( |
||||
|
<FormattedMessage |
||||
|
id="pages.login.username.required" |
||||
|
defaultMessage="请输入用户名!" |
||||
|
/> |
||||
|
), |
||||
|
}, |
||||
|
]} |
||||
|
/> |
||||
|
<ProFormText.Password |
||||
|
name="password" |
||||
|
fieldProps={{ |
||||
|
size: 'large', |
||||
|
prefix: <LockOutlined className={styles.prefixIcon} />, |
||||
|
}} |
||||
|
placeholder={intl.formatMessage({ |
||||
|
id: 'pages.login.password.placeholder', |
||||
|
defaultMessage: '密码: ant.design', |
||||
|
})} |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: ( |
||||
|
<FormattedMessage |
||||
|
id="pages.login.password.required" |
||||
|
defaultMessage="请输入密码！" |
||||
|
/> |
||||
|
), |
||||
|
}, |
||||
|
]} |
||||
|
/> |
||||
|
</> |
||||
|
)} |
||||
|
|
||||
|
{status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />} |
||||
|
{type === 'mobile' && ( |
||||
|
<> |
||||
|
<ProFormText |
||||
|
fieldProps={{ |
||||
|
size: 'large', |
||||
|
prefix: <MobileOutlined className={styles.prefixIcon} />, |
||||
|
}} |
||||
|
name="mobile" |
||||
|
placeholder={intl.formatMessage({ |
||||
|
id: 'pages.login.phoneNumber.placeholder', |
||||
|
defaultMessage: '手机号', |
||||
|
})} |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: ( |
||||
|
<FormattedMessage |
||||
|
id="pages.login.phoneNumber.required" |
||||
|
defaultMessage="请输入手机号！" |
||||
|
/> |
||||
|
), |
||||
|
}, |
||||
|
{ |
||||
|
pattern: /^1\d{10}$/, |
||||
|
message: ( |
||||
|
<FormattedMessage |
||||
|
id="pages.login.phoneNumber.invalid" |
||||
|
defaultMessage="手机号格式错误！" |
||||
|
/> |
||||
|
), |
||||
|
}, |
||||
|
]} |
||||
|
/> |
||||
|
<ProFormCaptcha |
||||
|
fieldProps={{ |
||||
|
size: 'large', |
||||
|
prefix: <LockOutlined className={styles.prefixIcon} />, |
||||
|
}} |
||||
|
captchaProps={{ |
||||
|
size: 'large', |
||||
|
}} |
||||
|
placeholder={intl.formatMessage({ |
||||
|
id: 'pages.login.captcha.placeholder', |
||||
|
defaultMessage: '请输入验证码', |
||||
|
})} |
||||
|
captchaTextRender={(timing, count) => { |
||||
|
if (timing) { |
||||
|
return `${count} ${intl.formatMessage({ |
||||
|
id: 'pages.getCaptchaSecondText', |
||||
|
defaultMessage: '获取验证码', |
||||
|
})}`;
|
||||
|
} |
||||
|
return intl.formatMessage({ |
||||
|
id: 'pages.login.phoneLogin.getVerificationCode', |
||||
|
defaultMessage: '获取验证码', |
||||
|
}); |
||||
|
}} |
||||
|
name="captcha" |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: ( |
||||
|
<FormattedMessage |
||||
|
id="pages.login.captcha.required" |
||||
|
defaultMessage="请输入验证码！" |
||||
|
/> |
||||
|
), |
||||
|
}, |
||||
|
]} |
||||
|
onGetCaptcha={async (phone) => { |
||||
|
const result = await getFakeCaptcha({ |
||||
|
phone, |
||||
|
}); |
||||
|
if (result === false) { |
||||
|
return; |
||||
|
} |
||||
|
message.success('获取验证码成功！验证码为：1234'); |
||||
|
}} |
||||
|
/> |
||||
|
</> |
||||
|
)} |
||||
|
<div |
||||
|
style={{ |
||||
|
marginBottom: 24, |
||||
|
}} |
||||
|
> |
||||
|
<ProFormCheckbox noStyle name="autoLogin"> |
||||
|
<FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" /> |
||||
|
</ProFormCheckbox> |
||||
|
<a |
||||
|
style={{ |
||||
|
float: 'right', |
||||
|
}} |
||||
|
> |
||||
|
<FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" /> |
||||
|
</a> |
||||
|
</div> |
||||
|
</LoginForm> |
||||
|
</div> |
||||
|
<Footer /> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Login; |
||||
Loading…
Reference in new issue