Merge remote-tracking branch 'origin/master'

pull/59/head
shao1121353141 2023-09-26 22:17:38 +08:00
commit 2a0407994d
10 changed files with 257 additions and 273 deletions

View File

@ -13,7 +13,7 @@
-------------------------- --------------------------
<div align="center">⭐️ 如果你喜欢 TopIAM请给它一个 Star您的支持将是我们前行的动力。</div> <div align="center">⭐️ 如果你喜欢 TOPIAM请给它一个 Star您的支持将是我们前行的动力。</div>
-------------------------- --------------------------

View File

@ -68,7 +68,7 @@ export async function getInitialState(): Promise<{
/** /**
* *
*/ */
console.log('%c欢迎使用 TopIAM 企业数字身份管控平台', 'font-size: 24px;'); console.log('%c欢迎使用 TOPIAM 企业数字身份管控平台', 'font-size: 24px;');
return { return {
fetchUserInfo, fetchUserInfo,
currentUser: isLoginPath() ? undefined : await fetchUserInfo(), currentUser: isLoginPath() ? undefined : await fetchUserInfo(),

View File

@ -22,7 +22,7 @@ import Marquee from 'react-fast-marquee';
const message = () => { const message = () => {
return ( return (
<> <>
<span> TopIAM Star </span> <span> TOPIAM Star </span>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/topiam/eiam"> <a target="_blank" rel="noopener noreferrer" href="https://github.com/topiam/eiam">
GitHub GitHub
</a> </a>

View File

@ -121,7 +121,7 @@ const Welcome: React.FC = () => {
color: '#1A1A1A', color: '#1A1A1A',
}} }}
> >
使 TopIAM 使 TOPIAM
</div> </div>
<p <p
style={{ style={{

View File

@ -22,7 +22,7 @@ import Marquee from 'react-fast-marquee';
const message = () => { const message = () => {
return ( return (
<> <>
<span> TopIAM Star </span> <span> TOPIAM Star </span>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/topiam/eiam"> <a target="_blank" rel="noopener noreferrer" href="https://github.com/topiam/eiam">
GitHub GitHub
</a> </a>

View File

@ -24,7 +24,7 @@ const currentYear = new Date().getFullYear();
export default (props: FooterProps) => ( export default (props: FooterProps) => (
<DefaultFooter <DefaultFooter
style={{ backgroundColor: 'transparent' }} style={{ backgroundColor: 'transparent' }}
copyright={`2020-${currentYear} TopIAM 版权所有`} copyright={`2022-${currentYear} TOPIAM 版权所有`}
links={[ links={[
{ {
key: 'website', key: 'website',

View File

@ -20,9 +20,9 @@ import { ICON_LIST } from '@/components/IconFont/constant';
import { IDP_TYPE, RESULT_STATE, SESSION_STATUS } from '@/constants'; import { IDP_TYPE, RESULT_STATE, SESSION_STATUS } from '@/constants';
import { getCurrentStatus, getLoginEncryptSecret } from '@/services'; import { getCurrentStatus, getLoginEncryptSecret } from '@/services';
import { aesEcbEncrypt } from '@/utils/aes'; import { aesEcbEncrypt } from '@/utils/aes';
import { ProCard, ProForm, ProFormCheckbox, ProFormInstance } from '@ant-design/pro-components'; import { ProForm, ProFormCheckbox, ProFormInstance } from '@ant-design/pro-components';
import { useAsyncEffect, useRequest, useSafeState } from 'ahooks'; import { useAsyncEffect, useRequest, useSafeState } from 'ahooks';
import { Alert, App, Avatar, Skeleton, Space, Spin, Tabs, Tooltip } from 'antd'; import { Alert, App, Avatar, Space, Spin, Tabs, Tooltip } from 'antd';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { FormattedMessage, Helmet, history, useIntl } from '@umijs/max'; import { FormattedMessage, Helmet, history, useIntl } from '@umijs/max';
@ -36,12 +36,11 @@ import { accountLogin, getLoginConfig, otpLogin } from './service';
import useStyle from './style'; import useStyle from './style';
import { goto } from './utils'; import { goto } from './utils';
import queryString from 'query-string'; import queryString from 'query-string';
import Banner from '@/components/Banner';
import { omit } from 'lodash'; import { omit } from 'lodash';
import { emailValidator } from '@/utils/utils'; import { emailValidator } from '@/utils/utils';
import PageLoading from '@/components/PageLoading';
const prefixCls = 'topiam-login'; const prefixCls = 'topiam-login';
const showBanner = process.env.PREVIEW_ENV || process.env.NODE_ENV === 'development';
/** /**
* *
@ -313,284 +312,273 @@ const Login = () => {
<Helmet> <Helmet>
<link rel="icon" href={'/favicon.ico'} /> <link rel="icon" href={'/favicon.ico'} />
</Helmet> </Helmet>
{showBanner && ( {statusLoading || loginConfigLoading ? (
<div className={`${prefixCls}-banner`}> <PageLoading />
<Banner /> ) : (
</div> <div className={`${prefixCls}-container`}>
)} <div className={`${prefixCls}-content`}>
<div className={`${prefixCls}-container`}> <div className={`${prefixCls}-card`}>
<div className={`${prefixCls}-content`}> {/*登录*/}
<div className={`${prefixCls}-card`}> {!status && !forgetPassword && (
{statusLoading ? ( <>
<ProCard> <div className={`${prefixCls}-top`}>
<Skeleton loading={statusLoading} paragraph={{ rows: 5 }}></Skeleton> <img alt="logo" className={`${prefixCls}-logo`} src={'/full-logo.svg'} />
</ProCard> <div className={`${prefixCls}-desc`}>
) : ( {intl.formatMessage({ id: 'pages.layout.title' })}
<>
{/*登录*/}
{!status && !forgetPassword && (
<>
<div className={`${prefixCls}-top`}>
<img alt="logo" className={`${prefixCls}-logo`} src={'/full-logo.svg'} />
<div className={`${prefixCls}-desc`}>
{intl.formatMessage({ id: 'pages.layout.title' })}
</div>
</div> </div>
<div className={`${prefixCls}-main`}> </div>
{/*登录错误*/} <div className={`${prefixCls}-main`}>
{userLoginState?.status !== RESULT_STATE.SUCCESS && {/*登录错误*/}
currentProvider?.type === IDP_TYPE.ACCOUNT && {userLoginState?.status !== RESULT_STATE.SUCCESS &&
userLoginState?.message && ( currentProvider?.type === IDP_TYPE.ACCOUNT &&
<LoginMessage content={userLoginState?.message} /> userLoginState?.message && <LoginMessage content={userLoginState?.message} />}
)} {/*其他登录方式*/}
{/*其他登录方式*/} {loginConfig?.idps?.map((value) => {
{loginConfig?.idps?.map((value) => { if (
if ( value.type === currentProvider?.type &&
value.type === currentProvider?.type && value.code === currentProvider?.code
value.code === currentProvider?.code ) {
) { if (value.type === IDP_TYPE.DINGTALK_OAUTH) {
if (value.type === IDP_TYPE.DINGTALK_OAUTH) { dingTalkOauthOnClick(value.code);
dingTalkOauthOnClick(value.code); return <></>;
return <></>;
}
//QQ
if (value.type === IDP_TYPE.QQ_OAUTH) {
qqOauthOnClick(value.code);
return <></>;
}
/* 扫码登录 */
return (
<QrCodeLogin
key={nanoid()}
code={value.code}
name={value.name}
type={currentProvider?.type}
/>
);
} }
return <div key={value.code} />; //QQ
})} if (value.type === IDP_TYPE.QQ_OAUTH) {
{ qqOauthOnClick(value.code);
// 用户名密码和短信登录 return <></>;
(currentProvider?.type === IDP_TYPE.ACCOUNT || }
currentProvider?.type === IDP_TYPE.CAPTCHA) && ( /* 扫码登录 */
<ProForm return (
initialValues={{ 'remember-me': false }} <QrCodeLogin
autoComplete="off" key={nanoid()}
formRef={formRef} code={value.code}
submitter={{ name={value.name}
searchConfig: { type={currentProvider?.type}
submitText: intl.formatMessage({ />
id: 'pages.login.submit', );
}), }
}, return <div key={value.code} />;
render: (_, dom) => dom.pop(), })}
submitButtonProps: { {
loading, // 用户名密码和短信登录
size: 'large', (currentProvider?.type === IDP_TYPE.ACCOUNT ||
htmlType: 'submit', currentProvider?.type === IDP_TYPE.CAPTCHA) && (
style: { <ProForm
width: '100%', initialValues={{ 'remember-me': false }}
}, autoComplete="off"
formRef={formRef}
submitter={{
searchConfig: {
submitText: intl.formatMessage({
id: 'pages.login.submit',
}),
},
render: (_, dom) => dom.pop(),
submitButtonProps: {
loading,
size: 'large',
htmlType: 'submit',
style: {
width: '100%',
}, },
},
}}
onFinish={async (values) => {
run(values);
return data;
}}
>
<Tabs
activeKey={currentProvider?.type}
destroyInactiveTabPane
onChange={(key) => {
setCurrentProvider({ type: key });
}} }}
onFinish={async (values) => { items={[
await run(values); {
return data; label: intl.formatMessage({
id: 'pages.login.account-login.tab',
}),
key: IDP_TYPE.ACCOUNT,
children: (
<>
<UsernamePassword />
</>
),
},
{
label: intl.formatMessage({
id: 'pages.login.phone-login.tab',
}),
key: IDP_TYPE.CAPTCHA,
children: (
<>
<Captcha onGetCaptcha={async () => {}} onRef={captchaRef} />
</>
),
},
]}
/>
<div
style={{
marginBottom: 24,
}} }}
> >
<Tabs <ProFormCheckbox noStyle name="remember-me">
activeKey={currentProvider?.type} <FormattedMessage id="pages.login.remember-me" />
destroyInactiveTabPane </ProFormCheckbox>
onChange={(key) => { <a
setCurrentProvider({ type: key });
}}
items={[
{
label: intl.formatMessage({
id: 'pages.login.account-login.tab',
}),
key: IDP_TYPE.ACCOUNT,
children: (
<>
<UsernamePassword />
</>
),
},
{
label: intl.formatMessage({
id: 'pages.login.phone-login.tab',
}),
key: IDP_TYPE.CAPTCHA,
children: (
<>
<Captcha onGetCaptcha={async () => {}} onRef={captchaRef} />
</>
),
},
]}
/>
<div
style={{ style={{
marginBottom: 24, float: 'right',
}}
onClick={async () => {
setStatusLoading(true);
setForgetPassword(true);
setTimeout(() => {
setStatusLoading(false);
}, 85);
}} }}
> >
<ProFormCheckbox noStyle name="remember-me"> <FormattedMessage id="pages.login.forgot-password" />
<FormattedMessage id="pages.login.remember-me" /> </a>
</ProFormCheckbox> </div>
<a </ProForm>
style={{ )
float: 'right', }
}} <>
onClick={async () => { <Spin spinning={loginConfigLoading}>
setStatusLoading(true); {!loginConfigLoading && (
setForgetPassword(true); <>
setTimeout(() => { {typeof loginConfig?.idps !== 'undefined' &&
setStatusLoading(false); loginConfig?.idps?.length > 0 && (
}, 85); <div className={`${prefixCls}-other`}>
}} <FormattedMessage id="pages.login.login-with" />
> </div>
<FormattedMessage id="pages.login.forgot-password" /> )}
</a> <Space className={`${prefixCls}-other-content`} align={'center'}>
</div> {
</ProForm> // 不是短信和用户名密码时
) currentProvider?.type !== IDP_TYPE.CAPTCHA &&
} currentProvider?.type !== IDP_TYPE.ACCOUNT && (
<> <Tooltip
<Spin spinning={loginConfigLoading}> key={'password'}
{!loginConfigLoading && ( title={intl.formatMessage({
<> id: 'pages.login.account-login.tab',
{typeof loginConfig?.idps !== 'undefined' && })}
loginConfig?.idps?.length > 0 && ( placement="top"
<div className={`${prefixCls}-other`}> >
<FormattedMessage id="pages.login.login-with" /> <a
</div> onClick={() => {
)} setCurrentProvider({
<Space className={`${prefixCls}-other-content`} align={'center'}> type: IDP_TYPE.ACCOUNT,
{ code: undefined,
// 不是短信和用户名密码时 });
currentProvider?.type !== IDP_TYPE.CAPTCHA && }}
currentProvider?.type !== IDP_TYPE.ACCOUNT && (
<Tooltip
key={'password'}
title={intl.formatMessage({
id: 'pages.login.account-login.tab',
})}
placement="top"
> >
<Avatar
className={`${prefixCls}-other-avatar`}
size={50}
src={ICON_LIST.password}
/>
</a>
</Tooltip>
)
}
{loginConfig?.idps &&
loginConfig?.idps.map((value) => {
return (
value.code !== currentProvider?.code && (
<Tooltip key={nanoid()} title={value.name} placement="top">
<a <a
style={{ display: 'block' }}
onClick={() => { onClick={() => {
setCurrentProvider({ //钉钉OAuth认证跳转页面
type: IDP_TYPE.ACCOUNT, if (value.type === IDP_TYPE.DINGTALK_OAUTH) {
code: undefined, dingTalkOauthOnClick(value.code);
}); return;
}
//飞书,跳转页面
if (value.type === IDP_TYPE.FEISHU_OAUTH) {
feiShuOauthOnClick(value.code);
return;
}
//QQ
if (value.type === IDP_TYPE.QQ_OAUTH) {
qqOauthOnClick(value.code);
return;
}
//微博
if (value.type === IDP_TYPE.WEIBO_OAUTH) {
weiBoOauthOnClick(value.code);
return;
}
//gitee
if (value.type === IDP_TYPE.GITEE_OAUTH) {
giteeOauthOnClick(value.code);
return;
}
//GITHUB跳转页面
if (value.type === IDP_TYPE.GITHUB_OAUTH) {
githubOauthOnClick(value.code);
return;
}
//支付宝,跳转页面
if (value.type === IDP_TYPE.ALIPAY_OAUTH) {
alipayOauthOnClick(value.code);
return;
}
//其他方式,跳转页面
else {
setCurrentProvider({
type: value.type,
code: value.code,
});
}
}} }}
> >
<Avatar <Avatar
className={`${prefixCls}-other-avatar`} className={`${prefixCls}-other-avatar`}
size={50} size={50}
src={ICON_LIST.password} src={ICON_LIST[value.type]}
key={value.code}
/> />
</a> </a>
</Tooltip> </Tooltip>
) )
} );
{loginConfig?.idps && })}
loginConfig?.idps.map((value) => { </Space>
return ( </>
value.code !== currentProvider?.code && ( )}
<Tooltip key={nanoid()} title={value.name} placement="top"> </Spin>
<a </>
style={{ display: 'block' }}
onClick={() => {
//钉钉OAuth认证跳转页面
if (value.type === IDP_TYPE.DINGTALK_OAUTH) {
dingTalkOauthOnClick(value.code);
return;
}
//飞书,跳转页面
if (value.type === IDP_TYPE.FEISHU_OAUTH) {
feiShuOauthOnClick(value.code);
return;
}
//QQ
if (value.type === IDP_TYPE.QQ_OAUTH) {
qqOauthOnClick(value.code);
return;
}
//微博
if (value.type === IDP_TYPE.WEIBO_OAUTH) {
weiBoOauthOnClick(value.code);
return;
}
//gitee
if (value.type === IDP_TYPE.GITEE_OAUTH) {
giteeOauthOnClick(value.code);
return;
}
//GITHUB跳转页面
if (value.type === IDP_TYPE.GITHUB_OAUTH) {
githubOauthOnClick(value.code);
return;
}
//支付宝,跳转页面
if (value.type === IDP_TYPE.ALIPAY_OAUTH) {
alipayOauthOnClick(value.code);
return;
}
//其他方式,跳转页面
else {
setCurrentProvider({
type: value.type,
code: value.code,
});
}
}}
>
<Avatar
className={`${prefixCls}-other-avatar`}
size={50}
src={ICON_LIST[value.type]}
key={value.code}
/>
</a>
</Tooltip>
)
);
})}
</Space>
</>
)}
</Spin>
</>
</div>
</>
)}
{/**BIND USER*/}
{status === SESSION_STATUS.require_bind_idp && (
<div style={{ padding: '31px 38px 31px' }}>
<BindIdp />
</div> </div>
)} </>
{/*忘记密码*/} )}
{!status && forgetPassword && ( {/**BIND USER*/}
<ForgetPassword {status === SESSION_STATUS.require_bind_idp && (
close={() => { <div style={{ padding: '31px 38px 31px' }}>
setForgetPassword(false); <BindIdp />
setStatusLoading(true); </div>
setTimeout(() => { )}
setStatusLoading(false); {/*忘记密码*/}
}, 85); {!status && forgetPassword && (
}} <ForgetPassword
/> close={() => {
)} setForgetPassword(false);
</> setStatusLoading(true);
)} setTimeout(() => {
setStatusLoading(false);
}, 85);
}}
/>
)}
</div>
</div> </div>
{/**Footer*/}
<Footer className={`${prefixCls}-footer`} />
</div> </div>
{/**Footer*/} )}
<Footer className={`${prefixCls}-footer`} />
</div>
</div> </div>
); );
}; };

View File

@ -21,8 +21,7 @@ const useStyle = createStyles((_, props) => {
const prefixCls = `${props}`; const prefixCls = `${props}`;
return { return {
main: { main: {
width: '320px', width: '328px',
marginTop: '24px',
[`.${prefixCls}`]: { [`.${prefixCls}`]: {
['&-success-box']: { ['&-success-box']: {
padding: '40px', padding: '40px',
@ -51,7 +50,6 @@ const useStyle = createStyles((_, props) => {
['&-back']: { ['&-back']: {
width: '100%', width: '100%',
marginBottom: '24px', marginBottom: '24px',
marginTop: '24px',
}, },
['&-back-time']: { ['&-back-time']: {
display: 'flex', display: 'flex',

View File

@ -38,12 +38,11 @@ const useStyle = createStyles(({ prefixCls, token }, props) => {
display: 'flex', display: 'flex',
flex: 'none !important', flex: 'none !important',
flexDirection: 'column', flexDirection: 'column',
width: '430px', padding: '32px',
maxWidth: '100%', maxWidth: '100%',
minHeight: '475px',
backgroundColor: '#fff', backgroundColor: '#fff',
borderRadius: token.borderRadius, borderRadius: token.borderRadius,
boxShadow: '0 2px 10px 0 rgb(57 106 255 / 5%)', boxShadow: '0px 0px 24px 0px rgba(0,0,0,0.1)',
[`${antCls}-tabs-nav-list`]: { [`${antCls}-tabs-nav-list`]: {
margin: 'auto', margin: 'auto',
fontSize: '16px', fontSize: '16px',
@ -57,7 +56,6 @@ const useStyle = createStyles(({ prefixCls, token }, props) => {
}, },
['&-top']: { ['&-top']: {
textAlign: 'center', textAlign: 'center',
padding: '39px 0 0',
}, },
['&-logo']: { ['&-logo']: {
width: '200px', width: '200px',
@ -68,7 +66,7 @@ const useStyle = createStyles(({ prefixCls, token }, props) => {
verticalAlign: 'top', verticalAlign: 'top',
}, },
['&-desc']: { ['&-desc']: {
marginTop: '12px', marginTop: '25px',
marginBottom: '15px', marginBottom: '15px',
color: token.colorTextSecondary, color: token.colorTextSecondary,
fontSize: token.fontSize, fontSize: token.fontSize,

View File

@ -24,7 +24,7 @@ const Workplace: FC = () => {
return ( return (
<PageContainer> <PageContainer>
<Card> <Card>
<Alert banner description={'欢迎使用 TopIAM 企业数字身份管控平台'} type={'success'} /> <Alert banner description={'欢迎使用 TOPIAM 企业数字身份管控平台'} type={'success'} />
</Card> </Card>
</PageContainer> </PageContainer>
); );