@abtnode/ux 1.16.26-beta-5251ab18 → 1.16.26-beta-351de484

package/es/blocklet/{oauth → authentication/federated}/federated-detail-dialog.js

@@ -12,8 +12,8 @@ import Dialog from '@arcblock/ux/lib/Dialog';
 import StarsIcon from '@mui/icons-material/Stars';
 import isUrl from 'is-url';
 import joinUrl from 'url-join';
-import { useBlockletContext } from '../../contexts/blocklet';
-import { useNodeContext } from '../../contexts/node';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import { useNodeContext } from '../../../contexts/node';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const FederatedDetailDialog = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/es/blocklet/{oauth → authentication/federated}/federated-join-dialog.js

@@ -8,8 +8,8 @@ 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 { useBlockletContext } from '../../../contexts/blocklet';
+import { useNodeContext } from '../../../contexts/node';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FederatedJoinDialog = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/es/blocklet/{oauth → authentication/federated}/federated-site-list.js

@@ -11,9 +11,9 @@ import { useCreation, useMemoizedFn } from 'ahooks';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
 import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
-import { useBlockletContext } from '../../contexts/blocklet';
-import { useNodeContext } from '../../contexts/node';
-import useConfirm from '../../hooks/confirm';
+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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";

package/es/blocklet/{oauth/federated.js → authentication/federated/index.js}

@@ -6,7 +6,7 @@ import { useMemoizedFn } from 'ahooks';
 import Button from '@arcblock/ux/lib/Button';
 import { Divider } from '@mui/material';
 import Toast from '@arcblock/ux/lib/Toast';
-import { useBlockletContext } from '../../contexts/blocklet';
+import { useBlockletContext } from '../../../contexts/blocklet';
 import FederatedSiteList from './federated-site-list';
 import FederatedJoinDialog from './federated-join-dialog';
 import FederatedInviteDialog from './federated-invite-dialog';

package/es/blocklet/{oauth → authentication}/index.js

@@ -4,7 +4,7 @@ import Tabs from '@arcblock/ux/lib/Tabs';
 import { Box } from '@mui/material';
 import { useCreation } from 'ahooks';
 import { useContext, useState } from 'react';
-import OAuthAuth0 from './auth0';
+import OAuthLogin from './oauth';
 import CommonSettings from './common-settings';
 import FederatedLogin from './federated';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,9 +30,9 @@ function OAuth() {
     label: /*#__PURE__*/_jsx(Box, {
       textAlign: "center",
       width: "100%",
-      children: "Auth0"
+      children: t('oauth.oauth')
     }),
-    value: 'auth0'
+    value: 'oauth'
   }, {
     label: /*#__PURE__*/_jsx(Box, {
       textAlign: "center",
@@ -41,9 +41,11 @@ function OAuth() {
     }),
     value: 'more'
   }];
