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

package/lib/blocklet/authentication/oauth/auth0.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _pick = _interopRequireDefault(require("lodash/pick"));
+var _ahooks = require("ahooks");
+var _reactHookForm = require("react-hook-form");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _node = require("../../../contexts/node");
+var _blocklet = require("../../../contexts/blocklet");
+var _switchControl = _interopRequireDefault(require("../../component/switch-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function OAuthAuth0() {
+  var _blocklet$meta, _blocklet$settings;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const did = blocklet === null || blocklet === void 0 || (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did;
+  const auth0 = Object.assign({
+    enabled: false,
+    domain: '',
+    clientId: '',
+    clientSecret: ''
+  }, (blocklet === null || blocklet === void 0 || (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 || (_blocklet$settings = _blocklet$settings.oauth) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.auth0) || {});
+  const {
+    handleSubmit,
+    control,
+    formState,
+    watch,
+    reset
+  } = (0, _reactHookForm.useForm)({
+    defaultValues: (0, _pick.default)(auth0, ['domain', 'clientId', 'clientSecret', 'enabled'])
+  });
+  const enabled = watch('enabled');
+  const onSubmit = (0, _ahooks.useMemoizedFn)(async data => {
+    try {
+      var _blockletChanged$sett;
+      const {
+        blocklet: blockletChanged
+      } = await api.configOAuth({
+        input: {
+          did,
+          oauth: JSON.stringify({
+            auth0: data
+          })
+        }
+      });
+      const defaultValues = Object.assign({
+        enabled: false,
+        domain: '',
+        clientId: '',
+        clientSecret: ''
+      }, (blockletChanged === null || blockletChanged === void 0 || (_blockletChanged$sett = blockletChanged.settings) === null || _blockletChanged$sett === void 0 || (_blockletChanged$sett = _blockletChanged$sett.oauth) === null || _blockletChanged$sett === void 0 ? void 0 : _blockletChanged$sett.auth0) || {});
+      // 将当前表单的默认值重置为新的数据，这样能够修正页面的 isDirty 数据
+      reset(defaultValues);
+      _Toast.default.success(t('oauth.saveSuccess'));
+    } catch (err) {
+      _Toast.default.error(err.message || t('oauth.saveFailed'));
+    }
+  });
+  const validateDomain = (0, _ahooks.useMemoizedFn)(val => {
+    if (!(val !== null && val !== void 0 && val.trim())) {
+      return t('oauth.auth0.domainDescribe');
+    }
+    return true;
+  });
+  const validateClientId = (0, _ahooks.useMemoizedFn)(val => {
+    if (!(val !== null && val !== void 0 && val.trim())) {
+      return t('oauth.auth0.clientIdDescribe');
+    }
+    return true;
+  });
+  const noop = (0, _ahooks.useMemoizedFn)(() => true);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+      onSubmit: handleSubmit(onSubmit),
+      disabled: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "enabled",
+        control: control,
+        render: _ref => {
+          let {
+            field
+          } = _ref;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+            control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_switchControl.default, _objectSpread({
+              checked: field.value,
+              style: {
+                marginRight: '6px'
+              }
+            }, field)),
+            label: t('oauth.auth0.enable'),
+            sx: {
+              marginBottom: 2,
+              ml: 1
+            }
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "domain",
+        control: control,
+        rules: {
+          validate: enabled ? validateDomain : noop
+        },
+        render: _ref2 => {
+          var _formState$errors$fie;
+          let {
+            field
+          } = _ref2;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, field), {}, {
+              label: t('oauth.auth0.domain'),
+              error: !!formState.errors[field.name],
+              helperText: ((_formState$errors$fie = formState.errors[field.name]) === null || _formState$errors$fie === void 0 ? void 0 : _formState$errors$fie.message) || '　',
+              disabled: !enabled
+            }))
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "clientId",
+        control: control,
+        rules: {
+          validate: enabled ? validateClientId : noop
+        },
+        render: _ref3 => {
+          var _formState$errors$fie2;
+          let {
+            field
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, field), {}, {
+              error: !!formState.errors[field.name],
+              label: t('oauth.auth0.clientId'),
+              helperText: ((_formState$errors$fie2 = formState.errors[field.name]) === null || _formState$errors$fie2 === void 0 ? void 0 : _formState$errors$fie2.message) || '　',
+              disabled: !enabled
+            }))
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "clientSecret",
+        control: control,
+        rules: {
+          validate: noop
+        },
+        render: _ref4 => {
+          var _formState$errors$fie3;
+          let {
+            field
+          } = _ref4;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, field), {}, {
+              type: "password",
+              error: !!formState.errors[field.name],
+              label: t('oauth.auth0.clientSecret'),
+              helperText: ((_formState$errors$fie3 = formState.errors[field.name]) === null || _formState$errors$fie3 === void 0 ? void 0 : _formState$errors$fie3.message) || '　',
+              disabled: !enabled
+            }))
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        type: "submit",
+        variant: "contained",
+        onSubmit: handleSubmit(onSubmit),
+        disabled: !formState.isDirty,
+        children: t('oauth.save')
+      })]
+    })
+  });
+}
+var _default = exports.default = OAuthAuth0;

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

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DragItem;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _react = require("react");
+var _reactDnd = require("react-dnd");
+var _Colors = require("@arcblock/ux/lib/Colors");
+var _react2 = require("@iconify/react");
+var _dragIndicator = _interopRequireDefault(require("@iconify-icons/material-symbols/drag-indicator"));
+var _keyboardArrowDownRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/keyboard-arrow-down-rounded"));
+var _ahooks = require("ahooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-next-line no-unused-vars
+function DragItem(_ref) {
+  let {
+    title,
+    id,
+    children,
+    index,
+    onMove,
+    defaultExpand,
+    onEnd
+  } = _ref;
+  const [expand, setExpand] = (0, _react.useState)(defaultExpand);
+  const dropRef = (0, _react.useRef)(null);
+  const dragRef = (0, _react.useRef)(null);
+  const [{
+    handlerId
+  }, drop] = (0, _reactDnd.useDrop)({
+    accept: 'dragItem',
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId()
+      };
+    },
+    hover(item, monitor) {
+      var _dropRef$current, _dragRef$current;
+      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 = dropRef.current) === null || _dropRef$current === void 0 ? void 0 : _dropRef$current.getBoundingClientRect();
+      const dragBoundingRect = (_dragRef$current = dragRef.current) === null || _dragRef$current === void 0 ? void 0 : _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] = (0, _reactDnd.useDrag)({
+    item: {
+      index,
+      type: 'dragItem'
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    }),
+    end: onEnd
+  });
+  drag(dragRef);
+  drop(dropRef);
+  const opacity = isDragging ? 0.5 : 1;
+  const toggleExpand = (0, _ahooks.useMemoizedFn)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setExpand(!expand);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    ref: dropRef,
+    sx: {
+      borderBottom: "1px solid ".concat(_Colors.temp.lineBorderStrong)
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: _Colors.temp.backgroundsBgSubtileHover
+        },
+        borderRadius: 2
+      },
+      ref: dragRef,
+      "data-handler-id": handlerId,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          py: 1.5,
+          px: 1,
+          opacity,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5
+        },
+        draggable: false,
+        onClick: toggleExpand,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            pointerEvents: 'auto',
+            cursor: 'grab',
+            '&:active': {
+              cursor: 'grabbing'
+            },
+            fontSize: 0,
+            color: _Colors.temp.textMuted,
+            '&:hover': {
+              color: _Colors.temp.textSubtitle
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            fontSize: 20,
+            icon: _dragIndicator.default
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            flex: 1
+          },
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          size: "small",
+          sx: {
+            pointerEvents: 'auto',
+            transform: expand ? '' : 'rotate(180deg)',
+            transition: 'transform 0.3s ease'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: _keyboardArrowDownRounded.default,
+            style: {
+              transform: 'scale(1.5)'
+            }
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        pl: 4,
+        py: 1,
+        display: expand ? 'block' : 'none'
+      },
+      children: children
+    })]
+  });
+}
+DragItem.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node.isRequired,
+  index: _propTypes.default.number.isRequired,
+  onMove: _propTypes.default.func.isRequired,
+  onEnd: _propTypes.default.func.isRequired,
+  defaultExpand: _propTypes.default.bool
+};
+DragItem.defaultProps = {
+  defaultExpand: true
+};

