@arcblock/ux 2.5.58 → 2.5.60

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

@@ -0,0 +1,138 @@
+import PropTypes from 'prop-types';
+import { useCallback, useState } from 'react';
+import { Box, Chip, Divider, SvgIcon } from '@mui/material';
+import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+
+import UserPopper from './user-popper';
+import DidAvatar from '../Avatar';
+import DidAddress from '../Address';
+import Button from '../Button';
+import Toast from '../Toast';
+
+const translations = {
+  en: {
+    useToConnect({ master, member }) {
+      return (
+        <>
+          Use {master} account to connect {member}
+        </>
+      );
+    },
+    connect: 'Connect Account',
+    loginFederatedFailed: 'Login federated account failed',
+  },
+  zh: {
+    useToConnect({ master, member }) {
+      return (
+        <>
+          使用 {master} 账号连接 {member}
+        </>
+      );
+    },
+    connect: '连接账号',
+    loginFederatedFailed: '登录统一登录账号失败',
+  },
+};
+
+export default function FederatedLoginDetecter({ session, anchorEl, dark, locale: _locale }) {
+  const [federatedLoginOpen, setFederatedLoginOpen] = useState(true);
+
+  const siteInfo = session.federatedMaster?.site;
+  const userInfo = session.federatedMaster?.user;
+
+  const localeList = Object.keys(translations);
+  const locale = localeList.includes(_locale) ? _locale : localeList[0];
+
+  const onLoginFederated = useCallback(() => {
+    session?.loginFederated(
+      (err) => {
+        if (err) {
+          Toast.error(err || translations[_locale].loginFederatedFailed);
+        } else {
+          setFederatedLoginOpen(false);
+        }
+      },
+      { mode: userInfo ? 'auto' : 'manual' }
+    );
+  }, [session, userInfo, _locale]);
+
+  return (
+    siteInfo && (
+      <UserPopper
+        open={federatedLoginOpen}
+        anchorEl={anchorEl}
+        dark={dark}
+        onClose={() => setFederatedLoginOpen(false)}>
+        <Box p={2}>
+          {siteInfo && (
+            <Box display="flex" alignItems="center">
+              <Box
+                component="img"
+                mr={2}
+                src={`${siteInfo.appUrl}${siteInfo.appLogo}`}
+                alt={siteInfo.appName}
+                width="30px"
+                height="30px"
+              />
+              <Box>
+                {translations[locale].useToConnect({
+                  master: (
+                    <Box
+                      component="a"
+                      href={siteInfo.appUrl}
+                      target="_blank"
+                      sx={{ textDecoration: 'none', fontWeight: 'bold', color: 'primary.main', fontSize: '1.2em' }}>
+                      {siteInfo.appName}
+                    </Box>
+                  ),
+                  member: window.blocklet.appName,
+                })}
+              </Box>
+            </Box>
+          )}
+          {siteInfo && userInfo && <Divider style={{ margin: '15px 0 10px 0' }} />}
+          {userInfo && (
+            <Box display="flex" alignItems="center">
+              <DidAvatar variant="circle" did={userInfo.did} src={userInfo.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() && (
+                    <Chip
+                      label={userInfo.role?.toUpperCase()}
+                      size="small"
+                      variant="outlined"
+                      sx={{ height: 'auto', marginRight: 0, fontSize: 12 }}
+                      icon={<SvgIcon component={ShieldCheck} style={{ fontSize: '14px' }} />}
+                    />
+                  )}
+                </Box>
+                <DidAddress responsive={false}>{userInfo.did}</DidAddress>
+              </Box>
+            </Box>
+          )}
+          {siteInfo && (
+            <Box display="flex" justifyContent="center" mt={2}>
+              <Button variant="contained" size="small" onClick={onLoginFederated}>
+                {translations[locale].connect}
+              </Button>
+            </Box>
+          )}
+        </Box>
+      </UserPopper>
+    )
+  );
+}
+
+FederatedLoginDetecter.propTypes = {
+  session: PropTypes.object.isRequired,
+  anchorEl: PropTypes.instanceOf(Element),
+  dark: PropTypes.bool,
+  locale: PropTypes.string,
+};
+
+FederatedLoginDetecter.defaultProps = {
+  dark: false,
+  anchorEl: null,
+  locale: 'en',
+};

package/src/SessionManager/index.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { IconButton, ClickAwayListener, MenuList, MenuItem, Paper, Popper, SvgIcon, Button, Chip } from '@mui/material';
+import { IconButton, MenuList, MenuItem, SvgIcon, Button, Chip } from '@mui/material';
 import AccountIcon from '@arcblock/icons/lib/Account';
 import ShieldCheck from 'mdi-material-ui/ShieldCheck';
 import OpenInIcon from '@arcblock/icons/lib/OpenIn';
