@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/team/members/passports.js

@@ -0,0 +1,364 @@
+/* eslint-disable prettier/prettier */
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import get from 'lodash/get';
+import upperFirst from 'lodash/upperFirst';
+import Toast from '@arcblock/ux/lib/Toast';
+import AddIcon from '@mui/icons-material/Add';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { getWalletDid } from '@blocklet/meta/lib/did-utils';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
+import ExternalIssuerIcon from '@arcblock/icons/lib/ExternalIssuerIcon';
+import Empty from '@arcblock/ux/lib/Empty';
+import { PASSPORT_STATUS } from '@abtnode/constant';
+import { useNodeContext } from '../../contexts/node';
+import { useSessionContext } from '../../contexts/session';
+import { useTeamContext } from '../../contexts/team';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { formatError, BlockletAdminRoles } from '../../util';
+import Confirm from '../../confirm';
+import Permission from '../../permission';
+import SearchInput from '../search-input';
+import ListHeader from '../styles/list-header';
+import IssuePassport from './issue-passport';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function ConfirmDescription({
+  action,
+  passport
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    roles
+  } = useTeamContext();
+  const role = roles.find(x => x.name === passport.role);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("div", {
+      children: action === 'enable' ? t('team.member.enablePassportDescription') : t('team.member.revokePassportDescription')
+    }), role && /*#__PURE__*/_jsx(Box, {
+      mt: 3,
+      fontWeight: "bold",
+      children: t('team.member.passportPermissionTitle')
+    }), role && /*#__PURE__*/_jsx(Box, {
+      mt: 1,
+      children: role.description
+    })]
+  });
+}
+ConfirmDescription.propTypes = {
+  action: PropTypes.string.isRequired,
+  passport: PropTypes.object.isRequired
+};
+ConfirmDescription.defaultProps = {};
+export default function Passports({
+  user,
+  onCreate,
+  createPassportSvg
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    session
+  } = useSessionContext();
+  const {
+    roles,
+    teamDid,
+    teamIssuerDid,
+    refresh: refreshTeam,
+    enablePassportIssuance,
+    trustedPassports,
+    passportColor,
+    blocklet
+  } = useTeamContext();
+  const {
+    appIdList: idList
+  } = useBlockletContext();
+  const {
+    api,
+    inService
+  } = useNodeContext();
+  const [loading, setLoading] = useState(false);
+  const [toggleConfirm, setToggleConfirm] = useState(null);
+  const [showIssueDialog, setShowIssueDialog] = useState(false);
+  const [search, setSearch] = useState('');
+  const appIdList = [teamIssuerDid, ...(idList || [])].filter(Boolean);
+  const passports = (get(user, 'passports') || []).map(x => ({
+    ...x,
+    revoked: x.status === PASSPORT_STATUS.REVOKED
+  }));
+  const togglePassportStatus = async passport => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const method = passport.status === PASSPORT_STATUS.REVOKED ? 'enableUserPassport' : 'revokeUserPassport';
+      await api[method]({
+        input: {
+          teamDid,
+          userDid: user.did,
+          passportId: passport.id
+        }
+      });
+      refreshTeam();
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setLoading(false);
+      setToggleConfirm(null);
+    }
+  };
+  const confirmToggle = item => item.status === PASSPORT_STATUS.REVOKED ? setToggleConfirm({
+    title: t('team.member.enablePassport'),
+    description: /*#__PURE__*/_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__*/_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__*/_jsxs(Div, {
+    children: [/*#__PURE__*/_jsxs(ListHeader, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "left",
+        children: /*#__PURE__*/_jsx(SearchInput, {
+          placeholder: t('team.passport.search'),
+          value: search,
+          onChange: e => setSearch(e.target.value)
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "right",
+        children: enablePassportIssuance && !!user.approved && /*#__PURE__*/_jsx(Permission, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? BlockletAdminRoles : [],
+          children: /*#__PURE__*/_jsxs(Button, {
+            variant: "contained",
+            color: "primary",
+            "data-cy": "issue-passport",
+            onClick: () => setShowIssueDialog(true),
+            children: [/*#__PURE__*/_jsx(AddIcon, {
+              style: {
+                fontSize: 16,
+                marginRight: 4
+              }
+            }), t('team.passport.issue')]
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      children: [filteredPassports.map(x => /*#__PURE__*/_jsx(Permission, {
+        permission: inService ? '' : 'mutate_team',
+        role: inService ? BlockletAdminRoles : [],
+        children: can => /*#__PURE__*/_jsxs(Box, {
+          className: "passport-item",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mt: 3,
+          children: [/*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            children: [/*#__PURE__*/_jsx("div", {
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML: {
+                __html: createPassportSvg({
+                  title: x.title || x.name,
+                  issuer: x.issuer && x.issuer.name,
+                  issuerDid: x.issuer && x.issuer.id,
+                  ownerName: user.fullName,
+                  ownerDid: user.did,
+                  ownerAvatarUrl: user.avatar,
+                  revoked: x.revoked,
+                  preferredColor: passportColor,
+                  width: '150px'
+                })
+              }
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "body",
+              children: [/*#__PURE__*/_jsxs(Box, {
+                className: "title",
+                display: "flex",
+                alignItems: "center",
+                children: [upperFirst(x.title), /*#__PURE__*/_jsxs("div", {
+                  className: "status-icons",
+                  children: [!!appIdList.length && !appIdList.includes(x.issuer.id) && /*#__PURE__*/_jsx(ExternalIssuerIcon, {}), x.revoked && /*#__PURE__*/_jsx(RevokeIcon, {})]
+                })]
+              }), x.expirationDate && /*#__PURE__*/_jsx(Box, {
+                className: "title",
+                display: "flex",
+                alignItems: "center",
+                children: t('team.passport.validUntil', {
+                  date: x.expirationDate
+                })
+              }), !!appIdList.length && !appIdList.includes(x.issuer.id) && /*#__PURE__*/_jsxs("div", {
+                className: "tip",
+                children: [x.issuer.id !== teamIssuerDid && !trustedPassports.some(y => y.issuerDid === x.issuer.id) && /*#__PURE__*/_jsx(Tooltip, {
+                  title: t('team.passport.notTrustedIssuerTip'),
+                  children: /*#__PURE__*/_jsx(Box, {
+                    component: ErrorOutlineIcon,
+                    style: {
+                      fontSize: '1.3em'
+                    },
+                    color: "error.main",
+                    mr: 0.5
+                  })
+                }), /*#__PURE__*/_jsx("span", {
+                  children: t('team.passport.issueBy', {
+                    name: x.issuer.name
+                  })
+                })]
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(Box, {
+            children: revokeInfo(can, x).revokable ? /*#__PURE__*/_jsxs(Button, {
+              variant: "outlined",
+              color: x.revoked ? 'primary' : 'secondary',
+              onClick: () => confirmToggle(x),
+              children: [x.revoked ? /*#__PURE__*/_jsx(AddIcon, {
+                style: {
+                  fontSize: 16,
+                  marginRight: 4
+                }
+              }) : /*#__PURE__*/_jsx(RevokeIcon, {
+                style: {
+                  height: 16,
+                  marginRight: 4
+                }
+              }), x.revoked ? t('common.enable') : t('common.revoke')]
+            }) : /*#__PURE__*/_jsx(Tooltip, {
+              title: revokeInfo(can, x).message,
+              children: /*#__PURE__*/_jsx(ErrorOutlineIcon, {
+                style: {
+                  color: '#ddd'
+                }
+              })
+            })
+          })]
+        })
+      }, x.id)), !filteredPassports.length && /*#__PURE__*/_jsx(Empty, {
+        children: t('common.empty')
+      })]
+    }), showIssueDialog && /*#__PURE__*/_jsx(IssuePassport, {
+      teamDid: teamDid,
+      ownerDid: user.did,
+      needReceive: getWalletDid(user) === user.did,
+      roles: roles,
+      onCancel: () => setShowIssueDialog(false),
+      onSuccess: () => {
+        onCreate();
+        setShowIssueDialog(false);
+      },
+      showOwnerPassport: blocklet && !blocklet.settings?.owner
+    }), toggleConfirm && /*#__PURE__*/_jsx(Confirm, {
+      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.object.isRequired,
+  createPassportSvg: PropTypes.func.isRequired,
+  onCreate: PropTypes.func
+};
+Passports.defaultProps = {
+  onCreate: () => {}
+};
+const Div = styled.div`
+  .passport-item {
+    .body {
+      padding: 0;
+      margin-left: 24px;
+      margin-top: 0;
+    }
+    .title {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      color: #222222;
+    }
+    .tip {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      margin-top: 6px;
+      color: #bbb;
+    }
+    .status-icons {
+      svg {
+        fill: #bfbfbf;
+        height: 1.2em;
+        margin-left: 0.4em;
+      }
+    }
+    .MuiButton-outlinedSecondary {
+      color: #f16e6e;
+      fill: #f16e6e;
+      background: #fcf3f3;
+      border: 0;
+      &:hover {
+        border: 0;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import Confirm from '../../confirm';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { useSessionContext } from '../../contexts/session';
+import { formatError } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const isNodeOwner = (nodeInfo, userDid) => nodeInfo.nodeOwner && nodeInfo.nodeOwner.did === userDid;
+const isSelf = (sessionUser, userDid) => sessionUser && sessionUser.did === userDid;
+export default function ToggleUserApproval({
+  user,
+  onCancel,
+  onSuccess,
+  onError,
+  children
+}) {
+  const {
+    api,
+    info: nodeInfo,
+    inService
+  } = useNodeContext();
+  const {
+    session
+  } = useSessionContext();
+  const {
+    teamDid,
+    refresh
+  } = useTeamContext();
+  const {
+    t
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  const [show, setShow] = 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.error(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__*/_jsxs(_Fragment, {
+    children: [typeof children === 'function' ? children({
+      can,
+      open
+    }) : children, show ? /*#__PURE__*/_jsx(Confirm, {
+      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.object,
+  onSuccess: PropTypes.func,
+  onCancel: PropTypes.func,
+  onError: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+ToggleUserApproval.defaultProps = {
+  user: {},
+  onSuccess: () => {},
+  onCancel: () => {},
+  onError: () => {},
+  children: null
+};