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

package/es/blocklet/oauth/federated-detail-dialog.js

@@ -0,0 +1,175 @@
+import InfoRow from '@arcblock/ux/lib/InfoRow';
+import pull from 'lodash/pull';
+import noop from 'lodash/noop';
+import isEmpty from 'lodash/isEmpty';
+import { forwardRef, useContext, useImperativeHandle } from 'react';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
+import { useTheme } from '@arcblock/ux/lib/Theme';
+import { Box, Button, SvgIcon } from '@mui/material';
+import { Address } from '@arcblock/did-connect';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import StarsIcon from '@mui/icons-material/Stars';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { useNodeContext } from '../../contexts/node';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const FederatedDetailDialog = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    api
+  } = useNodeContext();
+  const state = useReactive({
+    mode: 'view',
+    show: false,
+    data: {},
+    callback: noop
+  });
+  const theme = useTheme();
+  const leavingScreen = theme?.transitions?.duration?.leavingScreen || 300;
+  const reset = useMemoizedFn(() => {
+    state.mode = 'view';
+    state.data = {};
+    state.callback = noop;
+  }, []);
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, leavingScreen);
+  }, []);
+  const open = useMemoizedFn(data => {
+    state.mode = 'view';
+    state.show = true;
+    state.data = data;
+  }, []);
+  const approve = useMemoizedFn((data, callback = noop) => {
+    state.mode = 'approve';
+    state.show = true;
+    state.data = data;
+    state.callback = callback;
+  }, []);
+  useImperativeHandle(ref, () => ({
+    open,
+    close,
+    approve
+  }), [open, close, approve]);
+  const infoList = useCreation(() => {
+    state.data.migratedFrom = [state.data.appId, state.data.appPid];
+    const keys = ['appName', 'appLogo', 'appId', 'appPid', 'migratedFrom', 'appDescription', 'appUrl', 'version', 'appliedAt', 'status', 'serverId', 'serverVersion'];
+    if (state.data.isMaster !== false) {
+      pull(keys, 'appliedAt', 'status');
+    }
+    return keys.map(key => {
+      const name = t(`federated.info.${key}`);
+      let value = state.data[key];
+      if (key === 'appName') {
+        if (state.data.isMaster) {
+          value = /*#__PURE__*/_jsxs(Box, {
+            children: [/*#__PURE__*/_jsx(SvgIcon, {
+              component: StarsIcon
+            }), value]
+          });
+        }
+      }
+      if (['appId', 'appPid', 'serverId'].includes(key)) {
+        value = /*#__PURE__*/_jsx(Address, {
+          children: value
+        });
+      }
+      if (['appUrl'].includes(key)) {
+        value = /*#__PURE__*/_jsx(Box, {
+          component: "a",
+          href: value,
+          target: "_blank",
+          children: value
+        });
+      }
+      if (['appLogo'].includes(key)) {
+        value = /*#__PURE__*/_jsx("img", {
+          src: `${state.data.appUrl}/${value}`,
+          width: "60",
+          height: "60",
+          alt: state.data.appName
+        });
+      }
+      if (key === 'status') {
+        value = value && t(`federated.status.${value}`);
+      }
+      if (key === 'migratedFrom') {
+        const migratedFrom = state.data.migratedFrom || [];
+        const filterDids = migratedFrom.filter(item => ![state.data.appId, state.data.appPid].includes(item));
+        value = filterDids.map(item => /*#__PURE__*/_jsx(Address, {
+          children: item
+        }));
+      }
+      if (isEmpty(value)) {
+        value = '-';
+      }
+      return {
+        name,
+        value
+      };
+    });
+  }, [state.data]);
+  const isApprove = state.mode === 'approve';
+  const onReject = useMemoizedFn(async () => {
+    await api.auditFederatedLogin({
+      input: {
+        memberPid: state.data.appPid,
+        did: blocklet.appPid,
+        status: 'rejected'
+      }
+    });
+    close();
+    state?.callback(false);
+  });
+  const onApprove = useMemoizedFn(async () => {
+    await api.auditFederatedLogin({
+      input: {
+        memberPid: state.data.appPid,
+        did: blocklet.appPid,
+        status: 'approved'
+      }
+    });
+    close();
+    state?.callback(true);
+  });
+  return /*#__PURE__*/_jsx(Dialog, {
+    open: state.show,
+    title: isApprove ? t('federated.approveToJoinLogin') : t('federated.siteDetail'),
+    onClose: close,
+    actions: isApprove ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        color: "error",
+        variant: "contained",
+        onClick: onReject,
+        children: t('common.reject')
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "contained",
+        onClick: onApprove,
+        children: t('common.approve')
+      })]
+    }) : /*#__PURE__*/_jsx(Button, {
+      variant: "outlined",
+      onClick: close,
+      children: t('common.close')
+    }),
+    children: infoList.map(row => /*#__PURE__*/_jsx(InfoRow, {
+      style: {
+        alignItems: 'flex-start'
+      },
+      valueComponent: "div",
+      nameWidth: 180,
+      name: row.name,
+      children: row.value
+    }, row.name))
+  });
+});
+export default FederatedDetailDialog;