-  const [currentTab, setCurrentTab] = useState(tabs[0].value);
+
+  // tabs[0].value
+  const [currentTab, setCurrentTab] = useState('oauth');
   const contents = useCreation(() => ({
-    auth0: /*#__PURE__*/_jsx(OAuthAuth0, {}),
+    oauth: /*#__PURE__*/_jsx(OAuthLogin, {}),
     federated: /*#__PURE__*/_jsx(FederatedLogin, {}),
     more: /*#__PURE__*/_jsx(Box, {
       children: /*#__PURE__*/_jsx(Empty, {

package/es/blocklet/authentication/oauth/apple.js

@@ -0,0 +1,198 @@
+import { Box, Button, FormControl, FormControlLabel, TextField } from '@mui/material';
+import pick from 'lodash/pick';
+import { useMemoizedFn } from 'ahooks';
+import { Controller, useForm } from 'react-hook-form';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../../contexts/node';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import SwitchControl from '../../component/switch-control';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function OAuthApple() {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    t
+  } = useLocaleContext();
+  const did = blocklet?.meta?.did;
+  const authData = Object.assign({
+    enabled: false,
+    teamId: '',
+    serviceId: '',
+    keyId: '',
+    authKey: ''
+  }, blocklet?.settings?.oauth?.apple || {});
+  const {
+    handleSubmit,
+    control,
+    formState,
+    watch,
+    reset
+  } = useForm({
+    defaultValues: pick(authData, ['enabled', 'teamId', 'serviceId', 'keyId', 'authKey'])
+  });
+  const enabled = watch('enabled');
+  const onSubmit = useMemoizedFn(async data => {
+    try {
+      const {
+        blocklet: blockletChanged
+      } = await api.configOAuth({
+        input: {
+          did,
+          oauth: JSON.stringify({
+            apple: data
+          })
+        }
+      });
+      const defaultValues = Object.assign({
+        enabled: false,
+        teamId: '',
+        serviceId: '',
+        keyId: '',
+        authKey: ''
+      }, blockletChanged?.settings?.oauth?.apple || {});
+      // 将当前表单的默认值重置为新的数据，这样能够修正页面的 isDirty 数据
+      reset(defaultValues);
+      Toast.success(t('oauth.saveSuccess'));
+    } catch (err) {
+      Toast.error(err.message || t('oauth.saveFailed'));
+    }
+  });
+  const validateTeamId = useMemoizedFn(val => {
+    if (!val?.trim()) {
+      return t('oauth.apple.teamIdDescribe');
+    }
+    return true;
+  });
+  const validateServiceId = useMemoizedFn(val => {
+    if (!val?.trim()) {
+      return t('oauth.apple.serviceIdDescribe');
+    }
+    return true;
+  });
+  const validateKeyId = useMemoizedFn(val => {
+    if (!val?.trim()) {
+      return t('oauth.apple.keyIdDescribe');
+    }
+    return true;
+  });
+  const validateAuthKey = useMemoizedFn(val => {
+    if (!val?.trim()) {
+      return t('oauth.apple.authKeyDescribe');
+    }
+    return true;
+  });
+  const noop = useMemoizedFn(() => true);
+  return /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsxs("form", {
+      onSubmit: handleSubmit(onSubmit),
+      disabled: true,
+      children: [/*#__PURE__*/_jsx(Controller, {
+        name: "enabled",
+        control: control,
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControlLabel, {
+          control: /*#__PURE__*/_jsx(SwitchControl, {
+            checked: field.value,
+            style: {
+              marginRight: '6px'
+            },
+            ...field
+          }),
+          label: t('oauth.apple.enable'),
+          sx: {
+            marginBottom: 2,
+            ml: 1
+          }
+        })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "teamId",
+        control: control,
+        rules: {
+          validate: enabled ? validateTeamId : noop
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControl, {
+          fullWidth: true,
+          children: /*#__PURE__*/_jsx(TextField, {
+            ...field,
+            error: !!formState.errors[field.name],
+            label: t('oauth.apple.teamId'),
+            helperText: formState.errors[field.name]?.message || '　',
+            disabled: !enabled
+          })
+        })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "serviceId",
+        control: control,
+        rules: {
+          validate: enabled ? validateServiceId : noop
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControl, {
+          fullWidth: true,
+          children: /*#__PURE__*/_jsx(TextField, {
+            ...field,
+            error: !!formState.errors[field.name],
+            label: t('oauth.apple.serviceId'),
+            helperText: formState.errors[field.name]?.message || '　',
+            disabled: !enabled
+          })
+        })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "keyId",
+        control: control,
+        rules: {
+          validate: enabled ? validateKeyId : noop
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControl, {
+          fullWidth: true,
+          children: /*#__PURE__*/_jsx(TextField, {
+            ...field,
+            error: !!formState.errors[field.name],
+            label: t('oauth.apple.keyId'),
+            helperText: formState.errors[field.name]?.message || '　',
+            disabled: !enabled
+          })
+        })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "authKey",
+        control: control,
+        rules: {
+          validate: enabled ? validateAuthKey : noop
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControl, {
+          fullWidth: true,
+          children: /*#__PURE__*/_jsx(TextField, {
+            ...field,
+            type: "password",
+            multiline: true,
+            rows: 4,
+            label: t('oauth.apple.authKey'),
+            error: !!formState.errors[field.name],
+            helperText: formState.errors[field.name]?.message || '　',
+            disabled: !enabled
+          })
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "submit",
+        variant: "contained",
+        onSubmit: handleSubmit(onSubmit),
+        disabled: !formState.isDirty,
+        children: t('oauth.save')
+      })]
+    })
+  });
+}
+export default OAuthApple;

package/es/blocklet/{oauth → authentication/oauth}/auth0.js

@@ -4,9 +4,9 @@ import { useMemoizedFn } from 'ahooks';
 import { Controller, useForm } from 'react-hook-form';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { useNodeContext } from '../../contexts/node';
-import { useBlockletContext } from '../../contexts/blocklet';
-import SwitchControl from '../component/switch-control';
+import { useNodeContext } from '../../../contexts/node';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import SwitchControl from '../../component/switch-control';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function OAuthAuth0() {
   const {
@@ -18,12 +18,12 @@ function OAuthAuth0() {
   const {
     t
   } = useLocaleContext();
-  // TODO: @zhanghan 将来需要换成 permanent did
   const did = blocklet?.meta?.did;
   const auth0 = Object.assign({
     enabled: false,
     domain: '',
-    clientId: ''
+    clientId: '',
+    clientSecret: ''
   }, blocklet?.settings?.oauth?.auth0 || {});
   const {
     handleSubmit,
@@ -32,7 +32,7 @@ function OAuthAuth0() {
     watch,
     reset
   } = useForm({
-    defaultValues: pick(auth0, ['domain', 'clientId', 'enabled'])
+    defaultValues: pick(auth0, ['domain', 'clientId', 'clientSecret', 'enabled'])
   });
   const enabled = watch('enabled');
   const onSubmit = useMemoizedFn(async data => {
@@ -50,7 +50,8 @@ function OAuthAuth0() {
       const defaultValues = Object.assign({
         enabled: false,
         domain: '',
-        clientId: ''
+        clientId: '',
+        clientSecret: ''
       }, blockletChanged?.settings?.oauth?.auth0 || {});
       // 将当前表单的默认值重置为新的数据，这样能够修正页面的 isDirty 数据
       reset(defaultValues);
@@ -131,6 +132,25 @@ function OAuthAuth0() {
             disabled: !enabled
           })
         })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "clientSecret",
+        control: control,
+        rules: {
+          validate: noop
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControl, {
+          fullWidth: true,
+          children: /*#__PURE__*/_jsx(TextField, {
+            ...field,
+            type: "password",
+            error: !!formState.errors[field.name],
+            label: t('oauth.auth0.clientSecret'),
+            helperText: formState.errors[field.name]?.message || '　',
+            disabled: !enabled
+          })
+        })
       }), /*#__PURE__*/_jsx(Button, {
         type: "submit",
         variant: "contained",

package/es/blocklet/authentication/oauth/drag-item.js

@@ -0,0 +1,177 @@
+import PropTypes from 'prop-types';
+import { Box, IconButton, Typography } from '@mui/material';
+import { useRef, useState } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { Icon } from '@iconify/react';
+import DragIndicatorIcon from '@iconify-icons/material-symbols/drag-indicator';
+import KeyboardArrowDownRoundedIcon from '@iconify-icons/material-symbols/keyboard-arrow-down-rounded';
+import { useMemoizedFn } from 'ahooks';
+
+// eslint-disable-next-line no-unused-vars
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DragItem({
+  title,
+  id,
+  children,
+  index,
+  onMove,
+  defaultExpand,
+  onEnd
+}) {
+  const [expand, setExpand] = useState(defaultExpand);
+  const dropRef = useRef(null);
+  const dragRef = useRef(null);
+  const [{
+    handlerId
+  }, drop] = useDrop({
+    accept: 'dragItem',
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId()
+      };
+    },
+    hover(item, monitor) {
+      if (!dropRef.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // Determine rectangle on screen
+      const hoverBoundingRect = dropRef.current?.getBoundingClientRect();
+      const dragBoundingRect = dragRef.current?.getBoundingClientRect();
+      // 需要拖动多少距离才能触发位置变更
+      const dragY = (dragBoundingRect.bottom - dragBoundingRect.top) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      // Get pixels to the top
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < dragY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > dragY) {
+        return;
+      }
+      // Time to actually perform the action
+      onMove(dragIndex, hoverIndex);
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex;
+    }
+  });
+  const [{
+    isDragging
+  }, drag] = useDrag({
+    item: {
+      index,
+      type: 'dragItem'
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    }),
+    end: onEnd
+  });
+  drag(dragRef);
+  drop(dropRef);
+  const opacity = isDragging ? 0.5 : 1;
+  const toggleExpand = useMemoizedFn(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setExpand(!expand);
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: dropRef,
+    sx: {
+      borderBottom: `1px solid ${colors.lineBorderStrong}`
+    },
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: colors.backgroundsBgSubtileHover
+        },
+        borderRadius: 2
+      },
+      ref: dragRef,
+      "data-handler-id": handlerId,
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          py: 1.5,
+          px: 1,
+          opacity,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5
+        },
+        draggable: false,
+        onClick: toggleExpand,
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            pointerEvents: 'auto',
+            cursor: 'grab',
+            '&:active': {
+              cursor: 'grabbing'
+            },
+            fontSize: 0,
+            color: colors.textMuted,
+            '&:hover': {
+              color: colors.textSubtitle
+            }
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            fontSize: 20,
+            icon: DragIndicatorIcon
+          })
+        }), /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            flex: 1
+          },
+          children: title
+        }), /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          sx: {
+            pointerEvents: 'auto',
+            transform: expand ? '' : 'rotate(180deg)',
+            transition: 'transform 0.3s ease'
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: KeyboardArrowDownRoundedIcon,
+            style: {
+              transform: 'scale(1.5)'
+            }
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        pl: 4,
+        py: 1,
+        display: expand ? 'block' : 'none'
+      },
+      children: children
+    })]
+  });
+}
+DragItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  index: PropTypes.number.isRequired,
+  onMove: PropTypes.func.isRequired,
+  onEnd: PropTypes.func.isRequired,
+  defaultExpand: PropTypes.bool
+};
+DragItem.defaultProps = {
+  defaultExpand: true
+};

