@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/team/members/transfer-node.js

@@ -0,0 +1,256 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import useAsync from 'react-use/lib/useAsync';
+import get from 'lodash/get';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import DialogContentText from '@mui/material/DialogContentText';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Connect from '@arcblock/did-connect/lib/Connect';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Alert from '@arcblock/ux/lib/Alert';
+import ClickToCopy from '../../click-to-copy';
+import { useNodeContext } from '../../contexts/node';
+import { formatError, getInviteLink, formatToDatetime, getWebWalletUrl } from '../../util';
+import { SessionContext } from '../../contexts/session';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function TransferMember({
+  teamDid,
+  onCancel,
+  onSuccess,
+  onError,
+  endpoint
+}) {
+  const {
+    api,
+    info
+  } = useNodeContext();
+  const {
+    api: sessionAPI
+  } = useContext(SessionContext);
+  const [loading, setLoading] = useState(false);
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [error, setError] = useState('');
+  const [openTransferNFTAuth, setOpenTransferNFTAuth] = useState(false);
+  const [activeStep, setActiveStep] = useState(0);
+  const [inviteInfo, setInviteInfo] = useState('');
+  const [remark, setRemark] = useState('');
+  const needTransferNFT = !!get(info, 'ownerNft.did');
+  const delegationState = useAsync(async () => {
+    if (needTransferNFT) {
+      const {
+        state
+      } = await api.getDelegationState();
+      return state;
+    }
+    return {
+      delegated: true
+    };
+  });
+  if (delegationState.loading) {
+    return /*#__PURE__*/_jsx(Dialog, {
+      title: t('team.transferNode.inviteDialog.title'),
+      fullWidth: true,
+      open: true,
+      onClose: onCancel,
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/_jsx(Spinner, {})
+      })
+    });
+  }
+  if (delegationState.error) {
+    return /*#__PURE__*/_jsx(Dialog, {
+      title: t('team.transferNode.inviteDialog.title'),
+      fullWidth: true,
+      open: true,
+      onClose: onCancel,
+      children: /*#__PURE__*/_jsx(Alert, {
+        type: "error",
+        variant: "icon",
+        children: formatError(delegationState.error)
+      })
+    });
+  }
+  const onCreate = async () => {
+    setError(null);
+    setLoading(true);
+    try {
+      const {
+        inviteInfo: tmpInviteInfo
+      } = await api.createTransferInvitation({
+        input: {
+          teamDid,
+          role: 'owner',
+          remark: remark.trim()
+        }
+      });
+      setInviteInfo(tmpInviteInfo);
+      setActiveStep(steps.length - 1); // 跳转到最后一步
+    } catch (err) {
+      const errMsg = formatError(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleTransferNFT = () => {
+    setOpenTransferNFTAuth(true);
+    setActiveStep(1);
+  };
+  const handleCancelTransferNFT = () => {
+    setOpenTransferNFTAuth(false);
+    setActiveStep(0);
+  };
+  const steps = [{
+    body: /*#__PURE__*/_jsxs(Typography, {
+      component: "div",
+      children: [/*#__PURE__*/_jsxs(Alert, {
+        type: "warning",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          children: t('team.transferNode.inviteDialog.tips.progress')
+        }), /*#__PURE__*/_jsx(Typography, {
+          children: t('team.transferNode.inviteDialog.tips.newOwnerPermissions')
+        })]
+      }), /*#__PURE__*/_jsx(Alert, {
+        type: "warning",
+        children: /*#__PURE__*/_jsx(Typography, {
+          children: t('team.transferNode.inviteDialog.tips.revoke')
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 10
+        }
+      }), /*#__PURE__*/_jsx(TextField, {
+        label: t('common.remark'),
+        autoComplete: "off",
+        variant: "outlined",
+        fullWidth: true,
+        style: {
+          marginBottom: 8
+        },
+        value: remark,
+        onChange: e => {
+          setError(null);
+          setRemark(e.target.value);
+        },
+        disabled: loading,
+        "data-cy": "transfer-node-input-remark"
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 10
+        }
+      })]
+    }),
+    cancel: t('common.cancel'),
+    confirm: t('team.transferNode.inviteDialog.createInviteLink'),
+    onCancel,
+    onConfirm: needTransferNFT && !get(delegationState, 'value.delegated') ? handleTransferNFT : onCreate
+  }, {
+    body: () => {
+      return /*#__PURE__*/_jsx(Connect, {
+        action: "delegate-transfer-nft",
+        open: openTransferNFTAuth,
+        locale: locale,
+        checkFn: sessionAPI.get,
+        onClose: handleCancelTransferNFT,
+        onSuccess: onCreate,
+        checkTimeout: 5 * 60 * 1000,
+        webWalletUrl: getWebWalletUrl(info),
+        extraParams: {
+          targetDID: info.did
+        },
+        messages: {
+          title: t('team.transferNode.delegateDialog.title'),
+          scan: t('team.transferNode.delegateDialog.scan'),
+          confirm: t('team.transferNode.delegateDialog.confirm'),
+          success: t('team.transferNode.delegateDialog.success')
+        },
+        popup: true
+      });
+    }
+  }, {
+    body: () => {
+      const link = getInviteLink({
+        inviteId: inviteInfo.inviteId,
+        endpoint
+      });
+      return /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(Bold, {
+          children: t('team.transferNode.inviteDialog.createSuccessTip', {
+            expireDate: formatToDatetime(inviteInfo.expireDate, locale)
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            marginTop: '40px'
+          }
+        }), /*#__PURE__*/_jsx(ClickToCopy, {
+          children: link
+        })]
+      });
+    },
+    confirm: t('common.confirm'),
+    onConfirm: onSuccess
+  }];
+  const step = steps[activeStep];
+  return /*#__PURE__*/_jsxs(Dialog, {
+    title: t('team.transferNode.inviteDialog.title'),
+    fullWidth: true,
+    open: true,
+    showCloseButton: false,
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [step.cancel && /*#__PURE__*/_jsx(Button, {
+        onClick: step.onCancel,
+        color: "inherit",
+        children: step.cancel
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: step.onConfirm,
+        color: "primary",
+        disabled: loading,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), step.confirm]
+      })]
+    }),
+    children: [/*#__PURE__*/_jsx(DialogContentText, {
+      component: "div",
+      children: typeof step.body === 'function' ? step.body() : step.body
+    }), !!error && /*#__PURE__*/_jsx(Alert, {
+      type: "error",
+      variant: "icon",
+      children: error
+    })]
+  });
+}
+TransferMember.propTypes = {
+  teamDid: PropTypes.string.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  onError: PropTypes.func,
+  endpoint: PropTypes.string
+};
+TransferMember.defaultProps = {
+  onError: () => {},
+  endpoint: ''
+};
+const Bold = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+`;

package/es/team/members/util.js

@@ -0,0 +1,14 @@
+import joinUrl from 'url-join';
+import { USER_AVATAR_URL_PREFIX, USER_AVATAR_PATH_PREFIX } from '@abtnode/constant';
+
+// eslint-disable-next-line import/prefer-default-export
+export function parseAvatar(avatar, teamDid, inService) {
+  if (avatar && avatar.startsWith(USER_AVATAR_URL_PREFIX)) {
+    const prefix = window.env.apiPrefix || '/';
+    if (inService) {
+      return joinUrl(prefix, USER_AVATAR_PATH_PREFIX, avatar.replace(USER_AVATAR_URL_PREFIX, ''));
+    }
+    return joinUrl(prefix, USER_AVATAR_PATH_PREFIX, teamDid, avatar.replace(USER_AVATAR_URL_PREFIX, ''));
+  }
+  return avatar;
+}

package/es/team/passports/color.js

@@ -0,0 +1,127 @@
+/* eslint-disable react/no-danger */
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import { ChromePicker } from 'react-color';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import createPassportSvg from '@abtnode/auth/lib/util/create-passport-svg';
+import { getDisplayName } from '@blocklet/meta/lib/util';
+import { getPassportColorFromDid } from '@arcblock/nft-display';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../contexts/node';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { BlockletAdminRoles } from '../../util';
+import { withPermission } from '../../permission';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function PassportColor({
+  onCancel,
+  onSuccess
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    t
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  const curColor = (blocklet.environments.find(x => x.key === 'BLOCKLET_PASSPORT_COLOR') || {}).value || 'auto';
+  const defaultColor = curColor === 'auto' ? getPassportColorFromDid(blocklet.appDid) : curColor;
+  const [color, setColor] = useState(defaultColor);
+  const onSubmit = async () => {
+    const params = [{
+      key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_PASSPORT_COLOR,
+      value: color
+    }];
+    try {
+      setLoading(true);
+      await api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: params
+        }
+      });
+      onSuccess();
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_jsx(Dialog, {
+    title: t('team.passport.color'),
+    onClose: onCancel,
+    open: true,
+    fullWidth: true,
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onCancel,
+        color: "inherit",
+        children: t('common.cancel')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: onSubmit,
+        color: "primary",
+        disabled: loading,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "color-btn-confirm",
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), t('common.save')]
+      })]
+    }),
+    children: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      className: "dialog-content",
+      children: [/*#__PURE__*/_jsx(ChromePicker, {
+        color: color,
+        onChange: c => setColor(c.hex)
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          width: 220,
+          marginLeft: 24
+        },
+        dangerouslySetInnerHTML: {
+          __html: createPassportSvg({
+            title: 'Owner',
+            issuer: getDisplayName(blocklet),
+            issuerDid: blocklet.appDid,
+            ownerName: 'Your Name',
+            ownerDid: blocklet.appDid,
+            preferredColor: color
+          })
+        }
+      })]
+    })
+  });
+}
+const PassportColorInDaemon = withPermission(PassportColor, 'mutate_team');
+const PassportColorInService = withPermission(PassportColor, '', BlockletAdminRoles);
+export default function PassportColorWithPermission(props) {
+  const {
+    inService
+  } = useNodeContext();
+  if (inService) {
+    return /*#__PURE__*/_jsx(PassportColorInService, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(PassportColorInDaemon, {
+    ...props
+  });
+}
+PassportColor.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired
+};
+PassportColor.defaultProps = {};

package/es/team/passports/detail.js

@@ -0,0 +1,312 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import cloneDeep from 'lodash/cloneDeep';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import IconButton from '@mui/material/IconButton';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import EditIcon from '@arcblock/icons/lib/EditIcon';
+import DeleteIcon from '@arcblock/icons/lib/DeleteIcon';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { formatError, isProtectedRole, BlockletAdminRoles } from '../../util';
+import { withPermission } from '../../permission';
+import Confirm from '../../confirm';
+import MutateRole from './mutate-role';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function PassportDetail({
+  onCancel,
+  onSuccess,
+  onDelete,
+  roleName,
+  hasPermission
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    roles,
+    permissions,
+    teamDid,
+    refresh: refreshTeam,
+    isNodeTeam
+  } = useTeamContext();
+  const {
+    t
+  } = useLocaleContext();
+  const [binds, setBinds] = useState([]);
+  const [updateForm, setUpdateForm] = useState(false);
+  const [delConfirm, setDelConfirm] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const role = cloneDeep(roles.find(x => x.name === roleName));
+  const isProtected = isProtectedRole(roleName);
+  const deletePassport = async name => {
+    if (loading) return;
+    try {
+      setLoading(true);
+      await api.deleteRole({
+        input: {
+          teamDid,
+          name
+        }
+      });
+      onDelete();
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setLoading(false);
+      setDelConfirm(null);
+    }
+  };
+  const getData = async (team, name) => {
+    const res = await api.getPermissionsByRole({
+      input: {
+        teamDid: team,
+        role: {
+          name
+        }
+      }
+    });
+    const permissionList = res.permissions || [];
+    const bindList = permissions.map(x => ({
+      ...x,
+      bind: permissionList.some(y => y.name === x.name)
+    }));
+    setBinds(bindList);
+  };
+  const onBind = async () => {
+    setLoading(true);
+    const grantNames = binds.filter(x => x.bind).map(x => x.name);
+    try {
+      await api.updatePermissionsForRole({
+        input: {
+          teamDid,
+          roleName: role.name,
+          grantNames
+        }
+      });
+      Toast.success(t('common.saveSuccess'));
+      onSuccess();
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (teamDid && roleName) {
+      getData(teamDid, roleName);
+    }
+  }, [teamDid, roleName]); // eslint-disable-line
+
+  const readPermissionsOnly = isNodeTeam || !hasPermission;
+  let bindPermission = null;
+  if (isNodeTeam) {
+    bindPermission = /*#__PURE__*/_jsxs("div", {
+      className: "bind",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "title",
+        children: t('common.permission')
+      }), /*#__PURE__*/_jsx("div", {
+        className: "list",
+        children: binds
+        // if readonly, show obtained permissions only
+        .filter(x => readPermissionsOnly ? x.bind : true).map(x => /*#__PURE__*/_jsx("div", {
+          className: "item",
+          children: /*#__PURE__*/_jsx(FormControlLabel, {
+            control: /*#__PURE__*/_jsx(Checkbox, {
+              disabled: readPermissionsOnly,
+              checked: x.bind,
+              onChange: () => {
+                setBinds(state => state.map(y => {
+                  if (y.name === x.name) {
+                    y.bind = !y.bind;
+                  }
+                  return y;
+                }));
+              },
+              name: x.name
+            }),
+            label: x.description
+          })
+        }))
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Dialog, {
+    title: t('common.passport'),
+    onClose: onCancel,
+    open: true,
+    fullWidth: true,
+    toolbar: hasPermission && !isProtected && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setUpdateForm(role),
+        "data-cy": `edit-passport-${role.name}`,
+        size: "large",
+        children: /*#__PURE__*/_jsx(EditIcon, {
+          fill: "#bfbfbf"
+        })
+      }), /*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setDelConfirm({
+          title: t('team.passport.delete.title'),
+          description: t('team.passport.delete.description', {
+            name: role.title
+          }),
+          confirm: t('common.delConfirm'),
+          cancel: t('common.cancel'),
+          onConfirm: () => {
+            deletePassport(role.name);
+          },
+          onCancel: () => {
+            setLoading(false);
+            setDelConfirm(null);
+          }
+        }),
+        "data-cy": `delete-passport-${role.name}`,
+        size: "large",
+        children: /*#__PURE__*/_jsx(DeleteIcon, {
+          "data-cy": "close-passport-dialog",
+          fill: "#bfbfbf"
+        })
+      })]
+    }),
+    actions: isNodeTeam && !readPermissionsOnly && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onCancel,
+        color: "inherit",
+        children: t('common.cancel')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: onBind,
+        color: "primary",
+        disabled: loading || !role,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "bind-permission-btn-confirm",
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), t('common.save')]
+      })]
+    }),
+    children: [/*#__PURE__*/_jsxs(Div, {
+      children: [!role && /*#__PURE__*/_jsx(Center, {
+        children: /*#__PURE__*/_jsx(Spinner, {})
+      }), role && /*#__PURE__*/_jsxs("div", {
+        className: "dialog-content",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "header",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "title",
+            children: role.title
+          }), /*#__PURE__*/_jsx("div", {
+            className: "description",
+            style: {
+              marginTop: isNodeTeam ? 16 : 48
+            },
+            children: role.description
+          })]
+        }), bindPermission]
+      })]
+    }), updateForm && /*#__PURE__*/_jsx(MutateRole, {
+      teamDid: teamDid,
+      onCancel: () => setUpdateForm(null),
+      onSuccess: () => {
+        setUpdateForm(null);
+        refreshTeam();
+      },
+      mode: "update",
+      roleName: updateForm.name,
+      item: updateForm
+    }), delConfirm && /*#__PURE__*/_jsx(Confirm, {
+      title: delConfirm.title,
+      description: delConfirm.description,
+      confirm: delConfirm.confirm,
+      cancel: delConfirm.cancel,
+      params: delConfirm.params,
+      onConfirm: delConfirm.onConfirm,
+      onCancel: delConfirm.onCancel
+    })]
+  });
+}
+const PassportDetailInDaemon = withPermission(PassportDetail, 'mutate_team');
+const PassportDetailInService = withPermission(PassportDetail, '', BlockletAdminRoles);
+export default function PassportDetailWithPermission(props) {
+  const {
+    inService
+  } = useNodeContext();
+  if (inService) {
+    return /*#__PURE__*/_jsx(PassportDetailInService, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(PassportDetailInDaemon, {
+    ...props
+  });
+}
+PassportDetail.propTypes = {
+  roleName: PropTypes.string.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  hasPermission: PropTypes.bool
+};
+PassportDetail.defaultProps = {
+  hasPermission: false
+};
+const Div = styled.div`
+  .header {
+    .title {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+      color: #222222;
+    }
+
+    .description {
+      margin-top: 16px;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      color: #999999;
+    }
+  }
+
+  .bind {
+    margin-top: 24px;
+    .title {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      color: #666666;
+      margin-bottom: 24px;
+    }
+    .item {
+      margin-top: 24px;
+    }
+
+    .MuiFormControlLabel-label {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      color: #666;
+    }
+
+    .PrivateSwitchBase-root-45 {
+      padding: 0;
+      padding-right: 12px;
+    }
+  }
+`;
+const Center = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+`;