@blocklet/ui-react 2.9.51 → 2.9.53

package/lib/UserSessions/components/user-sessions.js

@@ -0,0 +1,282 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = UserSessions;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
+var _ahooks = require("ahooks");
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
+var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
+var _uaParserJs = _interopRequireDefault(require("ua-parser-js"));
+var _Util = require("@arcblock/ux/lib/Util");
+var _Dialog = require("@arcblock/ux/lib/Dialog");
+var _pAll = _interopRequireDefault(require("p-all"));
+var _material = require("@mui/material");
+var _userSessionInfo = _interopRequireDefault(require("./user-session-info"));
+var _client = require("../../libs/client");
+var _locales = require("../libs/locales");
+var _utils = require("../libs/utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const parseUa = ua => {
+  const parser = new _uaParserJs.default(ua, {
+    // eslint-disable-next-line no-useless-escape
+    browser: [[/(ArcWallet)\/([\w\.]+)/i], [_uaParserJs.default.BROWSER.NAME, _uaParserJs.default.BROWSER.VERSION]]
+  });
+  const result = parser.getResult();
+  return result;
+};
+function UserSessions({
+  user,
+  showAction = true,
+  showUser = true
+}) {
+  const currentVisitorId = (0, _Util.getVisitorId)();
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    confirmApi,
+    confirmHolder
+  } = (0, _Dialog.useConfirm)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  });
+  const getData = (0, _ahooks.useMemoizedFn)(async () => {
+    let data = user?.userSessions;
+    if (!data) {
+      data = await _client.client.userSession.getUserSessions({
+        did: user.did
+      });
+    }
+    try {
+      const ipIndexList = data?.map((x, index) => [index, x.lastLoginIp]).filter(x => !!x[1]);
+      const ipList = ipIndexList?.map(x => x[1]);
+      const result = await (0, _utils.batchIp2Region)(ipList);
+      for (let index = 0; index < result.length; index++) {
+        const x = result[index];
+        const ipIndexItem = ipIndexList[index];
+        const dataItem = data[ipIndexItem[0]];
+        dataItem.ipRegion = x;
+      }
+    } catch (e) {
+      console.warn("Failed to convert ip to region");
+      console.error(e);
+    }
+    const now = /* @__PURE__ */new Date().getTime();
+    return (0, _sortBy.default)(data, x => {
+      if (x.visitorId === currentVisitorId) {
+        return -1;
+      }
+      return now - new Date(x.updatedAt).getTime();
+    });
+  });
+  const pageState = (0, _ahooks.useRequest)(getData);
+  const safeData = (0, _ahooks.useCreation)(() => {
+    return pageState.data || [];
+  }, [pageState.data]);
+  const ipRegionMap = (0, _ahooks.useCreation)(() => {
+    return safeData.reduce((acc, x) => {
+      acc[x.lastLoginIp] = x.ipRegion;
+      return acc;
+    }, {});
+  }, [safeData]);
+  const logout = (0, _ahooks.useMemoizedFn)(({
+    visitorId
+  }) => {
+    confirmApi.open({
+      title: t("logoutThisSession"),
+      content: t("logoutThisSessionConfirm"),
+      confirmButtonText: t("confirm"),
+      cancelButtonText: t("cancel"),
+      onConfirm: async () => {
+        await _client.client.user.logout({
+          visitorId
+        });
+        pageState.refresh();
+        confirmApi.close();
+      }
+    });
+  });
+  const otherUserSessions = (0, _ahooks.useCreation)(() => {
+    const list = safeData.filter(x => x.visitorId !== currentVisitorId);
+    return list;
+  }, [safeData]);
+  const logoutAll = (0, _ahooks.useMemoizedFn)(() => {
+    confirmApi.open({
+      title: t("logoutAllSession"),
+      content: t("logoutAllSessionConfirm"),
+      confirmButtonText: t("confirm"),
+      cancelButtonText: t("cancel"),
+      onConfirm: async () => {
+        const list = otherUserSessions.map(x => {
+          return () => _client.client.user.logout({
+            visitorId: x.visitorId
+          });
+        });
+        await (0, _pAll.default)(list, {
+          concurrency: 3,
+          stopOnError: false
+        });
+        pageState.refresh();
+        confirmApi.close();
+      }
+    });
+  });
+  const customButtons = [];
+  if (showAction) {
+    customButtons.push( /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: t("logoutAllTips"),
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        sx: {
+          ml: 0.5
+        },
+        size: "small",
+        variant: "contained",
+        color: "error",
+        onClick: logoutAll,
+        disabled: otherUserSessions.length === 0,
+        children: t("logoutAll")
+      })
+    }, "logoutAll"));
+  }
+  const tableOptions = (0, _ahooks.useCreation)(() => {
+    return {
+      // viewColumns: false,
+      search: false,
+      sort: false,
+      download: false,
+      filter: false,
+      print: false,
+      expandableRowsOnClick: false,
+      searchDebounceTime: 600
+    };
+  }, []);
+  const columns = [{
+    label: t("platform"),
+    name: "platform",
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = safeData[rawIndex];
+        const result = parseUa(x.ua);
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          children: [result.os?.name, result.os?.version].filter(Boolean).join("/") || t("unknown")
+        });
+      }
+    }
+  }, {
+    label: t("deviceType"),
+    name: "deviceType",
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = safeData[rawIndex];
+        const result = parseUa(x.ua);
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          children: [result.browser?.name, result.browser?.version].filter(Boolean).join("/") || t("unknown")
+        });
+      }
+    }
+  }, {
+    label: t("walletOS"),
+    name: "walletOS",
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = safeData[rawIndex];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          children: x.extra?.walletOS || t("unknown")
+        });
+      }
+    }
+  }, showUser && {
+    label: t("user"),
+    name: "user",
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = safeData[rawIndex];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_userSessionInfo.default, {
+          sessionUser: x.user,
+          user
+        });
+      }
+    }
+  }, {
+    label: t("updatedAt"),
+    name: "updatedAt",
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = safeData[rawIndex];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_RelativeTime.default, {
+          value: x.updatedAt,
+          relativeRange: 3 * 86400 * 1e3,
+          locale
+        });
+      }
+    }
+  }, {
+    label: t("lastLoginIp"),
+    name: "lastLoginIp",
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = safeData[rawIndex];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          children: ipRegionMap[x.lastLoginIp] ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              children: ipRegionMap[x.lastLoginIp]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              color: "grey",
+              children: x.lastLoginIp || t("unknown")
+            })]
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: x.lastLoginIp || t("unknown")
+          })
+        });
+      }
+    }
+  }, showAction && {
+    label: t("actions"),
+    name: "actions",
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = safeData[rawIndex];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            sx: {
+              whiteSpace: "nowrap",
+              fontSize: "12px",
+              px: 1
+            },
+            disabled: currentVisitorId === x.visitorId,
+            variant: "outlined",
+            size: "small",
+            color: "error",
+            onClick: () => logout({
+              visitorId: x.visitorId
+            }),
+            children: currentVisitorId === x.visitorId ? t("currentSession") : t("logout")
+          })
+        });
+      }
+    }
+  }].filter(Boolean);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      ".MuiTableCell-head": {
+        whiteSpace: "nowrap",
+        fontWeight: "bold"
+      }
+    },
+    children: [confirmHolder, /* @__PURE__ */(0, _jsxRuntime.jsx)(_Datatable.default, {
+      locale,
+      data: safeData,
+      columns,
+      customButtons,
+      options: tableOptions,
+      loading: pageState.loading
+    })]
+  });
+}