@@ -12,12 +12,11 @@ import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
 import BindWalletIcon from '@mui/icons-material/Link';
 import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { useOAuth } from '@arcblock/did-connect/lib/OAuth';
-import { useDid } from '@arcblock/did-connect/lib/User';
 
-import { styled } from '../Theme';
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
+import FederatedLoginDetecter from './federated-login-detecter';
+import UserPopper from './user-popper';
 
 const translations = {
   en: {
@@ -71,7 +70,8 @@ function SessionManager({
 }) {
   const translation = translations[locale] || translations.en;
   const userAnchorRef = useRef(null);
-  const { logoutOAuth, bindOAuth, configs: oauthConfigs, switchOAuthPassport } = useOAuth();
+  // eslint-disable-next-line react/prop-types
+  const { logoutOAuth, bindOAuth, configs: oauthConfigs, switchOAuthPassport } = session.useOAuth();
   const [userOpen, setUserOpen] = useState(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
@@ -81,7 +81,8 @@ function SessionManager({
     [session.user]
   );
   const browser = useBrowser();
-  const { walletDid } = useDid({ session });
+  // eslint-disable-next-line react/prop-types
+  const { walletDid } = session.useDid({ session });
 
   const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
   const connectedAccounts = getConnectedAccounts(session.user);
@@ -104,21 +105,28 @@ function SessionManager({
     .filter((item) => item.enabled);
 
   if (!session.user) {
-    return showText ? (
-      <Button
-        sx={[{ borderRadius: '100vw' }, dark && { color: '#fff', borderColor: '#fff' }]}
-        variant="outlined"
-        onClick={_onLogin}
-        aria-label="login button"
-        {...rest}
-        data-cy="sessionManager-login">
-        <AccountIcon />
-        <span style={{ lineHeight: '25px' }}>{translation.connect}</span>
-      </Button>
-    ) : (
-      <IconButton {...rest} onClick={_onLogin} data-cy="sessionManager-login" size="medium">
-        <AccountIcon style={{ width: size, height: size, color: dark ? '#fff' : '' }} />
-      </IconButton>
+    return (
+      <>
+        {showText ? (
+          <Button
+            ref={userAnchorRef}
+            sx={[{ borderRadius: '100vw' }, dark && { color: '#fff', borderColor: '#fff' }]}
+            variant="outlined"
+            onClick={_onLogin}
+            aria-label="login button"
+            {...rest}
+            data-cy="sessionManager-login">
+            <AccountIcon />
+            <span style={{ lineHeight: '25px' }}>{translation.connect}</span>
+          </Button>
+        ) : (
+          <IconButton ref={userAnchorRef} {...rest} onClick={_onLogin} data-cy="sessionManager-login" size="medium">
+            <AccountIcon style={{ width: size, height: size, color: dark ? '#fff' : '' }} />
+          </IconButton>
+        )}
+
+        <FederatedLoginDetecter locale={locale} dark={dark} session={session} anchorEl={userAnchorRef.current} />
+      </>
     );
   }
 
@@ -198,163 +206,127 @@ function SessionManager({
         style={{ lineHeight: 1 }}>
         <DidAvatar variant="circle" did={session.user.did} src={avatar} size={size} shape="circle" />
       </IconButton>
-      {userAnchorRef.current && (
-        <StyledPopper
-          open={userOpen}
-          disablePortal
-          anchorEl={userAnchorRef.current}
-          placement="bottom-end"
-          $dark={dark}>
-          <Paper
-            sx={[
-              (theme) => ({
-                borderColor: '#F0F0F0',
-                boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04)',
-                borderRadius: theme.spacing(2),
-                overflow: 'hidden',
-                maxWidth: 'calc(100vw - 10px)',
-                '& .MuiChip-root .MuiChip-icon': {
-                  color: theme.palette.success.main,
-                },
-              }),
-              dark && {
-                backgroundColor: '#27282c',
-                color: '#fff',
-                border: 0,
-                '& .MuiChip-root': {
-                  borderColor: '#aaa',
-                },
-                '& .MuiListItem-root, & .MuiChip-label': {
-                  color: '#aaa',
-                },
-                '& .MuiListItem-root:hover': {
-                  backgroundColor: '#363434',
-                },
-              },
-            ]}
-            variant="outlined">
-            <ClickAwayListener onClickAway={onCloseUser}>
-              <MenuList sx={{ p: 0 }}>
-                <div className="session-manager-user">
-                  <div className="session-manager-user-name">
-                    <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">
-                    {walletDid && (
-                      <div className="session-manager-id-item">
-                        <DidAddress responsive={false}>{walletDid}</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/"
-                    target="_blank">
-                    <SvgIcon component={OpenInIcon} className="session-manager-menu-icon" />
-                    {translation.openInWallet}
-                  </MenuItem>
-                )}
-                {!!switchDid && (
-                  <MenuItem
-                    className="session-manager-menu-item"
-                    onClick={_onSwitchDid}
-                    data-cy="sessionManager-switch-trigger">
-                    <SvgIcon component={SwitchDidIcon} className="session-manager-menu-icon" />
-                    {translation.switchDid}
-                  </MenuItem>
-                )}
-                {!!switchProfile && hasBindWallet && (
-                  <MenuItem
-                    className="session-manager-menu-item"
-                    onClick={_onSwitchProfile}
-                    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}
-                    data-cy="sessionManager-switch-passport-trigger">
-                    <SvgIcon component={SwitchPassportIcon} className="session-manager-menu-icon" />
-                    {translation.switchPassport}
-                  </MenuItem>
-                )}
-                {oauthConfigList.length > 0 && !hasBindAccount && (
-                  <MenuItem
-                    className="session-manager-menu-item"
-                    onClick={_onBindWallet}
-                    data-cy="sessionManager-bind-trigger">
-                    <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
-                    {isRawWalletAccount
-                      ? `${translation.bind}${translation.thirdParty}`
-                      : `${translation.bind}DID Wallet`}
-                  </MenuItem>
-                )}
 
+      <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">
+              <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">
+              {walletDid && (
+                <div className="session-manager-id-item">
+                  <DidAddress responsive={false}>{walletDid}</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"
-                  onClick={_onLogout}
-                  disabled={disableLogout}
-                  data-cy="sessionManager-logout-trigger">
-                  <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
-                  {translation.disconnect}
+                  {...{
+                    ...menuProps,
+                    icon: undefined,
+                    label: undefined,
+                  }}>
+                  {svgIcon
+                    ? svgIcon && <SvgIcon component={svgIcon} className="session-manager-menu-icon" />
+                    : menuItem.icon}
+                  {menuItem.label}
                 </MenuItem>
-              </MenuList>
-            </ClickAwayListener>
-          </Paper>
-        </StyledPopper>
-      )}
+              );
+            })}
+          {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/"
+              target="_blank">
+              <SvgIcon component={OpenInIcon} className="session-manager-menu-icon" />
+              {translation.openInWallet}
+            </MenuItem>
+          )}
+          {!!switchDid && (
+            <MenuItem
+              className="session-manager-menu-item"
+              onClick={_onSwitchDid}
+              data-cy="sessionManager-switch-trigger">
+              <SvgIcon component={SwitchDidIcon} className="session-manager-menu-icon" />
+              {translation.switchDid}
+            </MenuItem>
+          )}
+          {/* NOTE: federated 登录方式不允许切换 profile */}
+          {!!switchProfile && hasBindWallet && session.provider !== 'federated' && (
+            <MenuItem
+              className="session-manager-menu-item"
+              onClick={_onSwitchProfile}
+              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}
+              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}
+              data-cy="sessionManager-bind-trigger">
+              <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
+              {isRawWalletAccount ? `${translation.bind}${translation.thirdParty}` : `${translation.bind}DID Wallet`}
+            </MenuItem>
+          )}
+
+          <MenuItem
+            className="session-manager-menu-item"
+            onClick={_onLogout}
+            disabled={disableLogout}
+            data-cy="sessionManager-logout-trigger">
+            <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
+            {translation.disconnect}
+          </MenuItem>
+        </MenuList>
+      </UserPopper>
     </>
   );
 }
 
 SessionManager.propTypes = {
   session: PropTypes.shape({
+    federatedMaster: PropTypes.object,
+    provider: PropTypes.oneOf(['wallet', 'federated', 'auth0']),
     user: PropTypes.shape({
       did: PropTypes.string.isRequired,
       role: PropTypes.string.isRequired,
@@ -427,69 +399,4 @@ SessionManager.defaultProps = {
   size: 24,
 };
 
-const StyledPopper = styled(Popper)`
-  z-index: ${({ theme }) => theme.zIndex.tooltip};
-  .MuiList-root {
-    /* HACK: 需要288px 才能将 did 展示完整 */
-    width: 290px;
-  }
-  .session-manager-user {
-    font-size: 12px;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 24px 24px 10px;
-  }
-  .session-manager-user-name {
-    font-size: 20px;
-    color: ${({ $dark }) => ($dark ? '#aaa' : '#222')};
-    font-weight: bold;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .session-manager-id-item {
-    position: relative;
-    padding-left: 8px;
-    /* HACK: 当前元素既是第一个，也是最后一个，即只有一个同级元素 */
-    &:first-of-type:last-of-type {
-      padding-left: 0;
-      &:before,
-      &:after {
-        content: unset;
-      }
-    }
-    &:before {
-      position: absolute;
-      content: '';
-      left: 0px;
-      top: 50%;
-      width: 6px;
-      height: 1px;
-      background-color: #aeaeae;
-    }
-    &:not(:last-of-type):after {
-      position: absolute;
-      content: '';
-      left: 0px;
-      top: 50%;
-      height: 100%;
-      width: 1px;
-      background-color: #aeaeae;
-    }
-  }
-  .session-manager-menu-item {
-    padding: 18.5px 24px;
-    color: #777;
-    font-size: 16px;
-    &:hover {
-      background-color: #fbfbfb;
-    }
-  }
-  .session-manager-menu-icon {
-    color: #999;
-    margin-right: 16px;
-  }
-`;
-
 export default SessionManager;

package/src/SessionManager/user-popper.jsx

@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import { ClickAwayListener, Paper, Popper } from '@mui/material';
+import { styled } from '../Theme';
+
+export default function UserPopper({ anchorEl, dark, children, open, onClose }) {
+  return (
+    anchorEl && (
+      <StyledPopper open={open} disablePortal anchorEl={anchorEl} placement="bottom-end" $dark={dark}>
+        <Paper
+          sx={[
+            (theme) => ({
+              borderColor: '#F0F0F0',
+              boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04)',
+              borderRadius: theme.spacing(2),
+              overflow: 'hidden',
+              maxWidth: 'calc(100vw - 10px)',
+              '& .MuiChip-root .MuiChip-icon': {
+                color: theme.palette.success.main,
+              },
+            }),
+            dark && {
+              backgroundColor: '#27282c',
+              color: '#fff',
+              border: 0,
+              '& .MuiChip-root': {
+                borderColor: '#aaa',
+              },
+              '& .MuiListItem-root, & .MuiChip-label': {
+                color: '#aaa',
+              },
+              '& .MuiListItem-root:hover': {
+                backgroundColor: '#363434',
+              },
+            },
+          ]}
+          variant="outlined">
+          <ClickAwayListener onClickAway={onClose}>{children}</ClickAwayListener>
+        </Paper>
+      </StyledPopper>
+    )
+  );
+}
+
+UserPopper.propTypes = {
+  anchorEl: PropTypes.instanceOf(Element),
+  dark: PropTypes.bool,
+  open: PropTypes.bool,
+  children: PropTypes.any.isRequired,
+  onClose: PropTypes.func,
+};
+UserPopper.defaultProps = {
+  anchorEl: null,
+  dark: false,
+  open: false,
+  onClose: () => {},
+};
+
+const StyledPopper = styled(Popper)`
+  z-index: ${({ theme }) => theme.zIndex.tooltip};
+  .MuiList-root {
+    /* HACK: 需要288px 才能将 did 展示完整 */
+    width: 290px;
+  }
+  .session-manager-user {
+    font-size: 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 24px 24px 10px;
+  }
+  .session-manager-user-name {
+    font-size: 20px;
+    color: ${({ $dark }) => ($dark ? '#aaa' : '#222')};
+    font-weight: bold;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .session-manager-id-item {
+    position: relative;
+    padding-left: 8px;
+    /* HACK: 当前元素既是第一个，也是最后一个，即只有一个同级元素 */
+    &:first-of-type:last-of-type {
+      padding-left: 0;
+      &:before,
+      &:after {
+        content: unset;
+      }
+    }
+    &:before {
+      position: absolute;
+      content: '';
+      left: 0px;
+      top: 50%;
+      width: 6px;
+      height: 1px;
+      background-color: #aeaeae;
+    }
+    &:not(:last-of-type):after {
+      position: absolute;
+      content: '';
+      left: 0px;
+      top: 50%;
+      height: 100%;
+      width: 1px;
+      background-color: #aeaeae;
+    }
+  }
+  .session-manager-menu-item {
+    padding: 18.5px 24px;
+    color: #777;
+    font-size: 16px;
+    &:hover {
+      background-color: #fbfbfb;
+    }
+  }
+  .session-manager-menu-icon {
+    color: #999;
+    margin-right: 16px;
+  }
+`;