@abtnode/ux 1.8.26 → 1.8.27

package/lib/team/members/passports.js

@@ -0,0 +1,377 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Passports;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _notistack = require("notistack");
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
+
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+
+var _ErrorOutline = _interopRequireDefault(require("@mui/icons-material/ErrorOutline"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+
+var _RevokeIcon = _interopRequireDefault(require("@arcblock/icons/lib/RevokeIcon"));
+
+var _ExternalIssuerIcon = _interopRequireDefault(require("@arcblock/icons/lib/ExternalIssuerIcon"));
+
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+
+var _constant = require("@abtnode/constant");
+
+var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
+
+var _node = require("../../contexts/node");
+
+var _session = require("../../contexts/session");
+
+var _team = require("../../contexts/team");
+
+var _util = require("../../util");
+
+var _confirm = _interopRequireDefault(require("../../confirm"));
+
+var _permission = _interopRequireDefault(require("../../permission"));
+
+var _searchInput = _interopRequireDefault(require("../search-input"));
+
+var _listHeader = _interopRequireDefault(require("../styles/list-header"));
+
+var _issuePassport = _interopRequireDefault(require("./issue-passport"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+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 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function ConfirmDescription(_ref) {
+  let {
+    action,
+    passport
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    roles
+  } = (0, _team.useTeamContext)();
+  const role = roles.find(x => x.name === passport.role);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: action === 'enable' ? t('team.member.enablePassportDescription') : t('team.member.revokePassportDescription')
+    }), role && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 3,
+      fontWeight: "bold",
+      children: t('team.member.passportPermissionTitle')
+    }), role && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 1,
+      children: role.description
+    })]
+  });
+}
+
+ConfirmDescription.propTypes = {
+  action: _propTypes.default.string.isRequired,
+  passport: _propTypes.default.object.isRequired
+};
+ConfirmDescription.defaultProps = {};
+
+function Passports(_ref2) {
+  var _blocklet$settings;
+
+  let {
+    user,
+    onCreate
+  } = _ref2;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    session,
+    inService
+  } = (0, _session.useSessionContext)();
+  const {
+    roles,
+    teamDid,
+    teamIssuerDid,
+    refresh: refreshTeam,
+    enablePassportIssuance,
+    trustedPassports,
+    passportColor,
+    blocklet
+  } = (0, _team.useTeamContext)();
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [toggleConfirm, setToggleConfirm] = (0, _react.useState)(null);
+  const [showIssueDialog, setShowIssueDialog] = (0, _react.useState)(false);
+  const [search, setSearch] = (0, _react.useState)('');
+  const passports = ((0, _get.default)(user, 'passports') || []).map(x => _objectSpread(_objectSpread({}, x), {}, {
+    revoked: x.status === _constant.PASSPORT_STATUS.REVOKED
+  }));
+
+  const togglePassportStatus = async passport => {
+    if (loading) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const method = passport.status === _constant.PASSPORT_STATUS.REVOKED ? 'enableUserPassport' : 'revokeUserPassport';
+      await api[method]({
+        input: {
+          teamDid,
+          userDid: user.did,
+          passportId: passport.id
+        }
+      });
+      refreshTeam();
+    } catch (err) {
+      enqueueSnackbar((0, _util.formatError)(err), {
+        autoHideDuration: 5000,
+        variant: 'error'
+      });
+    } finally {
+      setLoading(false);
+      setToggleConfirm(null);
+    }
+  };
+
+  const confirmToggle = item => item.status === _constant.PASSPORT_STATUS.REVOKED ? setToggleConfirm({
+    title: t('team.member.enablePassport'),
+    description: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmDescription, {
+      action: "enable",
+      passport: item
+    }),
+    confirm: t('common.enable'),
+    cancel: t('common.cancel'),
+    onConfirm: () => {
+      togglePassportStatus(item);
+    },
+    onCancel: () => {
+      setLoading(false);
+      setToggleConfirm(null);
+    },
+    color: 'primary'
+  }) : setToggleConfirm({
+    title: t('team.member.revokePassport'),
+    description: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmDescription, {
+      action: "revoke",
+      passport: item
+    }),
+    confirm: t('common.revoke'),
+    cancel: t('common.cancel'),
+    onConfirm: () => {
+      togglePassportStatus(item);
+    },
+    onCancel: () => {
+      setLoading(false);
+      setToggleConfirm(null);
+    }
+  });
+
+  const revokeInfo = (hasPermission, passport) => {
+    if (user.did === session.user.did && session.user.passportId && session.user.passportId === passport.id) {
+      return {
+        revokable: false,
+        message: t('team.passport.shouldNotDeleteCurrent')
+      };
+    }
+
+    if (!hasPermission) {
+      return {
+        revokable: false,
+        message: t('team.passport.noPermission')
+      };
+    }
+
+    if (teamDid === passport.issuer.id && passport.name === 'owner') {
+      return {
+        revokable: false,
+        message: t('team.passport.noPermission')
+      };
+    }
+
+    return {
+      revokable: true
+    };
+  };
+
+  const filteredPassports = passports.filter(x => !search || x.title.includes(search) || x.name.includes(search));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_listHeader.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchInput.default, {
+          placeholder: t('team.passport.search'),
+          value: search,
+          onChange: e => setSearch(e.target.value)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "right",
+        children: enablePassportIssuance && !!user.approved && /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            variant: "contained",
+            color: "primary",
+            "data-cy": "issue-passport",
+            onClick: () => setShowIssueDialog(true),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+              style: {
+                fontSize: 16,
+                marginRight: 4
+              }
+            }), t('team.passport.issue')]
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: [filteredPassports.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+        permission: inService ? '' : 'mutate_team',
+        role: inService ? _util.BlockletAdminRoles : [],
+        children: can => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "passport-item",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mt: 3,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML: {
+                __html: (0, _createPassportSvg.default)({
+                  title: x.title || x.name,
+                  issuer: x.issuer && x.issuer.name,
+                  issuerDid: x.issuer && x.issuer.id,
+                  ownerName: user.fullName,
+                  ownerAvatarUrl: user.avatar,
+                  revoked: x.revoked,
+                  preferredColor: passportColor,
+                  width: '120px'
+                })
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "body",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+                className: "title",
+                display: "flex",
+                alignItems: "center",
+                children: [(0, _upperFirst.default)(x.title), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  className: "status-icons",
+                  children: [!!teamIssuerDid && x.issuer.id !== teamIssuerDid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExternalIssuerIcon.default, {}), x.revoked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RevokeIcon.default, {})]
+                })]
+              }), !!teamIssuerDid && x.issuer.id !== teamIssuerDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "tip",
+                children: [x.issuer.id !== teamIssuerDid && !trustedPassports.some(y => y.issuerDid === x.issuer.id) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+                  title: t('team.passport.notTrustedIssuerTip'),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                    component: _ErrorOutline.default,
+                    style: {
+                      fontSize: '1.3em'
+                    },
+                    color: "error.main",
+                    mr: 0.5
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: t('team.passport.issueBy', {
+                    name: x.issuer.name
+                  })
+                })]
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: revokeInfo(can, x).revokable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+              variant: "outlined",
+              color: x.revoked ? 'primary' : 'secondary',
+              onClick: () => confirmToggle(x),
+              children: [x.revoked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                style: {
+                  fontSize: 16,
+                  marginRight: 4
+                }
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RevokeIcon.default, {
+                style: {
+                  height: 16,
+                  marginRight: 4
+                }
+              }), x.revoked ? t('common.enable') : t('common.revoke')]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+              title: revokeInfo(can, x).message,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorOutline.default, {
+                style: {
+                  color: '#ddd'
+                }
+              })
+            })
+          })]
+        })
+      })), !filteredPassports.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+        children: t('common.empty')
+      })]
+    }), showIssueDialog && /*#__PURE__*/(0, _jsxRuntime.jsx)(_issuePassport.default, {
+      teamDid: teamDid,
+      ownerDid: user.did,
+      roles: roles,
+      onCancel: () => setShowIssueDialog(false),
+      onSuccess: () => {
+        onCreate();
+        setShowIssueDialog(false);
+      },
+      showOwnerPassport: blocklet && !((_blocklet$settings = blocklet.settings) !== null && _blocklet$settings !== void 0 && _blocklet$settings.owner)
+    }), toggleConfirm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: toggleConfirm.title,
+      description: toggleConfirm.description,
+      confirm: toggleConfirm.confirm,
+      cancel: toggleConfirm.cancel,
+      params: toggleConfirm.params,
+      onConfirm: toggleConfirm.onConfirm,
+      onCancel: toggleConfirm.onCancel,
+      color: toggleConfirm.color
+    })]
+  });
+}
+
+Passports.propTypes = {
+  user: _propTypes.default.object.isRequired,
+  onCreate: _propTypes.default.func
+};
+Passports.defaultProps = {
+  onCreate: () => {}
+};
+
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .passport-item {\n    .body {\n      padding: 0;\n      margin-left: 24px;\n      margin-top: 0;\n    }\n    .title {\n      font-weight: 400;\n      font-size: 16px;\n      line-height: 19px;\n      color: #222222;\n    }\n    .tip {\n      display: flex;\n      align-items: center;\n      font-size: 14px;\n      margin-top: 6px;\n      color: #bbb;\n    }\n    .status-icons {\n      svg {\n        fill: #bfbfbf;\n        height: 1.2em;\n        margin-left: 0.4em;\n      }\n    }\n    .MuiButton-outlinedSecondary {\n      color: #f16e6e;\n      fill: #f16e6e;\n      background: #fcf3f3;\n      border: 0;\n      &:hover {\n        border: 0;\n      }\n    }\n  }\n"])));

package/lib/team/members/toggle-user-approval.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ToggleUserApproval;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _toast = _interopRequireDefault(require("../../toast"));
+
+var _confirm = _interopRequireDefault(require("../../confirm"));
+
+var _node = require("../../contexts/node");
+
+var _team = require("../../contexts/team");
+
+var _session = require("../../contexts/session");
+
+var _util = require("../../util");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const isNodeOwner = (nodeInfo, userDid) => nodeInfo.nodeOwner && nodeInfo.nodeOwner.did === userDid;
+
+const isSelf = (sessionUser, userDid) => sessionUser && sessionUser.did === userDid;
+
+function ToggleUserApproval(_ref) {
+  let {
+    user,
+    onCancel: _onCancel,
+    onSuccess,
+    onError,
+    children
+  } = _ref;
+  const {
+    api,
+    info: nodeInfo,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    session
+  } = (0, _session.useSessionContext)();
+  const {
+    teamDid,
+    refresh
+  } = (0, _team.useTeamContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [show, setShow] = (0, _react.useState)(false);
+
+  const open = () => setShow(true);
+
+  const updateUserApproval = async d => {
+    const {
+      did,
+      approved
+    } = d;
+
+    if (loading) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await api.updateUserApproval({
+        input: {
+          teamDid,
+          user: {
+            did,
+            approved: !approved
+          }
+        }
+      });
+      setShow(false);
+      onSuccess();
+      refresh();
+    } catch (error) {
+      _toast.default.error((0, _util.formatError)(error));
+
+      onError();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const approveConfirm = {
+    title: user.approved ? t('team.member.forbidLogin') : t('team.member.allowLogin'),
+    description: user.approved ? t('team.member.forbidLoginDescription') : t('team.member.allowLoginDescription'),
+    confirm: t('common.confirm'),
+    cancel: t('common.cancel'),
+    onConfirm: () => {
+      updateUserApproval(user);
+    },
+    onCancel: () => {
+      setLoading(false);
+      setShow(false);
+
+      _onCancel();
+    },
+    color: user.approved ? 'error' : 'primary'
+  };
+  let can;
+
+  if (!inService) {
+    can = nodeInfo.nodeOwner && !isNodeOwner(nodeInfo, user.did) && !isSelf(session.user, user.did);
+  } else {
+    can = !isSelf(session.user, user.did);
+  }
+
+  if (!can) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [typeof children === 'function' ? children({
+      can,
+      open
+    }) : children, show ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: approveConfirm.title,
+      description: approveConfirm.description,
+      confirm: approveConfirm.confirm,
+      cancel: approveConfirm.cancel,
+      params: approveConfirm.params,
+      onConfirm: approveConfirm.onConfirm,
+      onCancel: approveConfirm.onCancel,
+      color: approveConfirm.color
+    }) : null]
+  });
+}
+
+ToggleUserApproval.propTypes = {
+  user: _propTypes.default.object,
+  onSuccess: _propTypes.default.func,
+  onCancel: _propTypes.default.func,
+  onError: _propTypes.default.func,
+  children: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
+};
+ToggleUserApproval.defaultProps = {
+  user: {},
+  onSuccess: () => {},
+  onCancel: () => {},
+  onError: () => {},
+  children: null
+};