package/lib/UserSessions/index.d.ts

@@ -0,0 +1 @@
+export { default as UserSessions } from './components/user-sessions';

package/lib/UserSessions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UserSessions", {
+  enumerable: true,
+  get: function () {
+    return _userSessions.default;
+  }
+});
+var _userSessions = _interopRequireDefault(require("./components/user-sessions"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/UserSessions/libs/locales.d.ts

@@ -0,0 +1,52 @@
+export declare const translations: {
+    zh: {
+        confirm: string;
+        cancel: string;
+        visitorId: string;
+        deviceType: string;
+        platform: string;
+        walletOS: string;
+        role: string;
+        fullname: string;
+        email: string;
+        avatar: string;
+        user: string;
+        updatedAt: string;
+        lastLoginIp: string;
+        actions: string;
+        logoutAll: string;
+        logoutAllTips: string;
+        logout: string;
+        currentSession: string;
+        unknown: string;
+        logoutThisSession: string;
+        logoutThisSessionConfirm: string;
+        logoutAllSession: string;
+        logoutAllSessionConfirm: string;
+    };
+    en: {
+        confirm: string;
+        cancel: string;
+        visitorId: string;
+        deviceType: string;
+        platform: string;
+        walletOS: string;
+        role: string;
+        fullname: string;
+        email: string;
+        avatar: string;
+        user: string;
+        updatedAt: string;
+        actions: string;
+        lastLoginIp: string;
+        logoutAll: string;
+        logoutAllTips: string;
+        logout: string;
+        currentSession: string;
+        unknown: string;
+        logoutThisSession: string;
+        logoutThisSessionConfirm: string;
+        logoutAllSession: string;
+        logoutAllSessionConfirm: string;
+    };
+};

package/lib/UserSessions/libs/locales.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translations = void 0;
+const translations = exports.translations = {
+  zh: {
+    confirm: "\u786E\u8BA4",
+    cancel: "\u53D6\u6D88",
+    visitorId: "\u8BBE\u5907\u6807\u8BC6",
+    deviceType: "\u8BBE\u5907\u7C7B\u578B",
+    platform: "\u64CD\u4F5C\u7CFB\u7EDF",
+    walletOS: "\u94B1\u5305\u7C7B\u578B",
+    role: "\u89D2\u8272",
+    fullname: "\u59D3\u540D",
+    email: "\u90AE\u7BB1",
+    avatar: "\u5934\u50CF",
+    user: "\u7528\u6237",
+    updatedAt: "\u6700\u8FD1\u6D3B\u52A8\u65F6\u95F4",
+    lastLoginIp: "\u6700\u8FD1\u6D3B\u52A8\u5730\u5740",
+    actions: "\u64CD\u4F5C",
+    logoutAll: "\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD",
+    logoutAllTips: "\u4E0D\u4F1A\u6CE8\u9500\u5F53\u524D\u4F1A\u8BDD",
+    logout: "\u6CE8\u9500",
+    currentSession: "\u5F53\u524D\u4F1A\u8BDD",
+    unknown: "\u672A\u77E5",
+    logoutThisSession: "\u6CE8\u9500\u6307\u5B9A\u4F1A\u8BDD",
+    logoutThisSessionConfirm: "\u786E\u5B9A\u8981\u6CE8\u9500\u6B64\u4F1A\u8BDD\u5417?",
+    logoutAllSession: "\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD",
+    logoutAllSessionConfirm: "\u786E\u5B9A\u8981\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD\u5417?"
+  },
+  en: {
+    confirm: "Confirm",
+    cancel: "Cancel",
+    visitorId: "Device ID",
+    deviceType: "Device Type",
+    platform: "Platform",
+    walletOS: "Wallet OS",
+    role: "Role",
+    fullname: "Fullname",
+    email: "Email",
+    avatar: "Avatar",
+    user: "User",
+    updatedAt: "Last Active Time",
+    actions: "Actions",
+    lastLoginIp: "Last Login IP",
+    logoutAll: "Logout all",
+    logoutAllTips: "Will not logout current session",
+    logout: "Logout",
+    currentSession: "Current Session",
+    unknown: "Unknown",
+    logoutThisSession: "Logout this session",
+    logoutThisSessionConfirm: "Are you sure to logout this session?",
+    logoutAllSession: "Logout all sessions",
+    logoutAllSessionConfirm: "Are you sure to logout all sessions?"
+  }
+};

package/lib/UserSessions/libs/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function ip2Region(ip: string): Promise<string>;
+export declare function batchIp2Region(ips: string[]): Promise<string[]>;

package/lib/UserSessions/libs/utils.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.batchIp2Region = batchIp2Region;
+exports.ip2Region = ip2Region;
+const RESERVED_IP = "Reserved IP";
+const IP_REGION_CACHE = "ip-region-cache";
+async function getIpRegionFromIpApi(ip) {
+  const url = `https://ipapi.co/${ip}/json/`;
+  const result = await fetch(url);
+  const data = await result.json();
+  let region = "";
+  if (data.error) {
+    if (data.reserved) {
+      region = RESERVED_IP;
+    }
+  } else {
+    region = [data.country_name, data.region, data.city].filter(Boolean).join("/");
+  }
+  return region;
+}
+async function getIpRegionFromIpSb(ip) {
+  const url = `https://api.ip.sb/geoip/${ip}`;
+  const result = await fetch(url);
+  const data = await result.json();
+  let region = "";
+  if (data.error) {
+    if (data.reserved) {
+      region = RESERVED_IP;
+    }
+  } else {
+    region = [data.country, data.region, data.city].filter(Boolean).join("/");
+  }
+  return region;
+}
+async function ip2Region(ip) {
+  let region = "";
+  let ipRegionCache = {};
+  try {
+    const tmpCache = localStorage.getItem(IP_REGION_CACHE);
+    if (tmpCache) {
+      ipRegionCache = JSON.parse(tmpCache);
+    }
+  } catch {
+    ipRegionCache = {};
+  }
+  if (ipRegionCache[ip]) {
+    region = ipRegionCache[ip];
+  } else {
+    try {
+      region = await getIpRegionFromIpSb(ip);
+    } catch {
+      console.warn("Fail to get ip region from ip.sb");
+    }
+    if (!region) {
+      try {
+        region = await getIpRegionFromIpApi(ip);
+      } catch {
+        console.warn("Fail to get ip region from ip-api.co");
+      }
+    }
+  }
+  if (region) {
+    const ipList = Object.keys(ipRegionCache);
+    if (ipList.length > 100) {
+      delete ipRegionCache[ipList[0]];
+    }
+    if (ipRegionCache[ip]) {
+      delete ipRegionCache[ip];
+    }
+    ipRegionCache[ip] = region;
+    localStorage.setItem(IP_REGION_CACHE, JSON.stringify(ipRegionCache));
+  }
+  return region;
+}
+async function batchIp2Region(ips) {
+  return Promise.all(ips.map(ip => ip2Region(ip)));
+}

package/lib/blocklets.js

@@ -40,30 +40,30 @@ const getLocalizedNavigation = (navigation, locale = 'en') => {
     return navigation;
   }
   // eslint-disable-next-line no-shadow
-  const getTitle = (title, locale) => {
+  const getTitle = (title, _locale) => {
     if (typeof title === 'string') {
       return title;
     }
     if (typeof title === 'object') {
-      return title[locale] || title?.en || title?.zh;
+      return title[_locale] || title?.en || title?.zh;
     }
     return title;
   };
   // eslint-disable-next-line no-shadow
-  const getLink = (link, locale) => {
+  const getLink = (link, _locale) => {
     if (typeof link === 'string') {
       // http[s] 开头的 url
       if ((0, _utils.isUrl)(link)) {
         const url = new URL(link);
-        url.searchParams.set('locale', locale);
+        url.searchParams.set('locale', _locale);
         return url.href;
       }
       const url = new URL(link, window.location.origin);
-      url.searchParams.set('locale', locale);
+      url.searchParams.set('locale', _locale);
       return url.pathname + url.search;
     }
     if (typeof link === 'object') {
-      return link[locale] || link?.en || link?.zh;
+      return link[_locale] || link?.en || link?.zh;
     }
     return link;
   };

package/lib/common/header-addons.d.ts

@@ -7,16 +7,15 @@ declare namespace HeaderAddons {
     namespace propTypes {
         export let formattedBlocklet: any;
         export let addons: any;
-        export { sessionManagerProps };
+        export { SessionManagerProps as sessionManagerProps };
     }
     namespace defaultProps {
         let addons_1: null;
         export { addons_1 as addons };
-        export namespace sessionManagerProps_1 {
+        export namespace sessionManagerProps {
             let showRole: boolean;
         }
-        export { sessionManagerProps_1 as sessionManagerProps };
     }
 }
 export default HeaderAddons;
-import { sessionManagerProps } from '../types';
+import { SessionManagerProps } from '../types';

package/lib/common/header-addons.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function HeaderAddons({
   formattedBlocklet,
   addons,
-  sessionManagerProps: sessionManagerProps2
+  sessionManagerProps
 }) {
   const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
   const {
@@ -71,7 +71,7 @@ function HeaderAddons({
         locale,
         menu,
         showRole: true,
-        ...sessionManagerProps2
+        ...sessionManagerProps
       }, "session-user"));
     }
     if (typeof addons === "function") {
@@ -89,7 +89,7 @@ HeaderAddons.propTypes = {
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  sessionManagerProps: _types.sessionManagerProps
+  sessionManagerProps: _types.SessionManagerProps
 };
 HeaderAddons.defaultProps = {
   addons: null,

package/lib/contexts/config-user-space.js

@@ -35,12 +35,12 @@ function ConfigUserSpaceProvider({
   const deleteSpaceGateway = async () => {
     setSpaceGateway(void 0);
   };
+  const settingStorageEndpoint = endpoint => {};
   const updateSpaceGateway = async x => {
     setSpaceGateway(x);
     session.refresh();
     await settingStorageEndpoint(x.endpoint);
   };
-  const settingStorageEndpoint = endpoint => {};
   const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {
     value: {

package/lib/index.d.ts

@@ -5,3 +5,4 @@ export { default as Icon } from './Icon';
 export { default as ComponentInstaller } from './ComponentInstaller';
 export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
 export * from './UserCenter';
+export * from './UserSessions';

package/lib/index.js

@@ -65,4 +65,16 @@ Object.keys(_UserCenter).forEach(function (key) {
     }
   });
 });
+var _UserSessions = require("./UserSessions");
+Object.keys(_UserSessions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _UserSessions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _UserSessions[key];
+    }
+  });
+});
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/types.d.ts

@@ -1,2 +1,2 @@
-export const blockletMetaProps: any;
-export const sessionManagerProps: any;
+export const BlockletMetaProps: any;
+export const SessionManagerProps: any;

package/lib/types.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sessionManagerProps = exports.blockletMetaProps = void 0;
+exports.SessionManagerProps = exports.BlockletMetaProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable import/prefer-default-export */
 
-const blockletMetaProps = exports.blockletMetaProps = _propTypes.default.shape({
+const BlockletMetaProps = exports.BlockletMetaProps = _propTypes.default.shape({
   appLogo: _propTypes.default.node,
   appName: _propTypes.default.string,
   theme: _propTypes.default.shape({
@@ -26,7 +26,7 @@ const blockletMetaProps = exports.blockletMetaProps = _propTypes.default.shape({
     }))
   }))
 });
-const sessionManagerProps = exports.sessionManagerProps = _propTypes.default.shape({
+const SessionManagerProps = exports.SessionManagerProps = _propTypes.default.shape({
   showText: _propTypes.default.bool,
   showRole: _propTypes.default.bool,
   switchDid: _propTypes.default.bool,