package/es/blocklet/authentication/oauth/github.js

@@ -0,0 +1,145 @@
+import { Box, Button, FormControl, FormControlLabel, TextField } from '@mui/material';
+import pick from 'lodash/pick';
+import { useMemoizedFn } from 'ahooks';
+import { Controller, useForm } from 'react-hook-form';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../../contexts/node';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import SwitchControl from '../../component/switch-control';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function OAuthGithub() {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    t
+  } = useLocaleContext();
+  // TODO: @zhanghan 将来需要换成 permanent did
+  const did = blocklet?.meta?.did;
+  const github = Object.assign({
+    enabled: false,
+    clientId: '',
+    clientSecret: ''
+  }, blocklet?.settings?.oauth?.github || {});
+  const {
+    handleSubmit,
+    control,
+    formState,
+    watch,
+    reset
+  } = useForm({
+    defaultValues: pick(github, ['clientSecret', 'clientId', 'enabled'])
+  });
+  const enabled = watch('enabled');
+  const onSubmit = useMemoizedFn(async data => {
+    try {
+      const {
+        blocklet: blockletChanged
+      } = await api.configOAuth({
+        input: {
+          did,
+          oauth: JSON.stringify({
+            github: data
+          })
+        }
+      });
+      const defaultValues = Object.assign({
+        enabled: false,
+        clientId: '',
+        clientSecret: ''
+      }, blockletChanged?.settings?.oauth?.github || {});
+      // 将当前表单的默认值重置为新的数据，这样能够修正页面的 isDirty 数据
+      reset(defaultValues);
+      Toast.success(t('oauth.saveSuccess'));
+    } catch (err) {
+      Toast.error(err.message || t('oauth.saveFailed'));
+    }
+  });
+  const validateClientId = useMemoizedFn(val => {
+    if (!val?.trim()) {
+      return t('oauth.github.clientIdDescribe');
+    }
+    return true;
+  });
+  const validateClientSecret = useMemoizedFn(val => {
+    if (!val?.trim()) {
+      return t('oauth.github.clientSecretDescribe');
+    }
+    return true;
+  });
+  const noop = useMemoizedFn(() => true);
+  return /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsxs("form", {
+      onSubmit: handleSubmit(onSubmit),
+      disabled: true,
+      children: [/*#__PURE__*/_jsx(Controller, {
+        name: "enabled",
+        control: control,
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControlLabel, {
+          control: /*#__PURE__*/_jsx(SwitchControl, {
+            checked: field.value,
+            style: {
+              marginRight: '6px'
+            },
+            ...field
+          }),
+          label: t('oauth.github.enable'),
+          sx: {
+            marginBottom: 2,
+            ml: 1
+          }
+        })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "clientId",
+        control: control,
+        rules: {
+          validate: enabled ? validateClientId : noop
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControl, {
+          fullWidth: true,
+          children: /*#__PURE__*/_jsx(TextField, {
+            ...field,
+            error: !!formState.errors[field.name],
+            label: t('oauth.github.clientId'),
+            helperText: formState.errors[field.name]?.message || '　',
+            disabled: !enabled
+          })
+        })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "clientSecret",
+        control: control,
+        rules: {
+          validate: enabled ? validateClientSecret : noop
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControl, {
+          fullWidth: true,
+          children: /*#__PURE__*/_jsx(TextField, {
+            ...field,
+            type: "password",
+            label: t('oauth.github.clientSecret'),
+            error: !!formState.errors[field.name],
+            helperText: formState.errors[field.name]?.message || '　',
+            disabled: !enabled
+          })
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "submit",
+        variant: "contained",
+        onSubmit: handleSubmit(onSubmit),
+        disabled: !formState.isDirty,
+        children: t('oauth.save')
+      })]
+    })
+  });
+}
+export default OAuthGithub;