@abtnode/ux 1.16.26-beta-818ea1c5 → 1.16.26-beta-351de484

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;

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

@@ -0,0 +1,166 @@
+"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 OAuthGoogle() {
+  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 authData = Object.assign({
+    enabled: false,
+    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.google) || {});
+  const {
+    handleSubmit,
+    control,
+    formState,
+    watch,
+    reset
+  } = (0, _reactHookForm.useForm)({
+    defaultValues: (0, _pick.default)(authData, ['clientSecret', 'clientId', '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({
+            google: data
+          })
+        }
+      });
+      const defaultValues = Object.assign({
+        enabled: false,
+        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.google) || {});
+      // 将当前表单的默认值重置为新的数据，这样能够修正页面的 isDirty 数据
+      reset(defaultValues);
+      _Toast.default.success(t('oauth.saveSuccess'));
+    } catch (err) {
+      _Toast.default.error(err.message || t('oauth.saveFailed'));
+    }
+  });
+  const validateClientId = (0, _ahooks.useMemoizedFn)(val => {
+    if (!(val !== null && val !== void 0 && val.trim())) {
+      return t('oauth.google.clientIdDescribe');
+    }
+    return true;
+  });
+  const validateClientSecret = (0, _ahooks.useMemoizedFn)(val => {
+    if (!(val !== null && val !== void 0 && val.trim())) {
+      return t('oauth.google.clientSecretDescribe');
+    }
+    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.google.enable'),
+            sx: {
+              marginBottom: 2,
+              ml: 1
+            }
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "clientId",
+        control: control,
+        rules: {
+          validate: enabled ? validateClientId : 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), {}, {
+              error: !!formState.errors[field.name],
+              label: t('oauth.google.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: "clientSecret",
+        control: control,
+        rules: {
+          validate: enabled ? validateClientSecret : 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), {}, {
+              type: "password",
+              label: t('oauth.google.clientSecret'),
+              error: !!formState.errors[field.name],
+              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 = exports.default = OAuthGoogle;

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

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = OAuthLogin;
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _reactDnd = require("react-dnd");
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
+var _react = require("@iconify/react");
+var _apple = _interopRequireDefault(require("@iconify-icons/logos/apple"));
+var _githubIcon = _interopRequireDefault(require("@iconify-icons/logos/github-icon"));
+var _googleIcon = _interopRequireDefault(require("@iconify-icons/logos/google-icon"));
+var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
+var _auth = _interopRequireDefault(require("./auth0"));
+var _github = _interopRequireDefault(require("./github"));
+var _google = _interopRequireDefault(require("./google"));
+var _apple2 = _interopRequireDefault(require("./apple"));
+var _dragItem = _interopRequireDefault(require("./drag-item"));
+var _node = require("../../../contexts/node");
+var _blocklet = require("../../../contexts/blocklet");
+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); }
+const avaliableAuthentication = [{
+  name: 'github',
+  title: 'GitHub',
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+    icon: _githubIcon.default
+  }),
+  component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_github.default, {})
+}, {
+  name: 'google',
+  title: 'Google',
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+    icon: _googleIcon.default
+  }),
+  component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_google.default, {})
+}, {
+  name: 'apple',
+  title: 'Apple',
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+    icon: _apple.default
+  }),
+  component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_apple2.default, {})
+}, {
+  name: 'auth0',
+  title: 'Auth0',
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+    icon: _auth0Icon.default
+  }),
+  component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_auth.default, {})
+}];
+const DEFAULT_OAUTH_LIST = ['github', 'google', 'apple', 'auth0'];
+function OAuthLogin() {
+  var _blocklet$meta, _blocklet$settings;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const did = blocklet === null || blocklet === void 0 || (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did;
+  const oauthConfig = (blocklet === null || blocklet === void 0 || (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.oauth) || {};
+  const oauthSort = Object.keys(oauthConfig).sort((a, b) => {
+    var _oauthConfig$a, _oauthConfig$b, _oauthConfig$a2;
+    if (((_oauthConfig$a = oauthConfig[a]) === null || _oauthConfig$a === void 0 ? void 0 : _oauthConfig$a.order) !== undefined && ((_oauthConfig$b = oauthConfig[b]) === null || _oauthConfig$b === void 0 ? void 0 : _oauthConfig$b.order) !== undefined) {
+      return oauthConfig[a].order - oauthConfig[b].order;
+    }
+    if (((_oauthConfig$a2 = oauthConfig[a]) === null || _oauthConfig$a2 === void 0 ? void 0 : _oauthConfig$a2.order) !== undefined) {
+      return -1;
+    }
+    return 1;
+  });
+  for (const OAUTH_ITEM of DEFAULT_OAUTH_LIST) {
+    if (!oauthSort.includes(OAUTH_ITEM)) {
+      oauthSort.push(OAUTH_ITEM);
+    }
+  }
+  const sortMaps = (0, _ahooks.useReactive)(oauthSort.reduce((total, value, index) => Object.assign(total, {
+    [value]: index
+  }), {}));
+  const sortedAuthentication = (0, _ahooks.useCreation)(() => {
+    const list = [...avaliableAuthentication];
+    list.sort((a, b) => sortMaps[a.name] - sortMaps[b.name]);
+    return list;
+  }, [sortMaps.auth0, sortMaps.github, sortMaps.google]);
+  const dndProps = {};
+  if (typeof window !== 'undefined') {
+    dndProps.context = window;
+  }
+  const saveOrder = (0, _ahooks.useMemoizedFn)(async rawOrderData => {
+    const orderData = {};
+    Object.keys(rawOrderData).forEach(oauthName => {
+      orderData[oauthName] = {
+        order: rawOrderData[oauthName]
+      };
+    });
+    await api.configOAuth({
+      input: {
+        did,
+        oauth: JSON.stringify(orderData)
+      }
+    });
+  });
+  const handleMoveItem = (0, _ahooks.useMemoizedFn)((dragIndex, hoverIndex) => {
+    const dragItem = sortedAuthentication[dragIndex];
+    const hoverItem = sortedAuthentication[hoverIndex];
+    sortMaps[dragItem.name] = hoverIndex;
+    sortMaps[hoverItem.name] = dragIndex;
+  });
+  const handleSaveOrder = (0, _ahooks.useMemoizedFn)(async () => {
+    await saveOrder(sortMaps);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDnd.DndProvider, _objectSpread(_objectSpread({
+      backend: _reactDndHtml5Backend.HTML5Backend
+    }, dndProps), {}, {
+      children: sortedAuthentication.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragItem.default, {
+        index: index,
+        id: x.name,
+        title: x.title,
+        icon: x.icon,
+        onMove: handleMoveItem,
+        onEnd: handleSaveOrder,
+        defaultExpand: x.enabled,
+        children: x.component
+      }, x.name))
+    }))
+  });
+}

