@arcblock/ux 2.7.15 → 2.7.17

package/src/SessionManager/federated-login-detecter.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
-import SvgIcon from '@mui/material/SvgIcon';
-import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
+import { Icon } from '@iconify/react';
+import { useCreation, useReactive } from 'ahooks';
 
 import UserPopper from './user-popper';
 import DidAvatar from '../Avatar';
@@ -39,10 +40,13 @@ const translations = {
 };
 
 export default function FederatedLoginDetecter({ session, anchorEl, dark, locale: _locale }) {
-  const [federatedLoginOpen, setFederatedLoginOpen] = useState(true);
+  const state = useReactive({
+    open: true,
+  });
 
-  const siteInfo = session.federatedMaster?.site;
-  const userInfo = session.federatedMaster?.user;
+  const federatedMaster = useCreation(() => {
+    return session.federatedMaster;
+  }, [session?.federatedMaster]);
 
   const localeList = Object.keys(translations);
   const locale = localeList.includes(_locale) ? _locale : localeList[0];
@@ -53,19 +57,19 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
         if (err) {
           Toast.error(err || translations[_locale].loginFederatedFailed);
         } else {
-          setFederatedLoginOpen(false);
+          state.open = false;
         }
       },
       {
-        provider: 'federated',
-        mode: userInfo ? 'auto' : 'manual',
+        sourceAppPid: federatedMaster?.site?.appPid,
+        mode: federatedMaster?.user ? 'auto' : 'manual',
       }
     );
-  }, [session, userInfo, _locale]);
+  }, [session, federatedMaster?.site?.appPid, federatedMaster?.user, _locale, state]);
 
   let appLogoUrl;
