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

package/es/team/members/member.js

@@ -0,0 +1,408 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Toast from '@arcblock/ux/lib/Toast';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
+import Avatar from '@mui/material/Avatar';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import InfoRow from '@arcblock/ux/lib/InfoRow';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import ForbidLoginIcon from '@arcblock/icons/lib/ForbidLoginIcon';
+import AllowLoginIcon from '@arcblock/icons/lib/AllowLoginIcon';
+import { useReactive } from 'ahooks';
+import { EVENTS, USER_TYPE } from '@abtnode/constant';
+import { LOGIN_PROVIDER } from '@blocklet/constant';
+import DidAddress from '../../did-address';
+import Permission from '../../permission';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { formatError, formatToDatetime, BlockletAdminRoles } from '../../util';
+import PassportIssuances from './passport-issuances';
+import Passports from './passports';
+import ToggleUserApproval from './toggle-user-approval';
+import { parseAvatar } from './util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function LinkUser({
+  name,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    ...rest,
+    sx: {
+      color: 'primary.main',
+      '&:hover': {
+        textDecoration: 'underline'
+      },
+      cursor: 'pointer'
+    },
+    children: name
+  });
+}
+LinkUser.propTypes = {
+  name: PropTypes.string.isRequired
+};
+function TabOAuth({
+  user
+}) {
+  const connectedAccounts = user.connectedAccounts || [];
+  return connectedAccounts.map(account => {
+    return /*#__PURE__*/_jsx(InfoRow, {
+      style: {
+        alignItems: 'flex-start'
+      },
+      valueComponent: "div",
+      nameWidth: 120,
+      name: account.provider,
+      children: /*#__PURE__*/_jsx(DidAddress, {
+        did: account.did
+      })
+    }, account.did);
+  });
+}
+TabOAuth.propTypes = {
+  user: PropTypes.object.isRequired,
+  onChangeUser: PropTypes.func
+};
+TabOAuth.defaultProps = {
+  onChangeUser: () => {}
+};
+const defaultTab = 'info';
+export default function Member({
+  userDid,
+  onCancel,
+  initTab,
+  createPassportSvg
+}) {
+  const {
+    api,
+    ws: {
+      useSubscription
+    },
+    inService
+  } = useNodeContext();
+  const {
+    roles,
+    teamDid,
+    enablePassportIssuance
+  } = useTeamContext();
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const pageState = useReactive({
+    user: null,
+    issuances: null,
+    tab: initTab || defaultTab
+  });
+  const getData = async (_teamDid, _userDid) => {
+    try {
+      const res = await api.doBatchQuery({
+        getUser: {
+          input: {
+            teamDid: _teamDid,
+            user: {
+              did: _userDid
+            }
+          }
+        },
+        getPassportIssuances: {
+          input: {
+            teamDid: _teamDid,
+            ownerDid: _userDid
+          }
+        }
+      });
+      if (res.getUser.user) {
+        res.getUser.user.avatar = parseAvatar(res.getUser.user.avatar, _teamDid, inService);
+
+        // for backwards compatibility
+        res.getUser.user.passports = (res.getUser.user.passports || []).filter(x => x.issuer);
+      }
+      pageState.user = res.getUser.user || {};
+      pageState.issuances = res.getPassportIssuances.list || [];
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+  useEffect(() => {
+    if (teamDid) {
+      getData(teamDid, userDid);
+    }
+  }, [userDid, teamDid]); // eslint-disable-line
+
+  const onUserEvent = data => {
+    if (data.teamDid === teamDid && data.user && data.user.did === userDid) {
+      getData(teamDid, userDid);
+    }
+  };
+  useSubscription(EVENTS.USER_UPDATED, onUserEvent, [userDid, teamDid]);
+  useEffect(() => {
+    if (pageState.issuances && !pageState.issuances.length && pageState.tab === 'issuances') {
+      pageState.tab = defaultTab;
+    }
+  }, [pageState.issuances]); // eslint-disable-line
+
+  const handleChangeUser = async changedUser => {
+    await getData(teamDid, changedUser.did);
+    pageState.tab = defaultTab;
+  };
+  const providerNameMap = {
+    auth0: 'Auth0',
+    wallet: 'DID wallet',
+    federated: 'Federated'
+  };
+
+  // tab
+  const Info = () => {
+    const rows = pageState.user ? [{
+      name: t('team.member.name'),
+      value: pageState.user.fullName
+    }, {
+      name: t('common.email'),
+      value: pageState.user.email
+    }, {
+      name: t('team.member.source'),
+      value: /*#__PURE__*/_jsx(Box, {
+        display: "flex",
+        alignItems: "center",
+        children: providerNameMap[pageState.user?.sourceProvider || USER_TYPE.WALLET] || pageState.user?.sourceProvider
+      })
+    }, {
+      name: t('team.member.allowLogin'),
+      value: pageState.user.approved ? t('common.yes') : t('common.no')
+    }, {
+      name: t('team.member.lastLogin'),
+      value: formatToDatetime(pageState.user.lastLoginAt, locale)
+    }, {
+      name: t('team.member.lastLoginIp'),
+      value: pageState.user.lastLoginIp || ''
+    }, {
+      name: t('common.createdAt'),
+      value: formatToDatetime(pageState.user.createdAt, locale)
+    }, {
+      name: t('common.remark'),
+      value: pageState.user.remark || '--'
+    }].filter(Boolean) : [];
+    return rows.map(row => {
+      if (row.name === t('common.did')) {
+        return /*#__PURE__*/_jsx(InfoRow, {
+          valueComponent: "div",
+          nameWidth: 120,
+          name: row.name,
+          nameFormatter: () => t('common.did'),
+          children: row.value
+        }, row.name);
+      }
+      return /*#__PURE__*/_jsx(InfoRow, {
+        style: {
+          alignItems: 'flex-start'
+        },
+        valueComponent: "div",
+        nameWidth: 120,
+        name: row.name,
+        children: row.value
+      }, row.name);
+    });
+  };
+  const tabConfigs = {
+    info: {
+      label: t('common.basicInfo'),
+      value: defaultTab,
+      component: Info
+    },
+    oauth: {
+      label: t('team.member.connectedAccounts'),
+      value: 'oauth',
+      component: () => /*#__PURE__*/_jsx(TabOAuth, {
+        user: pageState.user,
+        onChangeUser: handleChangeUser
+      })
+    },
+    passports: {
+      label: t('common.passport'),
+      value: 'passports',
+      component: () => /*#__PURE__*/_jsx(Passports, {
+        user: pageState.user,
+        teamDid: teamDid,
+        roles: roles,
+        createPassportSvg: createPassportSvg,
+        onCreate: () => {
+          getData(teamDid, userDid).then(() => {
+            // oauth 账户邀请后，不会产生待领取的邀请链接
+            // 当没有邀请链接的情况下，当前 tab 激活应当保持现状不变
+            if (enablePassportIssuance && pageState.issuances && !!pageState.issuances.length) {
+              pageState.tab = 'issuances';
+            }
+          });
+        },
+        onRefresh: () => {
+          getData(teamDid, userDid);
+        }
+      })
+    },
+    issuances: {
+      label: t('team.passport.issuance.pending'),
+      value: 'issuances',
+      component: () => /*#__PURE__*/_jsx(PassportIssuances, {
+        issuances: pageState.issuances || [],
+        teamDid: teamDid,
+        onRefresh: () => getData(teamDid, userDid)
+      })
+    }
+  };
+  const tabs = Object.values(tabConfigs).map(({
+    label,
+    value
+  }) => ({
+    label,
+    value
+  })).filter(x => {
+    if (x.value === 'issuances') {
+      return enablePassportIssuance && pageState.issuances && !!pageState.issuances.length;
+    }
+    if (x.value === 'oauth') {
+      const connectedAccounts = pageState.user?.connectedAccounts || [];
+      return connectedAccounts.find(item => item.provider !== (pageState.user?.sourceProvider || LOGIN_PROVIDER.WALLET));
+    }
+    return true;
+  });
+  const tabConfig = tabConfigs[pageState.tab] || tabConfigs.info;
+  const onTabChange = newTab => {
+    pageState.tab = newTab;
+  };
+  return /*#__PURE__*/_jsx(Dialog, {
+    title: t('common.member'),
+    onClose: onCancel,
+    open: true,
+    PaperProps: {
+      style: {
+        maxWidth: 632,
+        minHeight: '80vh'
+      }
+    },
+    fullWidth: true,
+    actions: pageState.user && /*#__PURE__*/_jsx(Permission, {
+      permission: inService ? '' : 'mutate_team',
+      role: inService ? BlockletAdminRoles : [],
+      children: /*#__PURE__*/_jsx(ToggleUserApproval, {
+        user: pageState.user,
+        children: ({
+          open
+        }) => /*#__PURE__*/_jsxs(BlockButton, {
+          onClick: open,
+          children: [pageState.user.approved ? /*#__PURE__*/_jsx(ForbidLoginIcon, {
+            style: {
+              fontSize: '1.2em',
+              marginRight: '0.4em'
+            }
+          }) : /*#__PURE__*/_jsx(AllowLoginIcon, {
+            style: {
+              fontSize: '1.2em',
+              marginRight: '0.4em'
+            }
+          }), pageState.user.approved ? t('team.member.forbidLogin') : t('team.member.allowLogin')]
+        })
+      })
+    }),
+    children: /*#__PURE__*/_jsxs(Div, {
+      children: [!pageState.user && /*#__PURE__*/_jsx(Center, {
+        children: /*#__PURE__*/_jsx(Spinner, {})
+      }), pageState.user && /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          className: "info",
+          children: [/*#__PURE__*/_jsx(Avatar, {
+            src: pageState.user.avatar,
+            style: {
+              width: 48,
+              height: 48,
+              backgroundColor: 'transparent',
+              marginRight: 16
+            }
+          }), /*#__PURE__*/_jsxs(Box, {
+            children: [/*#__PURE__*/_jsx(Box, {
+              className: "name",
+              children: pageState.user.fullName
+            }), /*#__PURE__*/_jsx(Box, {
+              className: "did",
+              mt: 1,
+              children: /*#__PURE__*/_jsx(DidAddress, {
+                did: pageState.user.did
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          mx: 3,
+          className: "tabs",
+          children: /*#__PURE__*/_jsx(Tabs, {
+            tabs: tabs,
+            current: pageState.tab,
+            onChange: onTabChange,
+            scrollButtons: "auto"
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "body",
+          children: /*#__PURE__*/_jsx(tabConfig.component, {})
+        })]
+      })]
+    })
+  });
+}
+Member.propTypes = {
+  userDid: PropTypes.string.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  createPassportSvg: PropTypes.func.isRequired,
+  initTab: PropTypes.string
+};
+Member.defaultProps = {
+  initTab: defaultTab
+};
+const Div = styled.div`
+  .info {
+    .name {
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 25px;
+      color: #222222;
+    }
+  }
+
+  .tabs {
+    margin-top: 24px;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .body {
+    margin-top: 24px;
+  }
+`;
+const Center = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+`;
+const BlockButton = styled.div`
+  flex-shrink: 0;
+  width: 100%;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  color: #999;
+  fill: #999;
+  font-size: 16px;
+  border-top: 1px solid #f0f0f0;
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  z-index: 10;
+`;

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

@@ -0,0 +1,155 @@
+/* eslint-disable react/prop-types */
+import { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Toast from '@arcblock/ux/lib/Toast';
+import Box from '@mui/material/Box';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import Confirm from '../../confirm';
+import Permission from '../../permission';
+import ClickToCopy from '../../click-to-copy';
+import PassportTag from '../../passport-tag';
+import { getIssuePassportLink, formatToDatetime, BlockletAdminRoles } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function PassportIssuances({
+  issuances,
+  teamDid,
+  onRefresh
+}) {
+  const {
+    api: client,
+    inService
+  } = useNodeContext();
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const [delConfirm, setDelConfirm] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const {
+    endpoint
+  } = useTeamContext();
+  const deleteIssuance = async ({
+    id
+  }) => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      await client.deletePassportIssuance({
+        input: {
+          teamDid,
+          sessionId: id
+        }
+      });
+      onRefresh();
+    } catch (error) {
+      Toast.error(error.message);
+    } finally {
+      setLoading(false);
+      setDelConfirm(null);
+    }
+  };
+  const onCancel = () => {
+    setLoading(false);
+    setDelConfirm(null);
+  };
+  const getLink = column => endpoint ? getIssuePassportLink({
+    id: column.id,
+    endpoint
+  }) : '';
+
+  // eslint-disable-next-line react/prop-types
+  // eslint-disable-next-line react/no-unstable-nested-components
+  function Issuance({
+    data: d
+  }) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "issuance",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/_jsx(Permission, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? BlockletAdminRoles : [],
+          children: can => can ? /*#__PURE__*/_jsx(PassportTag, {
+            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__*/_jsx(PassportTag, {
+            passport: {
+              title: d.title,
+              name: d.name
+            }
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          style: {
+            color: '#999'
+          },
+          children: [t('common.expires'), ":\xA0", formatToDatetime(d.expireDate, locale)]
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        mt: 2,
+        children: /*#__PURE__*/_jsx(ClickToCopy, {
+          children: getLink(d)
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [issuances.map(x => /*#__PURE__*/_jsx(Issuance, {
+      data: x
+    })), 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 Div = styled.div`
+  .MuiTableHead-root {
+    display: none;
+  }
+  .issuance {
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+    .MuiTypography-root {
+      display: inline-block;
+      width: 100%;
+      background: #f3f3f3;
+      border-radius: 4px;
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+  }
+`;
+PassportIssuances.propTypes = {
+  teamDid: PropTypes.string.isRequired,
+  issuances: PropTypes.array,
+  onRefresh: PropTypes.func
+};
+PassportIssuances.defaultProps = {
+  issuances: [],
+  onRefresh: () => {}
+};