package/es/blocklet/oauth/federated-invite-dialog.js

@@ -0,0 +1,83 @@
+/* eslint-disable react/no-unstable-nested-components */
+import Box from '@mui/material/Box';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useContext, forwardRef, useImperativeHandle } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import Button from '@arcblock/ux/lib/Button';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import CodeBlock from '@arcblock/ux/lib/CodeBlock';
+import copy from 'copy-to-clipboard';
+import { useTheme } from '@arcblock/ux/lib/Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FederatedInviteDialog = /*#__PURE__*/forwardRef((props, ref) => {
+  const theme = useTheme();
+  const leavingScreen = theme?.transitions?.duration?.leavingScreen || 300;
+  const {
+    t
+  } = useContext(LocaleContext);
+  const state = useReactive({
+    show: false,
+    data: {
+      link: ''
+    }
+  });
+  const reset = useMemoizedFn(() => {
+    state.data.link = '';
+  }, []);
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, leavingScreen);
+  }, []);
+  const open = useMemoizedFn(({
+    link
+  }) => {
+    state.show = true;
+    state.data.link = link;
+  }, []);
+  useImperativeHandle(ref, () => ({
+    open,
+    close
+  }), [open, close]);
+  const copyAndClose = useMemoizedFn(() => {
+    copy(state.data.link);
+    close();
+  }, [close]);
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: state.show,
+    title: t('federated.joinFederatedLogin'),
+    onClose: close,
+    PaperProps: {
+      style: {
+        minHeight: 'unset'
+      }
+    },
+    actions: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      autoFocus: true,
+      variant: "contained",
+      onClick: copyAndClose,
+      children: t('common.copyAndClose')
+    }),
+    children: [/*#__PURE__*/_jsx(Box, {
+      mb: 1,
+      children: t('federated.inviteJoinFederatedLoginDescription')
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        '& .copy-button': {
+          display: 'none !important'
+        }
+      },
+      children: /*#__PURE__*/_jsx(CodeBlock, {
+        language: "shell",
+        style: {
+          marginBottom: 0
+        },
+        children: state.data.link
+      })
+    })]
+  });
+});
+export default FederatedInviteDialog;

package/es/blocklet/oauth/federated-join-dialog.js