package/lib/blocklet/preferences/index.js

@@ -28,7 +28,7 @@ var _configuration = _interopRequireDefault(require("../configuration"));
 var _notification = _interopRequireDefault(require("../notification"));
 var _index = _interopRequireDefault(require("../access/index"));
 var _node = require("../../contexts/node");
-var _oauth = _interopRequireDefault(require("../oauth"));
+var _authentication = _interopRequireDefault(require("../authentication"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 const _excluded = ["blocklet", "onUpdate"]; // eslint-disable-line
@@ -150,7 +150,7 @@ function BlockletPreferences(_ref2) {
     label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       display: "flex",
       alignItems: "center",
-      "data-cy": "configuration-tab-oauth",
+      "data-cy": "configuration-tab-authentication",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Login.default, {
         sx: {
           fontSize: 24
@@ -164,8 +164,8 @@ function BlockletPreferences(_ref2) {
           children: t('common.login')
         })
       })]
-    }, "oauth"),
-    value: 'oauth'
+    }, "authentication"),
+    value: 'authentication'
   }, {
     label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       display: "flex",
@@ -246,8 +246,8 @@ function BlockletPreferences(_ref2) {
     });
   } else if (current === 'access') {
     content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {});
-  } else if (current === 'oauth') {
-    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_oauth.default, {});
+  } else if (current === 'authentication') {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_authentication.default, {});
   } else if (current === 'notification') {
     content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_notification.default, {});
   } else {