package/lib/blocklet/{oauth/auth0.js → authentication/oauth/github.js}

@@ -10,9 +10,9 @@ var _ahooks = require("ahooks");
 var _reactHookForm = require("react-hook-form");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _node = require("../../contexts/node");
-var _blocklet = require("../../contexts/blocklet");
-var _switchControl = _interopRequireDefault(require("../component/switch-control"));
+var _node = require("../../../contexts/node");
+var _blocklet = require("../../../contexts/blocklet");
+var _switchControl = _interopRequireDefault(require("../../component/switch-control"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -20,7 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function OAuthAuth0() {
+function OAuthGithub() {
   var _blocklet$meta, _blocklet$settings;
   const {
     api
@@ -33,11 +33,11 @@ function OAuthAuth0() {
   } = (0, _context.useLocaleContext)();
   // TODO: @zhanghan 将来需要换成 permanent did
   const did = blocklet === null || blocklet === void 0 || (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did;
-  const auth0 = Object.assign({
+  const github = Object.assign({
     enabled: false,
-    domain: '',
-    clientId: ''
-  }, (blocklet === null || blocklet === void 0 || (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 || (_blocklet$settings = _blocklet$settings.oauth) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.auth0) || {});
+    clientId: '',
+    clientSecret: ''
+  }, (blocklet === null || blocklet === void 0 || (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 || (_blocklet$settings = _blocklet$settings.oauth) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.github) || {});
   const {
     handleSubmit,
     control,
@@ -45,7 +45,7 @@ function OAuthAuth0() {
     watch,
     reset
   } = (0, _reactHookForm.useForm)({
-    defaultValues: (0, _pick.default)(auth0, ['domain', 'clientId', 'enabled'])
+    defaultValues: (0, _pick.default)(github, ['clientSecret', 'clientId', 'enabled'])
   });
   const enabled = watch('enabled');
   const onSubmit = (0, _ahooks.useMemoizedFn)(async data => {
@@ -57,15 +57,15 @@ function OAuthAuth0() {
         input: {
           did,
           oauth: JSON.stringify({
-            auth0: data
+            github: data
           })
         }
       });
       const defaultValues = Object.assign({
         enabled: false,
-        domain: '',
-        clientId: ''
-      }, (blockletChanged === null || blockletChanged === void 0 || (_blockletChanged$sett = blockletChanged.settings) === null || _blockletChanged$sett === void 0 || (_blockletChanged$sett = _blockletChanged$sett.oauth) === null || _blockletChanged$sett === void 0 ? void 0 : _blockletChanged$sett.auth0) || {});
+        clientId: '',
+        clientSecret: ''
+      }, (blockletChanged === null || blockletChanged === void 0 || (_blockletChanged$sett = blockletChanged.settings) === null || _blockletChanged$sett === void 0 || (_blockletChanged$sett = _blockletChanged$sett.oauth) === null || _blockletChanged$sett === void 0 ? void 0 : _blockletChanged$sett.github) || {});
       // 将当前表单的默认值重置为新的数据，这样能够修正页面的 isDirty 数据
       reset(defaultValues);
       _Toast.default.success(t('oauth.saveSuccess'));
@@ -73,15 +73,15 @@ function OAuthAuth0() {
       _Toast.default.error(err.message || t('oauth.saveFailed'));
     }
   });
-  const validateDomain = (0, _ahooks.useMemoizedFn)(val => {
+  const validateClientId = (0, _ahooks.useMemoizedFn)(val => {
     if (!(val !== null && val !== void 0 && val.trim())) {
-      return t('oauth.auth0.domainDescribe');
+      return t('oauth.github.clientIdDescribe');
     }
     return true;
   });
-  const validateClientId = (0, _ahooks.useMemoizedFn)(val => {
+  const validateClientSecret = (0, _ahooks.useMemoizedFn)(val => {
     if (!(val !== null && val !== void 0 && val.trim())) {
-      return t('oauth.auth0.clientIdDescribe');
+      return t('oauth.github.clientSecretDescribe');
     }
     return true;
   });
@@ -104,7 +104,7 @@ function OAuthAuth0() {
                 marginRight: '6px'
               }
             }, field)),
-            label: t('oauth.auth0.enable'),
+            label: t('oauth.github.enable'),
             sx: {
               marginBottom: 2,
               ml: 1
@@ -112,10 +112,10 @@ function OAuthAuth0() {
           });
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "domain",
+        name: "clientId",
         control: control,
         rules: {
-          validate: enabled ? validateDomain : noop
+          validate: enabled ? validateClientId : noop
         },
         render: _ref2 => {
           var _formState$errors$fie;
@@ -125,18 +125,18 @@ function OAuthAuth0() {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
             fullWidth: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, field), {}, {
-              label: t('oauth.auth0.domain'),
               error: !!formState.errors[field.name],
+              label: t('oauth.github.clientId'),
               helperText: ((_formState$errors$fie = formState.errors[field.name]) === null || _formState$errors$fie === void 0 ? void 0 : _formState$errors$fie.message) || '　',
               disabled: !enabled
             }))
           });
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "clientId",
+        name: "clientSecret",
         control: control,
         rules: {
-          validate: enabled ? validateClientId : noop
+          validate: enabled ? validateClientSecret : noop
         },
         render: _ref3 => {
           var _formState$errors$fie2;
@@ -146,8 +146,9 @@ function OAuthAuth0() {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
             fullWidth: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, field), {}, {
+              type: "password",
+              label: t('oauth.github.clientSecret'),
               error: !!formState.errors[field.name],
-              label: t('oauth.auth0.clientId'),
               helperText: ((_formState$errors$fie2 = formState.errors[field.name]) === null || _formState$errors$fie2 === void 0 ? void 0 : _formState$errors$fie2.message) || '　',
               disabled: !enabled
             }))
@@ -163,4 +164,4 @@ function OAuthAuth0() {
     })
   });
 }
-var _default = exports.default = OAuthAuth0;
+var _default = exports.default = OAuthGithub;