@@ -0,0 +1,111 @@
+import Box from '@mui/material/Box';
+import { forwardRef, useContext, useImperativeHandle } from 'react';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import Button from '@arcblock/ux/lib/Button';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { TextField } from '@mui/material';
+import { useTheme } from '@arcblock/ux/lib/Theme';
+import noop from 'lodash/noop';
+import isUrl from 'is-url';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { useNodeContext } from '../../contexts/node';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FederatedJoinDialog = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const {
+    api
+  } = useNodeContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const did = blocklet?.appPid;
+  const theme = useTheme();
+  const leavingScreen = theme?.transitions?.duration?.leavingScreen || 300;
+  const state = useReactive({
+    show: false,
+    appUrl: '',
+    appUrlError: '',
+    callback: noop
+  });
+  const reset = useMemoizedFn(() => {
+    state.appUrl = '';
+    state.appUrlError = '';
+    state.callback = noop;
+  }, []);
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, leavingScreen);
+  }, []);
+  const open = useMemoizedFn((callback = noop) => {
+    state.show = true;
+    state.callback = callback;
+  }, []);
+  useImperativeHandle(ref, () => ({
+    open,
+    close
+  }), [open, close]);
+  const validateAppUrl = useMemoizedFn(value => {
+    if (!value) {
+      throw new Error(t('federated.federatedJoinAppUrlRequired'));
+    }
+    if (!isUrl(value)) {
+      throw new Error(t('federated.federatedJoinAppUrlInvalid'));
+    }
+  });
+  const confirm = useMemoizedFn(async () => {
+    try {
+      validateAppUrl(state.appUrl);
+      const data = await api.joinFederatedLogin({
+        input: {
+          did,
+          appUrl: state.appUrl
+        }
+      });
+      state.show = false;
+      close();
+      state?.callback(data);
+    } catch (err) {
+      state.appUrlError = err.message;
+    }
+  }, [close, did]);
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: state.show,
+    title: t('federated.joinFederatedLogin'),
+    onClose: close,
+    PaperProps: {
+      style: {
+        minHeight: 'unset'
+      }
+    },
+    actions: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      autoFocus: true,
+      variant: "contained",
+      onClick: confirm,
+      children: t('common.confirm')
+    }),
+    children: [/*#__PURE__*/_jsx(Box, {
+      mb: 1,
+      children: t('federated.joinFederatedLoginDescription')
+    }), /*#__PURE__*/_jsx(TextField, {
+      fullWidth: true,
+      variant: "outlined",
+      margin: "dense",
+      placeholder: t('federated.federatedJoinAppUrl'),
+      label: t('federated.federatedJoinAppUrl'),
+      value: state.appUrl,
+      error: !!state.appUrlError,
+      helperText: state.appUrlError || 'eg: https://www.arcblock.io',
+      onChange: e => {
+        state.appUrl = e.target.value;
+      }
+    })]
+  });
+});
+export default FederatedJoinDialog;

package/es/blocklet/oauth/federated-site-list.js

