@abtnode/ux 1.16.0-beta-8ee536d7 → 1.16.0-beta-62b42401

package/lib/blocklet/component/sortable-tree.js

@@ -12,7 +12,8 @@ var _react2 = require("@iconify/react");
 var _isObject = _interopRequireDefault(require("lodash/isObject"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _material = require("@mui/material");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 var _reactDnd = require("react-dnd");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -56,14 +57,14 @@ function TreeTitle(_ref2) {
     if (! /*#__PURE__*/(0, _react.isValidElement)(subtitle) && (0, _isObject.default)(subtitle)) {
       subtitleShow = subtitle[locale];
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       display: "flex",
       alignItems: "center",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
         variant: "subtitle1",
         fontSize: 16,
         children: titleShow
-      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
         variant: "body2",
         color: "gray",
         ml: 1.5,

package/lib/blocklet/component/space-connector.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _constant = require("@blocklet/constant");
+var _axios = _interopRequireDefault(require("axios"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _lodash = require("lodash");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _util = require("@blocklet/meta/lib/util");
+var _blocklet = require("../../../lib/contexts/blocklet");
+var _node = require("../../contexts/node");
+var _toast = _interopRequireDefault(require("../../../lib/toast"));
+var _spaceSelector = _interopRequireDefault(require("./space-selector"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["onConnect"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ *
+ *
+ * @param {import('@abtnode/client').BlockletState} blocklet
+ * @return {*}
+ */
+function useAppUrl(blocklet) {
+  var _blocklet$site, _blocklet$site$domain, _blocklet$site$domain2;
+  const appUrls = blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$site = blocklet.site) === null || _blocklet$site === void 0 ? void 0 : (_blocklet$site$domain = _blocklet$site.domainAliases) === null || _blocklet$site$domain === void 0 ? void 0 : (_blocklet$site$domain2 = _blocklet$site$domain.sort((a, b) => {
+    if (a.accessibility.accessible && b.accessibility.accessible) {
+      return +a.isProtected - +b.isProtected;
+    }
+    return +b.accessibility.accessible - +a.accessibility.accessible;
+  })) === null || _blocklet$site$domain2 === void 0 ? void 0 : _blocklet$site$domain2.map(domainAlias => {
+    var _domainAlias$domainSt;
+    const protocol = domainAlias !== null && domainAlias !== void 0 && (_domainAlias$domainSt = domainAlias.domainStatus) !== null && _domainAlias$domainSt !== void 0 && _domainAlias$domainSt.isHttps ? 'https://' : 'http://';
+    const value = domainAlias === null || domainAlias === void 0 ? void 0 : domainAlias.value;
+    return "".concat(protocol).concat(value);
+  }).filter(Boolean);
+  const appUrl = appUrls === null || appUrls === void 0 ? void 0 : appUrls[0];
+
+  // 授权的时候提供 appUrl, 因为 appUrl 可能很久都拿不到值，所以加一个 loading 效果过渡一下
+  return {
+    appUrl,
+    isReady: Boolean(appUrl)
+  };
+}
+const SpaceConnector = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+      onConnect
+    } = _ref,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  /** @type {{ api: import('@abtnode/client').ABTNodeClient, info: import('@abtnode/client').NodeState  }} */
+  const {
+    api,
+    info
+  } = (0, _node.useNodeContext)();
+  const nodeDid = info.did;
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const [gatewayUrl, setGatewayUrl] = (0, _react.useState)('');
+  const spaceProps = (0, _react.useMemo)(() => {
+    var _blocklet$environment, _blocklet$environment2, _blocklet$environment3, _blocklet$environment4;
+    return {
+      endpoint: (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$environment = blocklet.environments) === null || _blocklet$environment === void 0 ? void 0 : (_blocklet$environment2 = _blocklet$environment.find(e => e.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)) === null || _blocklet$environment2 === void 0 ? void 0 : _blocklet$environment2.value) || '',
+      gatewayUrl: (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$environment3 = blocklet.environments) === null || _blocklet$environment3 === void 0 ? void 0 : (_blocklet$environment4 = _blocklet$environment3.find(e => e.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACES_URL)) === null || _blocklet$environment4 === void 0 ? void 0 : _blocklet$environment4.value) || ''
+    };
+  }, [blocklet]);
+  const appName = (0, _util.getAppName)(blocklet);
+  const appDescription = (0, _util.getAppDescription)(blocklet);
+  const {
+    appUrl,
+    isReady
+  } = useAppUrl(blocklet);
+  async function saveSpaceConnectorEndpoint(did, storageEndpoint) {
+    await api.configBlocklet({
+      input: {
+        did: [did],
+        configs: [{
+          key: _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACES_URL,
+          value: gatewayUrl
+        }, {
+          key: _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT,
+          value: storageEndpoint
+        }]
+      }
+    }).then(() => {
+      _toast.default.success(t('storage.spaces.connected', locale));
+    }).catch(error => {
+      console.error(error);
+      _toast.default.error(error.message);
+    });
+  }
+  const onAuthorizeConnectSuccess = async (response, decrypt) => {
+    await saveSpaceConnectorEndpoint(blocklet.meta.did, decrypt(response.endpoint));
+    setTimeout(() => {
+      setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+        open: false
+      }));
+      onConnect === null || onConnect === void 0 ? void 0 : onConnect();
+    }, 3000);
+  };
+  const [authorizeConnect, setAuthorizeConnect] = (0, _react.useState)({
+    open: false
+  });
+
+  // eslint-disable-next-line no-shadow
+  const handleOnClickAuthorize = async gatewayUrl => {
+    if ((0, _lodash.isEmpty)(gatewayUrl)) {
+      _toast.default.error(t('storage.spaces.addressCannotEmpty', locale));
+      return;
+    }
+    setGatewayUrl(gatewayUrl);
+    setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+      action: 'one-click-authorization',
+      checkTimeout: 1000 * 300,
+      prefix: (0, _urlJoin.default)(gatewayUrl, 'space/api/did'),
+      baseUrl: new URL(gatewayUrl).origin,
+      checkFn: _axios.default.create({
+        baseURL: (0, _urlJoin.default)(gatewayUrl, 'space')
+      }).get,
+      extraParams: {
+        appDid: blocklet.appDid,
+        appName,
+        appDescription,
+        scopes: 'list:object read:object write:object',
+        appUrl,
+        referrer: window.location.href,
+        nodeDid
+      },
+      onClose: () => {
+        // eslint-disable-next-line no-shadow
+        setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+          open: false
+        }));
+      },
+      open: true
+    }));
+  };
+  (0, _react.useEffect)(() => {
+    setAuthorizeConnect(preValue => _objectSpread(_objectSpread({}, preValue), {}, {
+      messages: {
+        title: t('storage.spaces.authorize.title', {
+          appName
+        }),
+        scan: t('storage.spaces.authorize.scan', {
+          appName
+        }),
+        confirm: '',
+        success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          gutterBottom: true,
+          children: t('storage.spaces.authorize.success')
+        })
+      }
+    }));
+  }, [appName, locale, t]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    getEndpoint: () => spaceProps.endpoint,
+    getGatewayUrl: () => spaceProps.gatewayUrl
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_spaceSelector.default, _objectSpread(_objectSpread(_objectSpread({}, restProps), spaceProps), {}, {
+      onSelect: handleOnClickAuthorize,
+      loading: !isReady
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+      forceConnected: false,
+      saveConnect: false,
+      prefix: authorizeConnect.prefix,
+      open: authorizeConnect.open,
+      popup: true,
+      action: authorizeConnect.action,
+      baseUrl: authorizeConnect.baseUrl,
+      checkFn: authorizeConnect.checkFn,
+      onSuccess: onAuthorizeConnectSuccess,
+      onClose: authorizeConnect.onClose,
+      checkTimeout: authorizeConnect.checkTimeout,
+      extraParams: authorizeConnect.extraParams,
+      messages: authorizeConnect.messages,
+      locale: locale
+    })]
+  });
+});
+SpaceConnector.propTypes = {
+  onConnect: _propTypes.default.func
+};
+SpaceConnector.defaultProps = {
+  onConnect: () => {}
+};
+var _default = SpaceConnector;
+exports.default = _default;

