@abtnode/ux 1.16.0-beta-7a7d5d97 → 1.16.0-beta-9a8bb7a5

package/lib/locales/en.js

@@ -1255,6 +1255,9 @@ module.exports = {
     saveSuccess: 'Save successfully',
     saveFailed: 'Save failed',
     issued: 'Issued',
+    thirdPartyLogin: 'Third party login',
+    alreadyBindOAuth: 'Already bind third party login',
+    alreadyBindWallet: 'Already bind DID Wallet',
     auth0: {
       enable: 'Enable Auth0 login',
       domain: 'Domain',

package/lib/locales/zh.js

@@ -1260,6 +1260,9 @@ module.exports = {
     saveSuccess: '保存成功',
     saveFailed: '保存失败',
     issued: '颁发',
+    thirdPartyLogin: '第三方登录',
+    alreadyBindOAuth: '已绑定第三方登录',
+    alreadyBindWallet: '已绑定 DID Wallet',
     auth0: {
       enable: '是否开启 Auth0 登录',
       domain: 'Domain',

package/lib/team/members/member.js

@@ -12,12 +12,15 @@ var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Avatar2 = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
 var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
 var _ForbidLoginIcon = _interopRequireDefault(require("@arcblock/icons/lib/ForbidLoginIcon"));
 var _AllowLoginIcon = _interopRequireDefault(require("@arcblock/icons/lib/AllowLoginIcon"));
+var _reactUse = require("react-use");
+var _ahooks = require("ahooks");
 var _constant = require("@abtnode/constant");
 var _permission = _interopRequireDefault(require("../../permission"));
 var _node = require("../../contexts/node");
@@ -29,14 +32,114 @@ var _toggleUserApproval = _interopRequireDefault(require("./toggle-user-approval
 var _util2 = require("./util");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
+const _excluded = ["name"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function Member(_ref) {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function LinkUser(_ref) {
+  let {
+      name
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, _objectSpread(_objectSpread({}, rest), {}, {
+    sx: {
+      color: 'primary.main',
+      '&:hover': {
+        textDecoration: 'underline'
+      },
+      cursor: 'pointer'
+    },
+    children: name
+  }));
+}
+LinkUser.propTypes = {
+  name: _propTypes.default.string.isRequired
+};
+function TabOAuth(_ref2) {
+  var _user$extraConfigs;
+  let {
+    user,
+    onChangeUser
+  } = _ref2;
+  const {
+    api,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    teamDid
+  } = (0, _team.useTeamContext)();
+  const connectedAccounts = ((_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.connectedAccounts) || [];
+  const sourceIds = connectedAccounts.map(x => x.id);
+  const users = (0, _reactUse.useAsync)(async () => {
+    if (sourceIds !== null && sourceIds !== void 0 && sourceIds.length) {
+      const {
+        users: data
+      } = await api.getUsers({
+        input: {
+          teamDid,
+          sourceIds
+        }
+      });
+      return data;
+    }
+    return [];
+  }, []);
+  if (users.loading || !users.value) {
+    return null;
+  }
+  return users.value.map(userItem => {
+    var _userItem$extraConfig;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+      style: {
+        alignItems: 'flex-start'
+      },
+      valueComponent: "div",
+      nameWidth: 120,
+      name: (_userItem$extraConfig = userItem.extraConfigs) === null || _userItem$extraConfig === void 0 ? void 0 : _userItem$extraConfig.sourceProvider,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        alignItems: "center",
+        title: userItem.email,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar2.default, {
+          src: (0, _util2.parseAvatar)(userItem.avatar, teamDid, inService),
+          size: 20,
+          did: userItem.did,
+          shape: "circle",
+          style: {
+            borderRadius: '100%',
+            overflow: 'hidden'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkUser, {
+          name: userItem.fullName,
+          mx: 1,
+          onClick: () => {
+            onChangeUser(userItem);
+          }
+        })]
+      })
+    }, userItem.did);
+  });
+}
+TabOAuth.propTypes = {
+  user: _propTypes.default.object.isRequired,
+  onChangeUser: _propTypes.default.func
+};
+TabOAuth.defaultProps = {
+  onChangeUser: () => {}
+};
+const defaultTab = 'info';
+function Member(_ref3) {
   let {
     userDid,
     onCancel,
     initTab
-  } = _ref;
+  } = _ref3;
   const {
     api,
     ws: {
@@ -52,38 +155,40 @@ function Member(_ref) {
   const {
     t
   } = (0, _context.useLocaleContext)();
-  const [issuances, setIssuances] = (0, _react.useState)(null);
-  const [user, setUser] = (0, _react.useState)(null);
+  const pageState = (0, _ahooks.useReactive)({
+    user: null,
+    issuances: null,
+    tab: initTab || defaultTab
+  });
   const {
     enqueueSnackbar
   } = (0, _notistack.useSnackbar)();
-  const [tab, setTab] = (0, _react.useState)(initTab || 'info');
-  const getData = async () => {
+  const getData = async (_teamDid, _userDid) => {
     try {
       const res = await api.doBatchQuery({
         getUser: {
           input: {
-            teamDid,
+            teamDid: _teamDid,
             user: {
-              did: userDid
+              did: _userDid
             }
           }
         },
         getPassportIssuances: {
           input: {
-            teamDid,
-            ownerDid: userDid
+            teamDid: _teamDid,
+            ownerDid: _userDid
           }
         }
       });
       if (res.getUser.user) {
-        res.getUser.user.avatar = (0, _util2.parseAvatar)(res.getUser.user.avatar, teamDid, inService);
+        res.getUser.user.avatar = (0, _util2.parseAvatar)(res.getUser.user.avatar, _teamDid, inService);
 
         // for backwards compatibility
         res.getUser.user.passports = (res.getUser.user.passports || []).filter(x => x.issuer);
       }
-      setUser(res.getUser.user || {});
-      setIssuances(res.getPassportIssuances.list || []);
+      pageState.user = res.getUser.user || {};
+      pageState.issuances = res.getPassportIssuances.list || [];
     } catch (err) {
       enqueueSnackbar((0, _util.formatError)(err), {
         autoHideDuration: 5000,
@@ -93,45 +198,73 @@ function Member(_ref) {
   };
   (0, _react.useEffect)(() => {
     if (teamDid) {
-      getData();
+      getData(teamDid, userDid);
     }
   }, [userDid, teamDid]); // eslint-disable-line
 
   const onUserEvent = data => {
     if (data.teamDid === teamDid && data.user && data.user.did === userDid) {
-      getData();
+      getData(teamDid, userDid);
     }
   };
   useSubscription(_constant.EVENTS.USER_UPDATED, onUserEvent, [userDid, teamDid]);
   (0, _react.useEffect)(() => {
-    if (issuances && !issuances.length && tab === 'issuances') {
-      setTab('info');
+    if (pageState.issuances && !pageState.issuances.length && pageState.tab === 'issuances') {
+      pageState.tab = defaultTab;
     }
-  }, [issuances]); // eslint-disable-line
+  }, [pageState.issuances]); // eslint-disable-line
+
+  const handleChangeUser = async changedUser => {
+    await getData(teamDid, changedUser.did);
+    pageState.tab = defaultTab;
+  };
 
   // tab
   const Info = () => {
-    const rows = user ? [{
+    var _pageState$user$extra, _pageState$user$extra3;
+    const rows = pageState.user ? [{
       name: t('team.member.name'),
-      value: user.fullName
+      value: pageState.user.fullName
     }, {
       name: t('common.email'),
-      value: user.email
+      value: pageState.user.email
+    }, {
+      name: t('team.member.source'),
+      value: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        alignItems: "center",
+        children: [t("team.member.source_".concat(pageState.user.source || _constant.USER_TYPE.WALLET)) || '-', ((_pageState$user$extra = pageState.user.extraConfigs) === null || _pageState$user$extra === void 0 ? void 0 : _pageState$user$extra.bindDid) && /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkUser, {
+          ml: 1,
+          name: t('oauth.alreadyBindWallet'),
+          onClick: () => {
+            var _pageState$user$extra2;
+            return handleChangeUser({
+              did: (_pageState$user$extra2 = pageState.user.extraConfigs) === null || _pageState$user$extra2 === void 0 ? void 0 : _pageState$user$extra2.bindDid
+            });
+          }
+        }), ((_pageState$user$extra3 = pageState.user.extraConfigs) === null || _pageState$user$extra3 === void 0 ? void 0 : _pageState$user$extra3.derivedAccount) && /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkUser, {
+          ml: 1,
+          name: t('oauth.alreadyBindOAuth'),
+          onClick: () => {
+            pageState.tab = 'oauth';
+          }
+        })]
+      })
     }, {
       name: t('team.member.allowLogin'),
-      value: user.approved ? t('common.yes') : t('common.no')
+      value: pageState.user.approved ? t('common.yes') : t('common.no')
     }, {
       name: t('team.member.lastLogin'),
-      value: (0, _util.formatToDatetime)(user.lastLoginAt)
+      value: (0, _util.formatToDatetime)(pageState.user.lastLoginAt)
     }, {
       name: t('team.member.lastLoginIp'),
-      value: user.lastLoginIp || ''
+      value: pageState.user.lastLoginIp || ''
     }, {
       name: t('common.createdAt'),
-      value: (0, _util.formatToDatetime)(user.createdAt)
+      value: (0, _util.formatToDatetime)(pageState.user.createdAt)
     }, {
       name: t('common.remark'),
-      value: user.remark || '--'
+      value: pageState.user.remark || '--'
     }].filter(Boolean) : [];
     return rows.map(row => {
       if (row.name === t('common.did')) {
@@ -157,22 +290,35 @@ function Member(_ref) {
   const tabConfigs = {
     info: {
       label: t('common.basicInfo'),
-      value: 'info',
+      value: defaultTab,
       component: Info
     },
+    oauth: {
+      label: t('oauth.thirdPartyLogin'),
+      value: 'oauth',
+      component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(TabOAuth, {
+        user: pageState.user,
+        onChangeUser: handleChangeUser
+      })
+    },
     passports: {
       label: t('common.passport'),
       value: 'passports',
       component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_passports.default, {
-        user: user,
+        user: pageState.user,
         teamDid: teamDid,
         roles: roles,
         onCreate: () => {
-          getData(teamDid);
-          setTab('issuances');
+          getData(teamDid, userDid).then(() => {
+            // oauth 账户邀请后，不会产生待领取的邀请链接
+            // 当没有邀请链接的情况下，当前 tab 激活应当保持现状不变
+            if (enablePassportIssuance && pageState.issuances && !!pageState.issuances.length) {
+              pageState.tab = 'issuances';
+            }
+          });
         },
         onRefresh: () => {
-          getData(teamDid);
+          getData(teamDid, userDid);
         }
       })
     },
@@ -180,30 +326,34 @@ function Member(_ref) {
       label: t('team.passport.issuance.pending'),
       value: 'issuances',
       component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_passportIssuances.default, {
-        issuances: issuances || [],
+        issuances: pageState.issuances || [],
         teamDid: teamDid,
-        onRefresh: () => getData(teamDid)
+        onRefresh: () => getData(teamDid, userDid)
       })
     }
   };
-  const tabs = Object.values(tabConfigs).map(_ref2 => {
+  const tabs = Object.values(tabConfigs).map(_ref4 => {
     let {
       label,
       value
-    } = _ref2;
+    } = _ref4;
     return {
       label,
       value
     };
   }).filter(x => {
     if (x.value === 'issuances') {
-      return enablePassportIssuance && issuances && !!issuances.length;
+      return enablePassportIssuance && pageState.issuances && !!pageState.issuances.length;
+    }
+    if (x.value === 'oauth') {
+      var _pageState$user;
+      return ((_pageState$user = pageState.user) === null || _pageState$user === void 0 ? void 0 : _pageState$user.source) !== _constant.USER_TYPE.DERIVED;
     }
     return true;
   });
-  const tabConfig = tabConfigs[tab] || tabConfigs.info;
+  const tabConfig = tabConfigs[pageState.tab] || tabConfigs.info;
   const onTabChange = newTab => {
-    setTab(newTab);
+    pageState.tab = newTab;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
     title: t('common.member'),
@@ -216,18 +366,18 @@ function Member(_ref) {
       }
     },
     fullWidth: true,
-    actions: user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+    actions: pageState.user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
       permission: inService ? '' : 'mutate_team',
       role: inService ? _util.BlockletAdminRoles : [],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleUserApproval.default, {
-        user: user,
-        children: _ref3 => {
+        user: pageState.user,
+        children: _ref5 => {
           let {
             open
-          } = _ref3;
+          } = _ref5;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockButton, {
             onClick: open,
-            children: [user.approved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ForbidLoginIcon.default, {
+            children: [pageState.user.approved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ForbidLoginIcon.default, {
               style: {
                 fontSize: '1.2em',
                 marginRight: '0.4em'
@@ -237,21 +387,21 @@ function Member(_ref) {
                 fontSize: '1.2em',
                 marginRight: '0.4em'
               }
-            }), user.approved ? t('team.member.forbidLogin') : t('team.member.allowLogin')]
+            }), pageState.user.approved ? t('team.member.forbidLogin') : t('team.member.allowLogin')]
           });
         }
       })
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
-      children: [!user && /*#__PURE__*/(0, _jsxRuntime.jsx)(Center, {
+      children: [!pageState.user && /*#__PURE__*/(0, _jsxRuntime.jsx)(Center, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
-      }), user && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), pageState.user && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           display: "flex",
           alignItems: "center",
           className: "info",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-            src: user.avatar,
+            src: pageState.user.avatar,
             style: {
               width: 48,
               height: 48,
@@ -261,12 +411,12 @@ function Member(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               className: "name",
-              children: user.fullName
+              children: pageState.user.fullName
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               className: "did",
               mt: 1,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                children: user.did
+                children: pageState.user.did
               })
             })]
           })]
@@ -275,7 +425,7 @@ function Member(_ref) {
           className: "tabs",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
             tabs: tabs,
-            current: tab,
+            current: pageState.tab,
             onChange: onTabChange,
             scrollButtons: "auto"
           })
@@ -293,7 +443,7 @@ Member.propTypes = {
   initTab: _propTypes.default.string
 };
 Member.defaultProps = {
-  initTab: 'info'
+  initTab: defaultTab
 };
 const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .info {\n    .name {\n      font-weight: 400;\n      font-size: 18px;\n      line-height: 25px;\n      color: #222222;\n    }\n  }\n\n  .tabs {\n    margin-top: 24px;\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .body {\n    margin-top: 24px;\n  }\n"])));
 const Center = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 200px;\n"])));

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.16.0-beta-7a7d5d97",
+  "version": "1.16.0-beta-9a8bb7a5",
   "description": "UX components shared across abtnode packages",
   "main": "lib/index.js",
   "files": [
@@ -22,20 +22,20 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "MIT",
   "dependencies": {
-    "@abtnode/auth": "1.16.0-beta-7a7d5d97",
-    "@abtnode/constant": "1.16.0-beta-7a7d5d97",
-    "@abtnode/util": "1.16.0-beta-7a7d5d97",
-    "@arcblock/did-connect": "^2.5.16",
+    "@abtnode/auth": "1.16.0-beta-9a8bb7a5",
+    "@abtnode/constant": "1.16.0-beta-9a8bb7a5",
+    "@abtnode/util": "1.16.0-beta-9a8bb7a5",
+    "@arcblock/did-connect": "^2.5.18",
     "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.5.16",
-    "@arcblock/react-hooks": "^2.5.16",
-    "@arcblock/terminal": "^2.5.16",
-    "@arcblock/ux": "^2.5.16",
-    "@blocklet/constant": "1.16.0-beta-7a7d5d97",
+    "@arcblock/icons": "^2.5.18",
+    "@arcblock/react-hooks": "^2.5.18",
+    "@arcblock/terminal": "^2.5.18",
+    "@arcblock/ux": "^2.5.18",
+    "@blocklet/constant": "1.16.0-beta-9a8bb7a5",
     "@blocklet/launcher-layout": "1.9.65",
-    "@blocklet/list": "^0.11.10",
-    "@blocklet/meta": "1.16.0-beta-7a7d5d97",
-    "@blocklet/ui-react": "^2.5.16",
+    "@blocklet/list": "^0.11.11",
+    "@blocklet/meta": "1.16.0-beta-9a8bb7a5",
+    "@blocklet/ui-react": "^2.5.18",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify/react": "^4.0.0",
@@ -89,5 +89,5 @@
     "@babel/preset-react": "^7.18.6",
     "babel-plugin-inline-react-svg": "^1.1.2"
   },
-  "gitHead": "c25ddcc371454b2e2f7038aa5e64c7b7c27763cb"
+  "gitHead": "398944adb302d4f63024b3c540dcbfa4c330d6cb"
 }