@@ -0,0 +1,338 @@
+/* eslint-disable react/no-unstable-nested-components */
+import SvgIcon from '@mui/material/SvgIcon';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import StarsIcon from '@mui/icons-material/Stars';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Datatable from '@arcblock/ux/lib/Datatable';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Address from '@arcblock/did-connect/lib/Address';
+import { useContext, useRef, useState } from 'react';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import Button from '@arcblock/ux/lib/Button';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { useNodeContext } from '../../contexts/node';
+import useConfirm from '../../hooks/confirm';
+import FederatedDetailDialog from './federated-detail-dialog';
+import FederatedInviteDialog from './federated-invite-dialog';
+import SwitchControl from '../component/switch-control';
+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 FederatedSiteList({
+  mode
+}) {
+  const federatedInviteDialogRef = useRef(null);
+  const federatedDetailDialogRef = useRef(null);
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = useBlockletContext();
+  const {
+    confirmApi,
+    confirmHolder
+  } = useConfirm();
+  const {
+    api
+  } = useNodeContext();
+  const federatedSites = blocklet.settings.federated?.sites || [];
+  const federatedConfig = blocklet.settings.federated?.config || {
+    autoLogin: false
+  };
+  const isMaster = federatedConfig.isMaster !== false;
+  const viewDetail = useMemoizedFn(row => {
+    federatedDetailDialogRef.current?.open(row);
+  });
+  const approveSite = useMemoizedFn(row => {
+    federatedDetailDialogRef.current?.approve(row, refreshBlocklet);
+  });
+  const toRevokeSite = useMemoizedFn(row => {
+    confirmApi.open({
+      title: t('federated.disableFederatedLogin'),
+      content: t('federated.disableFederatedLoginDescription'),
+      async onConfirm(close) {
+        await api.auditFederatedLogin({
+          input: {
+            memberPid: row.appPid,
+            did: blocklet.appPid,
+            status: 'revoked'
+          }
+        });
+        close();
+      }
+    });
+  });
+  const toApproveSite = useMemoizedFn(row => {
+    confirmApi.open({
+      title: t('federated.enableFederatedLogin'),
+      content: t('federated.enableFederatedLoginDescription'),
+      async onConfirm(close) {
+        await api.auditFederatedLogin({
+          input: {
+            memberPid: row.appPid,
+            did: blocklet.appPid,
+            status: 'approved'
+          }
+        });
+        close();
+      }
+    });
+  });
+  const columns = useCreation(() => {
+    const list = [{
+      label: t('common.name'),
+      name: 'appName',
+      options: {
+        customBodyRenderLite: rowIndex => {
+          const row = federatedSites[rowIndex];
+          const isSelfMaster = row.isMaster !== false;
+          return /*#__PURE__*/_jsx(Box, {
+            display: "inline-block",
+            children: /*#__PURE__*/_jsxs(Box, {
+              component: "a",
+              display: "flex",
+              alignItems: "center",
+              href: row.appUrl,
+              target: "_blank",
+              onClick: e => {
+                e.stopPropagation();
+              },
+              children: [isSelfMaster && /*#__PURE__*/_jsx(SvgIcon, {
+                component: StarsIcon,
+                style: {
+                  marginRight: '4px'
+                }
+              }), row.appName]
+            })
+          });
+        }
+      }
+    }, {
+      label: t('common.did'),
+      name: 'appId',
+      options: {
+        customBodyRenderLite: rowIndex => {
+          const row = federatedSites[rowIndex];
+          return /*#__PURE__*/_jsx(Address, {
+            children: row.appId
+          });
+        }
+      }
+    }, {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        customBodyRenderLite: rowIndex => {
+          const row = federatedSites[rowIndex];
+          const isSelfMaster = row.isMaster !== false;
+          return /*#__PURE__*/_jsx(Box, {
+            children: isSelfMaster ? '-' : t(`federated.status.${row.status}`)
+          });
+        }
+      }
+    }];
+    if (isMaster) {
+      list.push({
+        label: t('common.actions'),
+        name: 'actions',
+        options: {
+          customBodyRenderLite: rowIndex => {
+            const row = federatedSites[rowIndex];
+            const isSelfMaster = row.isMaster !== false;
+            return /*#__PURE__*/_jsx(Box, {
+              display: "flex",
+              gap: 1,
+              children: !isSelfMaster ? /*#__PURE__*/_jsxs(_Fragment, {
+                children: [row.status === 'pending' && /*#__PURE__*/_jsx(Button, {
+                  variant: "contained",
+                  color: "primary",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                    approveSite(row);
+                  },
+                  children: t('federated.status.pending')
+                }), row.status === 'approved' && /*#__PURE__*/_jsx(Button, {
+                  variant: "contained",
+                  color: "error",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                    toRevokeSite(row);
+                  },
+                  style: {
+                    whiteSpace: 'nowrap'
+                  },
+                  children: t('federated.revoke')
+                }), row.status === 'revoked' && /*#__PURE__*/_jsx(Button, {
+                  variant: "contained",
+                  color: "warning",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                    toApproveSite(row);
+                  },
+                  style: {
+                    whiteSpace: 'nowrap'
+                  },
+                  children: t('federated.approve')
+                })]
+              }) : /*#__PURE__*/_jsxs(_Fragment, {
+                children: [row.status === 'rejected' && /*#__PURE__*/_jsx(Button, {
+                  variant: "contained",
+                  color: "error",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                  },
+                  children: t('federated.status.rejected')
+                }), row.status === 'revoked' && /*#__PURE__*/_jsx(Button, {
+                  variant: "contained",
+                  color: "secondary",
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                  },
+                  children: t('federated.status.revoked')
+                })]
+              })
+            });
+          }
+        }
+      });
+    }
+    return list;
+  }, [federatedConfig.appId, federatedSites, isMaster]);
+  const tableOptions = useCreation(() => {
+    return {
+      sort: true,
+      download: false,
+      filter: false,
+      print: false,
+      expandableRowsOnClick: true,
+      onRowClick(e, {
+        dataIndex
+      }) {
+        const x = federatedSites[dataIndex];
+        viewDetail(x);
+      }
+    };
+  }, []);
+  const showInvite = useMemoizedFn(() => {
+    const link = blocklet.site?.domainAliases?.[0]?.href;
+    if (link) {
+      try {
+        const url = new URL(link);
+        federatedInviteDialogRef.current?.open({
+          link: url.origin
+        });
+      } catch {
+        Toast.error(t('federated.failedToGetFederatedLoginLink'));
+      }
+    }
+  }, [blocklet.site?.domainAliases?.[0]?.href]);
+  const [checked, setChecked] = useState(federatedConfig.autoLogin || false);
+  const changeAutoLogin = useMemoizedFn(() => {
+    confirmApi.open({
+      title: checked ? t('federated.disableFederatedAutoLogin') : t('federated.enableFederatedAutoLogin'),
+      content: checked ? t('federated.disableFederatedAutoLoginDescription') : t('federated.enableFederatedAutoLoginDescription'),
+      async onConfirm(close) {
+        await api.configFederated({
+          input: {
+            did: blocklet.appPid,
+            autoLogin: !checked
+          }
+        });
+        setChecked(prevValue => !prevValue);
+        close();
+      }
+    });
+  }, [setChecked, checked]);
+  const quitFederatedLogin = useMemoizedFn(() => {
+    confirmApi.open({
+      title: t('federated.quitFederatedLogin'),
+      content: t('federated.quitFederatedLoginDescription'),
+      async onConfirm(close) {
+        await api.quitFederatedLogin({
+          input: {
+            did: blocklet.appPid
+          }
+        });
+        close();
+      }
+    });
+  });
+  const customButtons = [];
+  if (mode !== 'master') {
+    customButtons.push( /*#__PURE__*/_jsx(Button, {
+      size: "small",
+      variant: "contained",
+      color: "error",
+      onClick: quitFederatedLogin,
+      sx: {
+        ml: 1
+      },
+      children: t('federated.quitFederatedLogin')
+    }));
+  } else {
+    customButtons.push( /*#__PURE__*/_jsx(Button, {
+      size: "small",
+      variant: "contained",
+      onClick: showInvite,
+      sx: {
+        ml: 1
+      },
+      children: t('federated.inviteJoinFederatedLogin')
+    }));
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Datatable, {
+      className: "main-table",
+      locale: locale,
+      data: federatedSites,
+      columns: columns,
+      customButtons: customButtons,
+      title: /*#__PURE__*/_jsx(Box, {
+        className: "table-toolbar-left",
+        children: mode === 'master' ? t('oauth.federated') : /*#__PURE__*/_jsx(FormControlLabel, {
+          sx: {
+            ml: 0,
+            '& span.MuiSwitch-switchBase': {
+              display: 'flex'
+            },
+            '& span.MuiSwitch-track': {
+              display: 'block'
+            }
+          },
+          control: /*#__PURE__*/_jsx(SwitchControl, {
+            checked: checked,
+            style: {
+              marginRight: '6px'
+            },
+            onChange: changeAutoLogin
+          }),
+          label: t('federated.enableFederatedAutoLogin')
+        })
+      }),
+      options: tableOptions
+    }), confirmHolder, /*#__PURE__*/_jsx(FederatedInviteDialog, {
+      ref: federatedInviteDialogRef
+    }), /*#__PURE__*/_jsx(FederatedDetailDialog, {
+      ref: federatedDetailDialogRef
+    })]
+  });
+}
+FederatedSiteList.propTypes = {
+  mode: PropTypes.oneOf(['member', 'master'])
+};
+FederatedSiteList.defaultProps = {
+  mode: 'member'
+};
+export default FederatedSiteList;