@arcblock/ux 2.6.9 → 2.7.0

package/es/SessionManager/index.js

@@ -0,0 +1,468 @@
+/* eslint-disable react/no-array-index-key  */
+/* eslint-disable react/jsx-no-bind */
+import { useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@mui/material/IconButton';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import SvgIcon from '@mui/material/SvgIcon';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Link from '@mui/material/Link';
+import CircularProgress from '@mui/material/CircularProgress';
+import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
+import BindWalletIcon from '@mui/icons-material/Link';
+import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
+import ConnectWithoutContactIcon from '@mui/icons-material/ConnectWithoutContact';
+import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+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 isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
+import DidAvatar from '../Avatar';
+import DidAddress from '../Address';
+import { getUserAvatar } from '../Util';
+import FederatedLoginDetecter from './federated-login-detecter';
+import UserPopper from './user-popper';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const translations = {
+  en: {
+    switchDid: 'Switch DID',
+    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: {
+    switchDid: '切换账户',
+    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';
+function SessionManager({
+  session,
+  locale,
+  showText,
+  showRole,
+  switchDid,
+  switchProfile,
+  switchPassport,
+  disableLogout,
+  onLogin,
+  onLogout,
+  onSwitchDid,
+  onSwitchProfile,
+  onSwitchPassport,
+  onBindWallet,
+  menu,
+  menuRender,
+  dark,
+  size,
+  ...rest
+}) {
+  const translation = translations[locale] || translations.en;
+  const userAnchorRef = useRef(null);
+  // 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
+  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');
+  let hasBindWallet = false;
+  let hasBindAccount = false;
+  if (isRawWalletAccount) {
+    if (connectedAccounts.some(item => item.provider !== 'wallet')) {
+      hasBindAccount = true;
+    }
+    hasBindWallet = true;
+  } else if (connectedAccounts.some(item => item.provider === 'wallet')) {
+    hasBindAccount = true;
+    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 masterSiteInfo = window.blocklet?.settings?.federated?.master;
+  if (!session.user) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [showText ? /*#__PURE__*/_jsxs(Button, {
+        ref: userAnchorRef,
+        sx: [{
+          borderRadius: '100vw'
+        }, dark && {
+          color: '#fff',
+          borderColor: '#fff'
+        }],
+        variant: "outlined",
+        onClick: _onLogin,
+        "aria-label": "login button",
+        ...rest,
+        "data-cy": "sessionManager-login",
+        children: [isFirstLoading ? /*#__PURE__*/_jsx(CircularProgress, {}) : /*#__PURE__*/_jsx(AccountIcon, {}), /*#__PURE__*/_jsx("span", {
+          style: {
+            lineHeight: '25px'
+          },
+          children: translation.connect
+        })]
+      }) : /*#__PURE__*/_jsx(IconButton, {
+        ref: userAnchorRef,
+        ...rest,
+        onClick: _onLogin,
+        "data-cy": "sessionManager-login",
+        size: "medium",
+        children: isFirstLoading ? /*#__PURE__*/_jsx(CircularProgress, {
+          style: {
+            width: size - 4,
+            height: size - 4,
+            color: dark ? '#fff' : ''
+          }
+        }) : /*#__PURE__*/_jsx(AccountIcon, {
+          style: {
+            width: size,
+            height: size,
+            color: dark ? '#fff' : ''
+          }
+        })
+      }), /*#__PURE__*/_jsx(FederatedLoginDetecter, {
+        locale: locale,
+        dark: dark,
+        session: session,
+        anchorEl: userAnchorRef.current
+      })]
+    });
+  }
+  function onToggleUser() {
+    setUserOpen(prevOpen => !prevOpen);
+  }
+  function onCloseUser(e) {
+    if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
+      return;
+    }
+    setUserOpen(false);
+  }
+  function _onLogin() {
+    if (!isFirstLoading) {
+      session.login(onLogin);
+    }
+  }
+  function _onLogout() {
+    session.logout((...args) => {
+      logoutOAuth({
+        session
+      }, ...args).then(() => {
+        onLogout(...args);
+      }).catch(err => {
+        console.error(err);
+      }).finally(() => {
+        setUserOpen(false);
+      });
+    });
+  }
+  function _onSwitchDid() {
+    session.switchDid((...args) => {
+      setUserOpen(false);
+      onSwitchDid(...args);
+    });
+  }
+  function _onSwitchProfile() {
+    session.switchProfile((...args) => {
+      setUserOpen(false);
+      onSwitchProfile(...args);
+    });
+  }
+  function _onSwitchPassport() {
+    const {
+      user,
+      provider
+    } = session;
+    if (!isRawWalletAccount && provider !== 'federated') {
+      switchOAuthPassport(user);
+    } else {
+      setUserOpen(false);
+      session.switchPassport((...args) => {
+        setUserOpen(false);
+        onSwitchPassport(...args);
+      });
+    }
+  }
+  function _onBindWallet() {
+    setUserOpen(false);
+    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
+    if (!isRawWalletAccount) {
+      session.bindWallet((...args) => {
+        setUserOpen(false);
+        onBindWallet(...args);
+      });
+    } else {
+      bindOAuth();
+    }
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      ref: userAnchorRef,
+      onClick: onToggleUser,
+      ...rest,
+      "data-cy": "sessionManager-logout-popup",
+      size: "medium",
+      style: {
+        lineHeight: 1
+      },
+      children: /*#__PURE__*/_jsx(DidAvatar, {
+        variant: "circle",
+        did: session.user.did,
+        src: avatar,
+        size: size,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(UserPopper, {
+      open: userOpen,
+      onClose: onCloseUser,
+      anchorEl: userAnchorRef.current,
+      dark: dark,
+      children: /*#__PURE__*/_jsxs(MenuList, {
+        sx: {
+          p: 0
+        },
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "session-manager-user",
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "session-manager-user-name",
+            children: [/*#__PURE__*/_jsx("span", {
+              children: session.user.fullName
+            }), !!showRole && (currentRole?.title || session.user?.role.toUpperCase()) && /*#__PURE__*/_jsx(Chip, {
+              label: currentRole?.title || session.user?.role.toUpperCase(),
+              size: "small",
+              variant: "outlined",
+              sx: {
+                height: 'auto',
+                marginRight: 0
+              },
+              icon: /*#__PURE__*/_jsx(SvgIcon, {
+                component: ShieldCheck,
+                size: "small"
+              })
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "session-manager-id-list",
+            children: [walletDid && /*#__PURE__*/_jsx("div", {
+              className: "session-manager-id-item",
+              children: /*#__PURE__*/_jsx(DidAddress, {
+                responsive: false,
+                children: walletDid
+              })
+            }), federatedAccount && /*#__PURE__*/_jsx("div", {
+              className: "session-manager-id-item",
+              children: /*#__PURE__*/_jsx(DidAddress, {
+                responsive: false,
+                children: federatedAccount.did
+              })
+            }), session?.user?.email && /*#__PURE__*/_jsx("div", {
+              className: "session-manager-id-item",
+              children: /*#__PURE__*/_jsx(DidAddress, {
+                responsive: false,
+                children: session.user.email
+              })
+            })]
+          })]
+        }), federatedAccount && !isEmpty(masterSiteInfo) && /*#__PURE__*/_jsxs(MenuItem, {
+          className: "session-manager-menu-item",
+          "data-cy": "sessionManager-connectWithFederated",
+          children: [/*#__PURE__*/_jsx(SvgIcon, {
+            component: ConnectWithoutContactIcon,
+            className: "session-manager-menu-icon"
+          }), translation.connectedWith, /*#__PURE__*/_jsx(Link, {
+            ml: 1,
+            href: masterSiteInfo.appUrl,
+            underline: "hover",
+            target: "_blank",
+            children: masterSiteInfo.appName
+          })]
+        }), Array.isArray(menu) && menu.map((menuItem, index) => {
+          const {
+            svgIcon,
+            ...menuProps
+          } = menuItem;
+          return /*#__PURE__*/_jsxs(MenuItem, {
+            className: "session-manager-menu-item",
+            ...menuProps,
+            icon: undefined,
+            label: undefined,
+            children: [svgIcon ? svgIcon && /*#__PURE__*/_jsx(SvgIcon, {
+              component: svgIcon,
+              className: "session-manager-menu-icon"
+            }) : menuItem.icon, menuItem.label]
+          }, index);
+        }), menuRender({
+          classes: {
+            menuItem: 'session-manager-menu-item',
+            menuIcon: 'session-manager-menu-icon'
+          }
+        }), !browser.wallet && /*#__PURE__*/_jsxs(MenuItem, {
+          component: "a",
+          className: "session-manager-menu-item",
+          "data-cy": "sessionManager-openInWallet",
+          href: "https://www.abtwallet.io/",
+          target: "_blank",
+          children: [/*#__PURE__*/_jsx(SvgIcon, {
+            component: OpenInIcon,
+            className: "session-manager-menu-icon"
+          }), translation.openInWallet]
+        }), !!switchDid && /*#__PURE__*/_jsxs(MenuItem, {
+          className: "session-manager-menu-item",
+          onClick: _onSwitchDid,
+          "data-cy": "sessionManager-switch-trigger",
+          children: [/*#__PURE__*/_jsx(SvgIcon, {
+            component: SwitchDidIcon,
+            className: "session-manager-menu-icon"
+          }), translation.switchDid]
+        }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
+          className: "session-manager-menu-item",
+          onClick: _onSwitchProfile,
+          "data-cy": "sessionManager-switch-profile-trigger",
+          children: [/*#__PURE__*/_jsx(SvgIcon, {
+            component: SwitchProfileIcon,
+            className: "session-manager-menu-icon"
+          }), translation.switchProfile]
+        }), !!switchPassport && /*#__PURE__*/_jsxs(MenuItem, {
+          className: "session-manager-menu-item",
+          onClick: _onSwitchPassport,
+          "data-cy": "sessionManager-switch-passport-trigger",
+          children: [/*#__PURE__*/_jsx(SvgIcon, {
+            component: SwitchPassportIcon,
+            className: "session-manager-menu-icon"
+          }), translation.switchPassport]
+        }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
+          className: "session-manager-menu-item",
+          onClick: _onBindWallet,
+          "data-cy": "sessionManager-bind-trigger",
+          children: [/*#__PURE__*/_jsx(SvgIcon, {
+            component: BindWalletIcon,
+            className: "session-manager-menu-icon"
+          }), !isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`]
+        }), /*#__PURE__*/_jsxs(MenuItem, {
+          className: "session-manager-menu-item",
+          onClick: _onLogout,
+          disabled: disableLogout,
+          "data-cy": "sessionManager-logout-trigger",
+          children: [/*#__PURE__*/_jsx(SvgIcon, {
+            component: DisconnectIcon,
+            className: "session-manager-menu-icon"
+          }), translation.disconnect]
+        })]
+      })
+    })]
+  });
+}
+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,
+      fullName: PropTypes.string,
+      email: PropTypes.string,
+      avatar: PropTypes.string,
+      sourceProvider: PropTypes.string,
+      connectedAccounts: PropTypes.arrayOf(PropTypes.shape({
+        provider: PropTypes.string.isRequired,
+        did: PropTypes.string.isRequired,
+        id: PropTypes.string
+      })),
+      passports: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired
+      })),
+      // Deprecated
+      extraConfigs: PropTypes.object
+    }),
+    login: PropTypes.func.isRequired,
+    logout: PropTypes.func.isRequired,
+    switchDid: PropTypes.func.isRequired,
+    switchProfile: PropTypes.func.isRequired,
+    switchPassport: PropTypes.func.isRequired,
+    bindWallet: PropTypes.func.isRequired,
+    refresh: PropTypes.func.isRequired
+  }).isRequired,
+  locale: PropTypes.string,
+  showText: PropTypes.bool,
+  showRole: PropTypes.bool,
+  switchDid: PropTypes.bool,
+  switchProfile: PropTypes.bool,
+  switchPassport: PropTypes.bool,
+  disableLogout: PropTypes.bool,
+  onLogin: PropTypes.func,
+  onLogout: PropTypes.func,
+  onSwitchDid: PropTypes.func,
+  onSwitchProfile: PropTypes.func,
+  onSwitchPassport: PropTypes.func,
+  onBindWallet: PropTypes.func,
+  menu: PropTypes.array,
+  menuRender: PropTypes.func,
+  dark: PropTypes.bool,
+  size: PropTypes.number
+};
+SessionManager.defaultProps = {
+  locale: 'en',
+  showText: false,
+  showRole: false,
+  switchDid: true,
+  switchProfile: true,
+  switchPassport: true,
+  disableLogout: false,
+  menu: [],
+  menuRender: noop,
+  onLogin: noop,
+  onLogout: noop,
+  onSwitchDid: noop,
+  onSwitchProfile: noop,
+  onSwitchPassport: noop,
+  onBindWallet: noop,
+  dark: false,
+  size: 24
+};
+export default SessionManager;

package/es/SessionManager/user-popper.js

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function UserPopper({
+  anchorEl,
+  dark,
+  children,
+  open,
+  onClose
+}) {
+  return anchorEl && /*#__PURE__*/_jsx(StyledPopper, {
+    open: open,
+    disablePortal: true,
+    anchorEl: anchorEl,
+    placement: "bottom-end",
+    $dark: dark,
+    children: /*#__PURE__*/_jsx(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",
+      children: /*#__PURE__*/_jsx(ClickAwayListener, {
+        onClickAway: onClose,
+        children: children
+      })
+    })
+  });
+}
+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;
+  }
+`;