-  if (siteInfo) {
-    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+  if (federatedMaster?.site) {
+    appLogoUrl = new URL(federatedMaster.site.appLogo, federatedMaster.site.appUrl);
     appLogoUrl.searchParams.set('imageFilter', 'resize');
     // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
     appLogoUrl.searchParams.set('w', '80');
@@ -73,26 +77,35 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
   }
 
   return (
-    siteInfo && (
+    federatedMaster?.site && (
       <UserPopper
-        open={federatedLoginOpen}
+        open={state.open}
         anchorEl={anchorEl}
         dark={dark}
         autoClose={false}
-        onClose={() => setFederatedLoginOpen(false)}>
+        onClose={() => {
+          state.open = false;
+        }}>
         <Box p={2}>
-          {siteInfo && (
+          {federatedMaster.site && (
             <Box display="flex" alignItems="center">
-              <Box component="img" mr={2} src={appLogoUrl.href} alt={siteInfo.appName} width="30px" height="30px" />
+              <Box
+                component="img"
+                mr={2}
+                src={appLogoUrl.href}
+                alt={federatedMaster.site.appName}
+                width="30px"
+                height="30px"
+              />
               <Box sx={{ maxWidth: '260px' }}>
                 {translations[locale].useToConnect({
                   master: (
                     <Box
                       component="a"
-                      href={siteInfo.appUrl}
+                      href={federatedMaster.site.appUrl}
                       target="_blank"
                       sx={{ textDecoration: 'none', fontWeight: 'bold', color: 'primary.main', fontSize: '1.2em' }}>
-                      {siteInfo.appName}
+                      {federatedMaster.site.appName}
                     </Box>
                   ),
                   member: window.blocklet.appName,
@@ -100,34 +113,34 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
               </Box>
             </Box>
           )}
-          {siteInfo && userInfo && <Divider style={{ margin: '15px 0 10px 0' }} />}
-          {userInfo && (
+          {federatedMaster?.site && federatedMaster?.user && <Divider style={{ margin: '15px 0 10px 0' }} />}
+          {federatedMaster?.user && (
             <Box display="flex" alignItems="center">
               <DidAvatar
                 variant="circle"
-                did={userInfo.did}
-                src={getUserAvatar(userInfo.avatar)}
+                did={federatedMaster.user.did}
+                src={getUserAvatar(federatedMaster.user.avatar)}
                 size={28}
                 shape="circle"
               />
               <Box ml={2}>
                 <Box display="flex" justifyContent="space-between" alignItems="center">
-                  <Box fontSize={18}>{userInfo.fullName}</Box>
-                  {userInfo.role?.toUpperCase() && (
+                  <Box fontSize={18}>{federatedMaster.user.fullName}</Box>
+                  {federatedMaster.user.role?.toUpperCase() && (
                     <Chip
-                      label={userInfo.role?.toUpperCase()}
+                      label={federatedMaster.user.role?.toUpperCase()}
                       size="small"
                       variant="outlined"
                       sx={{ height: 'auto', marginRight: 0, fontSize: 12 }}
-                      icon={<SvgIcon component={ShieldCheck} style={{ fontSize: '14px' }} />}
+                      icon={<Icon icon={ShieldCheckIcon} fontSize={14} />}
                     />
                   )}
                 </Box>
-                <DidAddress responsive={false}>{userInfo.did}</DidAddress>
+                <DidAddress responsive={false}>{federatedMaster.user.did}</DidAddress>
               </Box>
             </Box>
           )}
-          {siteInfo && (
+          {federatedMaster?.site && (
             <Box display="flex" justifyContent="center" mt={2}>
               <Button variant="contained" size="small" onClick={onLoginFederated}>
                 {translations[locale].connect}

package/src/SessionManager/index.jsx

@@ -1,60 +1,25 @@
-/* eslint-disable react/no-array-index-key  */
+/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, CircularProgress } from '@mui/material';
-import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
-import BindWalletIcon from '@mui/icons-material/Link';
-import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
-import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import { Box, IconButton, MenuList, Button, CircularProgress, Divider } from '@mui/material';
 import AccountIcon from '@arcblock/icons/lib/Account';
-import OpenInIcon from '@arcblock/icons/lib/OpenIn';
-import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
-import SwitchDidIcon from '@arcblock/icons/lib/Switch';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import noop from 'lodash/noop';
-import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
+import { useLatest, useMemoizedFn } from 'ahooks';
 
 import DidAvatar from '../Avatar';
-import DidAddress from '../Address';
-import { getUserAvatar } from '../Util';
+import { getUserAvatar, sleep } from '../Util';
 import FederatedLoginDetecter from './federated-login-detecter';
 import UserPopper from './user-popper';
-
-const translations = {
-  en: {
-    account: 'account',
-    switchDid: 'Switch DID',
-    switchTo: 'Switch to',
-    switchProfile: 'Switch Profile',
-    switchPassport: 'Switch Passport',
-    disconnect: 'Disconnect',
-    connect: 'Connect',
-    openInWallet: 'Open DID Wallet',
-    alreadyBindOAuth: 'Already bind Auth0',
-    bind: 'Bind ',
-    thirdParty: 'Third Party Login',
-    connectedWith: 'Connected with',
-  },
-  zh: {
-    account: '账号',
-    switchDid: '切换账户',
-    switchTo: '切换至',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包',
-    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
-    alreadyBindOAuth: '已绑定 Auth0 账号',
-    bind: '绑定',
-    thirdParty: '第三方登录',
-    connectedWith: '连接至',
-  },
-};
-
-const getConnectedAccounts = (user) => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
-const getSourceProvider = (user) => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+import UserInfo from './user-info';
+import { translate } from '../Locale/util';
+import ManageAccounts from './manage-accounts';
+import ManageBlocklet from './manage-blocklet';
+import { translations } from './translation';
+import { getConnectedAccounts, getSourceProvider } from './utils';
+import useConfig from './use-config';
+import { getCurrentApp, getFederatedApp } from '../Util/federated';
 
 function SessionManager({
   session,
@@ -75,27 +40,28 @@ function SessionManager({
   menuRender,
   dark,
   size,
+  showManageBlocklet,
   ...rest
 }) {
-  const translation = translations[locale] || translations.en;
+  const latestSession = useLatest(session);
+  const { connectAccount, config, setConfig } = useConfig();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const userAnchorRef = useRef(null);
-  // eslint-disable-next-line react/prop-types
-  const { logoutOAuth, bindOAuth, configs: oauthConfigs, switchOAuthPassport } = session.useOAuth();
+  const { logoutOAuth, switchOAuthPassport } = session.useOAuth();
   const [userOpen, setUserOpen] = useState(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
-  const currentRole = useMemo(
-    () => session.user?.passports?.find((item) => item.name === session.user.role),
-    [session.user]
-  );
-  const browser = useBrowser();
-  // eslint-disable-next-line react/prop-types
-  const { walletDid } = session.useDid({ session });
 
   const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
   const connectedAccounts = getConnectedAccounts(session.user);
-  const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
+
+  const isFirstLoading = useMemo(() => {
+    return session?.initialized === false && session?.loading === true;
+  }, [session?.initialized, session?.loading]);
+
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -108,20 +74,38 @@ function SessionManager({
     hasBindWallet = true;
   }
 
-  const oauthConfigList = Object.entries(oauthConfigs)
-    .map(([key, value]) => {
-      return { ...value, provider: key };
-    })
-    .filter((item) => item.enabled);
-
-  const isFirstLoading = useMemo(() => {
-    // eslint-disable-next-line react/prop-types
-    return session?.initialized === false && session?.loading === true;
-    // eslint-disable-next-line react/prop-types
-  }, [session?.initialized, session?.loading]);
+  const _connectAccount = useMemoizedFn(async () => {
+    // HACK: 强制等待组件渲染一轮，以拿到最新的 session 值
+    await sleep();
+    if (!latestSession.current?.user) {
+      return;
+    }
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const blocklet = window?.blocklet;
+    const currentApp = getCurrentApp(blocklet);
+    const masterApp = getFederatedApp(blocklet);
+    const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
+    if (targetApp) {
+      const loginAccount = {
+        did: latestSession.current.user.did,
+        avatar: latestSession.current.user.avatar,
+        provider: latestSession.current.provider,
+        ...targetApp,
+      };
+      connectAccount(loginAccount);
+    }
+  });
 
-  const masterSiteInfo = window.blocklet?.settings?.federated?.master;
-  const currentSiteInfo = window.blocklet;
+  // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
+  // 同时可用于以前的站点，会自动生成一个已连接的账号
+  useEffect(() => {
+    if (session.user) {
+      _connectAccount();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session.user]);
 
   if (!session.user) {
     return (
@@ -137,7 +121,7 @@ function SessionManager({
             {...rest}
             data-cy="sessionManager-login">
             {isFirstLoading ? <CircularProgress /> : <AccountIcon />}
-            <span style={{ lineHeight: '25px' }}>{translation.connect}</span>
+            <span style={{ lineHeight: '25px' }}>{t('connect')}</span>
           </Button>
         ) : (
           <IconButton
@@ -167,16 +151,23 @@ function SessionManager({
     setUserOpen((prevOpen) => !prevOpen);
   }
 
+  function close() {
+    setUserOpen(false);
+  }
+
   function onCloseUser(e) {
     if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
       return;
     }
-    setUserOpen(false);
+    close();
   }
 
   function _onLogin() {
     if (!isFirstLoading) {
-      session.login(onLogin);
+      session.login((...args) => {
+        _connectAccount();
+        onLogin(...args);
+      });
     }
   }
   function _onLogout() {
@@ -189,7 +180,7 @@ function SessionManager({
           console.error(err);
         })
         .finally(() => {
-          setUserOpen(false);
+          close();
         });
     });
   }
@@ -197,58 +188,27 @@ function SessionManager({
    * @name 切换账户
    * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
    */
-  function _onSwitchDid() {
-    const { provider, user } = session;
-    if (!user) return;
-    let targetProvider = provider;
-    if (provider === 'federated') {
-      targetProvider = 'wallet';
-    } else if (['auth0', 'wallet'].includes(provider)) {
-      targetProvider = 'federated';
-    }
-    session.switchDid(
-      (...args) => {
-        setUserOpen(false);
-        onSwitchDid(...args);
-      },
-      {
-        provider: targetProvider,
-        providerMode: 'paramsFirst',
-      }
-    );
-  }
+
   function _onSwitchProfile() {
     session.switchProfile((...args) => {
-      setUserOpen(false);
+      close();
       onSwitchProfile(...args);
     });
   }
+
   function _onSwitchPassport() {
     const { user, provider } = session;
-    if (!isRawWalletAccount && provider !== 'federated') {
+    if (['auth0'].includes(provider)) {
       switchOAuthPassport(user);
     } else {
-      setUserOpen(false);
+      close();
       session.switchPassport((...args) => {
-        setUserOpen(false);
+        close();
         onSwitchPassport(...args);
       });
     }
   }
 
-  function _onBindWallet() {
-    setUserOpen(false);
-    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
-    if (!isRawWalletAccount) {
-      session.bindWallet((...args) => {
-        setUserOpen(false);
-        onBindWallet(...args);
-      });
-    } else {
-      bindOAuth();
-    }
-  }
-
   return (
     <>
       <IconButton
@@ -265,151 +225,61 @@ function SessionManager({
 
       <UserPopper open={userOpen} onClose={onCloseUser} anchorEl={userAnchorRef.current} dark={dark}>
         <MenuList sx={{ p: 0 }}>
-          <div className="session-manager-user">
-            <div className="session-manager-user-name" role="button" aria-label="User info panel">
-              <span>{session.user.fullName}</span>
-              {!!showRole && (currentRole?.title || session.user?.role.toUpperCase()) && (
-                <Chip
-                  label={currentRole?.title || session.user?.role.toUpperCase()}
-                  size="small"
-                  variant="outlined"
-                  sx={{ height: 'auto', marginRight: 0 }}
-                  icon={<SvgIcon component={ShieldCheck} size="small" />}
-                />
-              )}
-            </div>
-            <div className="session-manager-id-list" aria-label="User DID list">
-              {walletDid && (
-                <div className="session-manager-id-item">
-                  <DidAddress responsive={false}>{walletDid}</DidAddress>
-                </div>
-              )}
-              {federatedAccount && (
-                <div className="session-manager-id-item">
-                  <DidAddress responsive={false}>{federatedAccount.did}</DidAddress>
-                </div>
-              )}
-              {session?.user?.email && (
-                <div className="session-manager-id-item">
-                  <DidAddress responsive={false}>{session.user.email}</DidAddress>
-                </div>
-              )}
-            </div>
-          </div>
-          {Array.isArray(menu) &&
-            menu.map((menuItem, index) => {
-              const { svgIcon, ...menuProps } = menuItem;
-              return (
-                <MenuItem
-                  key={index}
-                  className="session-manager-menu-item"
-                  {...{
-                    ...menuProps,
-                    icon: undefined,
-                    label: undefined,
-                  }}>
-                  {svgIcon
-                    ? svgIcon && <SvgIcon component={svgIcon} className="session-manager-menu-icon" />
-                    : menuItem.icon}
-                  {menuItem.label}
-                </MenuItem>
-              );
-            })}
-          {menuRender({
-            classes: {
-              menuItem: 'session-manager-menu-item',
-              menuIcon: 'session-manager-menu-icon',
-            },
-          })}
-          {!browser.wallet && (
-            <MenuItem
-              component="a"
-              className="session-manager-menu-item"
-              data-cy="sessionManager-openInWallet"
-              href="https://www.abtwallet.io/"
-              aria-label={translation.openInWallet}
-              target="_blank">
-              <SvgIcon component={OpenInIcon} className="session-manager-menu-icon" />
-              {translation.openInWallet}
-            </MenuItem>
-          )}
-          {!isEmpty(masterSiteInfo) && !!switchDid && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onSwitchDid}
-              aria-label={translation.switchDid}
-              data-cy="sessionManager-switch-trigger">
-              <SvgIcon component={SwitchDidIcon} className="session-manager-menu-icon" />
-              <Box sx={{ whiteSpace: 'normal', wordBreak: 'break-all' }}>
-                {translation.switchTo}
-                {session.provider === 'federated' ? (
-                  <Link
-                    mx={1}
-                    href={currentSiteInfo.appUrl}
-                    underline="hover"
-                    target="_blank"
-                    title={currentSiteInfo.appName}
-                    aria-label="Open current site url">
-                    {currentSiteInfo.appName}
-                  </Link>
-                ) : (
-                  <Link
-                    mx={1}
-                    href={masterSiteInfo.appUrl}
-                    underline="hover"
-                    target="_blank"
-                    title={masterSiteInfo.appName}
-                    aria-label="Open federated master site url">
-                    {masterSiteInfo.appName}
-                  </Link>
-                )}
-                {translation.account}
-              </Box>
-            </MenuItem>
-          )}
-          {/* NOTE: federated 登录方式不允许切换 profile */}
-          {!!switchProfile && hasBindWallet && session.provider !== 'federated' && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onSwitchProfile}
-              aria-label={translation.switchProfile}
-              data-cy="sessionManager-switch-profile-trigger">
-              <SvgIcon component={SwitchProfileIcon} className="session-manager-menu-icon" />
-              {translation.switchProfile}
-            </MenuItem>
-          )}
-          {!!switchPassport && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onSwitchPassport}
-              aria-label={translation.switchPassport}
-              data-cy="sessionManager-switch-passport-trigger">
-              <SvgIcon component={SwitchPassportIcon} className="session-manager-menu-icon" />
-              {translation.switchPassport}
-            </MenuItem>
-          )}
-          {oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onBindWallet}
-              aria-label={
-                !isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`
-              }
-              data-cy="sessionManager-bind-trigger">
-              <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
-              {!isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`}
-            </MenuItem>
-          )}
+          <UserInfo
+            session={session}
+            size={size}
+            locale={locale}
+            onSwitchProfile={() => {
+              close();
+              _onSwitchProfile();
+            }}
+            onSwitchPassport={() => {
+              close();
+              _onSwitchPassport();
+            }}
+            close={close}
+            switchProfile={switchProfile}
+            hasBindWallet={hasBindWallet}
+          />
+
+          <Divider />
+
+          <ManageAccounts
+            session={session}
+            locale={locale}
+            onBindWallet={onBindWallet}
+            onSwitchDid={onSwitchDid}
+            connectAccount={_connectAccount}
+            close={close}
+            hasBindAccount={hasBindAccount}
+            onLogout={_onLogout}
+            expanded={config.expandAccount}
+            onExpand={(value) => {
+              const cloneConfig = cloneDeep(config);
+              cloneConfig.expandAccount = value;
+              setConfig(cloneConfig);
+            }}
+          />
 
-          <MenuItem
-            className="session-manager-menu-item"
-            onClick={_onLogout}
-            disabled={disableLogout}
-            aria-label="Logout account"
-            data-cy="sessionManager-logout-trigger">
-            <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
-            {translation.disconnect}
-          </MenuItem>
+          {/* 为了避免控制台出现警告，采用数组的方式 */}
+          {/* MUI:The Menu component doesn't accept a Fragment as a child. Consider providing an array instead. */}
+          {showManageBlocklet
+            ? [
+                <Divider key="divider" />,
+                <ManageBlocklet
+                  key="manageBlocklet"
+                  menu={menu}
+                  menuRender={menuRender}
+                  locale={locale}
+                  expanded={config.expandBlocklet}
+                  onExpand={(value) => {
+                    const cloneConfig = cloneDeep(config);
+                    cloneConfig.expandBlocklet = value;
+                    setConfig(cloneConfig);
+                  }}
+                />,
+              ]
+            : null}
         </MenuList>
       </UserPopper>
     </>
@@ -419,7 +289,7 @@ function SessionManager({
 SessionManager.propTypes = {
   session: PropTypes.shape({
     federatedMaster: PropTypes.object,
-    provider: PropTypes.oneOf(['wallet', 'federated', 'auth0', '']),
+    provider: PropTypes.oneOf(['wallet', 'auth0', '']),
     user: PropTypes.shape({
       did: PropTypes.string.isRequired,
       role: PropTypes.string.isRequired,
@@ -468,6 +338,7 @@ SessionManager.propTypes = {
   menuRender: PropTypes.func,
   dark: PropTypes.bool,
   size: PropTypes.number,
+  showManageBlocklet: PropTypes.bool,
 };
 
 SessionManager.defaultProps = {
@@ -488,6 +359,7 @@ SessionManager.defaultProps = {
   onBindWallet: noop,
   dark: false,
   size: 24,
+  showManageBlocklet: true,
 };
 
 export default SessionManager;