@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/team/members/passport-issuances.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportIssuances;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _notistack = require("notistack");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _node = require("../../contexts/node");
+var _team = require("../../contexts/team");
+var _confirm = _interopRequireDefault(require("../../confirm"));
+var _permission = _interopRequireDefault(require("../../permission"));
+var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
+var _passportTag = _interopRequireDefault(require("../../passport-tag"));
+var _util = require("../../util");
+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 PassportIssuances(_ref) {
+  let {
+    issuances,
+    teamDid,
+    onRefresh
+  } = _ref;
+  const {
+    api: client,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const [delConfirm, setDelConfirm] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  const {
+    endpoint
+  } = (0, _team.useTeamContext)();
+  const deleteIssuance = async _ref2 => {
+    let {
+      id
+    } = _ref2;
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      await client.deletePassportIssuance({
+        input: {
+          teamDid,
+          sessionId: id
+        }
+      });
+      onRefresh();
+    } catch (error) {
+      enqueueSnackbar(error.message, {
+        autoHideDuration: 5000,
+        variant: 'error'
+      });
+    } finally {
+      setLoading(false);
+      setDelConfirm(null);
+    }
+  };
+  const onCancel = () => {
+    setLoading(false);
+    setDelConfirm(null);
+  };
+  const getLink = column => endpoint ? (0, _util.getIssuePassportLink)({
+    id: column.id,
+    endpoint
+  }) : '';
+
+  // eslint-disable-next-line react/prop-types
+  // eslint-disable-next-line react/no-unstable-nested-components
+  function Issuance(_ref3) {
+    let {
+      data: d
+    } = _ref3;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "issuance",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: can => can ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_passportTag.default, {
+            passport: {
+              title: d.title,
+              name: d.name
+            },
+            onDelete: () => setDelConfirm({
+              title: t('team.passport.issuance.delete.title'),
+              description: t('team.passport.issuance.delete.description', {
+                link: getLink(d)
+              }),
+              confirm: t('common.delConfirm'),
+              cancel: t('common.cancel'),
+              onConfirm: () => {
+                deleteIssuance(d);
+              },
+              onCancel
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_passportTag.default, {
+            passport: {
+              title: d.title,
+              name: d.name
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            color: '#999'
+          },
+          children: [t('common.expires'), ":\xA0", (0, _util.formatToDatetime)(d.expireDate)]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mt: 2,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+          children: getLink(d)
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [issuances.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(Issuance, {
+      data: x
+    })), delConfirm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: delConfirm.title,
+      description: delConfirm.description,
+      confirm: delConfirm.confirm,
+      cancel: delConfirm.cancel,
+      params: delConfirm.params,
+      onConfirm: delConfirm.onConfirm,
+      onCancel: delConfirm.onCancel
+    })]
+  });
+}
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiTableHead-root {\n    display: none;\n  }\n  .issuance {\n    padding: 16px 0;\n    border-bottom: 1px solid #f0f0f0;\n    .MuiTypography-root {\n      display: inline-block;\n      width: 100%;\n      background: #f3f3f3;\n      border-radius: 4px;\n      padding-top: 6px;\n      padding-bottom: 6px;\n    }\n  }\n"])));
+PassportIssuances.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  issuances: _propTypes.default.array,
+  onRefresh: _propTypes.default.func
+};
+PassportIssuances.defaultProps = {
+  issuances: [],
+  onRefresh: () => {}
+};

package/lib/team/members/passports.js

@@ -0,0 +1,336 @@
+"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 _blocklet = require("../../contexts/blocklet");
+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) { 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 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
+  } = (0, _session.useSessionContext)();
+  const {
+    roles,
+    teamDid,
+    teamIssuerDid,
+    refresh: refreshTeam,
+    enablePassportIssuance,
+    trustedPassports,
+    passportColor,
+    blocklet
+  } = (0, _team.useTeamContext)();
+  const {
+    appIdList: idList
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    api,
+    inService
+  } = (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 appIdList = [teamIssuerDid, ...(idList || [])].filter(Boolean);
+  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: [!!appIdList.length && !appIdList.includes(x.issuer.id) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExternalIssuerIcon.default, {}), x.revoked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RevokeIcon.default, {})]
+                })]
+              }), !!appIdList.length && !appIdList.includes(x.issuer.id) && /*#__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,128 @@
+"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
+};