package/lib/blocklet/component/{space-gateway-selector.js → space-selector.js}

@@ -18,7 +18,7 @@ var _session = require("../../../lib/contexts/session");
 var _toast = _interopRequireDefault(require("../../toast"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-const _excluded = ["onSelect", "endpoint", "loading"];
+const _excluded = ["onSelect", "endpoint", "gatewayUrl", "loading", "size", "helperText"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -40,15 +40,18 @@ const DEFAULT_GATEWAY_LIST = [{
   avatar: 'S'
 }];
 const filter = (0, _Autocomplete.createFilterOptions)();
-function SpaceGatewaySelector(_ref) {
+function SpaceSelector(_ref) {
   let {
       onSelect,
       endpoint,
-      loading
+      gatewayUrl: defaultGatewayUrl,
+      loading,
+      size,
+      helperText
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const [gatewayList, setGatewayList] = (0, _useLocalStorage.default)('did-space-gateway-list', DEFAULT_GATEWAY_LIST);
-  const [gatewayUrl, setGatewayUrl] = (0, _useLocalStorage.default)('did-space-gateway-url', DEFAULT_GATEWAY_LIST[0].value);
+  const [gatewayUrl, setGatewayUrl] = (0, _react.useState)(defaultGatewayUrl || DEFAULT_GATEWAY_LIST[0].value);
   const {
     t
   } = (0, _context.useLocaleContext)();
@@ -134,8 +137,9 @@ function SpaceGatewaySelector(_ref) {
     },
     renderInput: params => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
+        helperText: helperText,
         label: t('storage.spaces.label'),
-        size: "small",
+        size: size,
         InputProps: _objectSpread(_objectSpread({}, params.InputProps), {}, {
           type: 'search',
           endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
@@ -161,14 +165,20 @@ function SpaceGatewaySelector(_ref) {
   }));
 }
 const Container = (0, _styled.default)(_Autocomplete.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 40px;\n  width: 100%;\n  max-width: 720px;\n  ", " {\n    width: 75%;\n  }\n  input.MuiInputBase-input {\n    max-width: calc(100% - 80px);\n  }\n"])), props => props.theme.breakpoints.down('md'));
-SpaceGatewaySelector.propTypes = {
+SpaceSelector.propTypes = {
   onSelect: _propTypes.default.func.isRequired,
   endpoint: _propTypes.default.string,
-  loading: _propTypes.default.bool
+  loading: _propTypes.default.bool,
+  size: _propTypes.default.string,
+  helperText: _propTypes.default.string,
+  gatewayUrl: _propTypes.default.string
 };
-SpaceGatewaySelector.defaultProps = {
+SpaceSelector.defaultProps = {
   endpoint: undefined,
-  loading: false
+  loading: false,
+  size: 'small',
+  helperText: '',
+  gatewayUrl: ''
 };
-var _default = SpaceGatewaySelector;
+var _default = SpaceSelector;
 exports.default = _default;

package/lib/blocklet/config-navigation.js

@@ -5,8 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _material = require("@mui/material");
-var _lab = require("@mui/lab");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _LoadingButton = _interopRequireDefault(require("@mui/lab/LoadingButton"));
 var _react2 = require("@iconify/react");
 var _notistack = require("notistack");
 var _ahooks = require("ahooks");
@@ -113,11 +122,11 @@ function ConfigNavigation() {
         variant: 'success'
       });
     } catch (e) {
-      enqueueSnackbar( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      enqueueSnackbar( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "subtitle2",
           children: t('navigation.actionFailed')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "body1",
           children: (0, _util.formatError)(e) || e.error
         })]
@@ -136,11 +145,11 @@ function ConfigNavigation() {
         variant: 'success'
       });
     } catch (e) {
-      enqueueSnackbar( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      enqueueSnackbar( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "subtitle2",
           children: t('navigation.actionFailed')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "body1",
           children: (0, _util.formatError)(e) || e.error
         })]
@@ -163,32 +172,32 @@ function ConfigNavigation() {
     };
   }, [blocklet.appDid, pageState.mockRole]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonGroup, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
       variant: "outlined",
       children: Object.keys(navigationTypeMap).map(key => {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
           variant: navigationState.activeSection === key ? 'contained' : undefined,
           onClick: () => updateActiveSection(key),
           children: [navigationTypeMap[key], " (".concat(getNavigation(key).length, ")")]
         }, key);
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Toolbar, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.default, {
       variant: "dense",
       sx: {
         paddingLeft: '0px !important',
         paddingRight: '0px !important',
         mt: 2
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
         variant: "h6",
         component: "div",
         sx: {
           flexGrow: 1
         },
         children: "Config"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonGroup, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
         variant: "outlined",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingButton.default, {
           size: "small",
           variant: "outlined",
           color: "error",
@@ -205,9 +214,9 @@ function ConfigNavigation() {
           },
           children: "\u91CD\u7F6E"
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonGroup, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
         variant: "outlined",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           size: "small",
           variant: "outlined",
           startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
@@ -215,7 +224,7 @@ function ConfigNavigation() {
           }),
           onClick: () => handleAddNavigation(),
           children: "\u65B0\u5EFA"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingButton.default, {
           size: "small",
           variant: "contained",
           startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
@@ -227,14 +236,14 @@ function ConfigNavigation() {
           children: "\u4FDD\u5B58"
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
       variant: "outlined",
       sx: {
         display: 'flex',
         height: 280,
         overflow: 'hidden'
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
         elevation: 0,
         sx: {
           flex: 1,
@@ -277,41 +286,41 @@ function ConfigNavigation() {
           }
         })
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Toolbar, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.default, {
       variant: "dense",
       sx: {
         paddingLeft: '0px !important',
         paddingRight: '0px !important',
         mt: 3
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
         variant: "h6",
         component: "div",
         sx: {
           flexGrow: 1
         },
         children: "Preview"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
         sx: {
           m: 1,
           minWidth: 120
         },
         size: "small",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
           children: "Role"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
           value: pageState.mockRole,
           label: "Role",
           onChange: e => {
             pageState.mockRole = e.target.value;
           },
-          children: roles.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          children: roles.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
             value: item.name,
             children: item.title
           }, item.name))
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
       variant: "outlined",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Session.SessionContext.Provider, {
         value: sessionCtxValue,

package/lib/blocklet/oauth/auth0.js

@@ -0,0 +1,162 @@
+"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 _node = require("../../contexts/node");
+var _blocklet = require("../../contexts/blocklet");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function OAuthAuth0() {
+  var _blocklet$meta, _blocklet$settings, _blocklet$settings$oa;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  // TODO: @zhanghan 将来需要换成 permanent did
+  const did = blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did;
+  const auth0 = Object.assign({
+    enabled: false,
+    domain: '',
+    clientId: ''
+  }, (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : (_blocklet$settings$oa = _blocklet$settings.oauth) === null || _blocklet$settings$oa === void 0 ? void 0 : _blocklet$settings$oa.auth0) || {});
+  const {
+    handleSubmit,
+    control,
+    formState,
+    watch,
+    reset
+  } = (0, _reactHookForm.useForm)({
+    defaultValues: (0, _pick.default)(auth0, ['domain', 'clientId', 'enabled'])
+  });
+  const enabled = watch('enabled');
+  const onSubmit = (0, _ahooks.useMemoizedFn)(async data => {
+    try {
+      var _blockletChanged$sett, _blockletChanged$sett2;
+      const {
+        blocklet: blockletChanged
+      } = await api.configOAuth({
+        input: {
+          did,
+          oauth: JSON.stringify({
+            auth0: data
+          })
+        }
+      });
+      const defaultValues = Object.assign({
+        enabled: false,
+        domain: '',
+        clientId: ''
+      }, (blockletChanged === null || blockletChanged === void 0 ? void 0 : (_blockletChanged$sett = blockletChanged.settings) === null || _blockletChanged$sett === void 0 ? void 0 : (_blockletChanged$sett2 = _blockletChanged$sett.oauth) === null || _blockletChanged$sett2 === void 0 ? void 0 : _blockletChanged$sett2.auth0) || {});
+      // 将当前表单的默认值重置为新的数据，这样能够修正页面的 isDirty 数据
+      reset(defaultValues);
+      _toast.default.success(t('oauth.saveSuccess'));
+    } catch (err) {
+      _toast.default.success(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)(_material.Switch, _objectSpread({
+              checked: field.value
+            }, field)),
+            label: t('oauth.auth0.enable'),
+            sx: {
+              marginBottom: '8px'
+            }
+          });
+        }
+      }), /*#__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)(_material.Button, {
+        type: "submit",
+        variant: "contained",
+        onSubmit: handleSubmit(onSubmit),
+        disabled: !formState.isDirty,
+        children: t('oauth.save')
+      })]
+    })
+  });
+}
+var _default = OAuthAuth0;
+exports.default = _default;