@blocklet/ui-react 2.9.51 → 2.9.53

package/es/UserSessions/components/user-sessions.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { User } from '../../@types';
+export default function UserSessions({ user, showAction, showUser, }: {
+    readonly user: User & {
+        userSessions?: any[];
+    };
+    readonly showAction?: boolean;
+    readonly showUser?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,255 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Datatable from "@arcblock/ux/lib/Datatable";
+import { useCreation, useMemoizedFn, useRequest } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import RelativeTime from "@arcblock/ux/lib/RelativeTime";
+import sortBy from "lodash/sortBy";
+import UAParser from "ua-parser-js";
+import { getVisitorId } from "@arcblock/ux/lib/Util";
+import { useConfirm } from "@arcblock/ux/lib/Dialog";
+import pAll from "p-all";
+import { Box, Button, Tooltip, Typography } from "@mui/material";
+import UserSessionInfo from "./user-session-info.js";
+import { client } from "../../libs/client.js";
+import { translations } from "../libs/locales.js";
+import { batchIp2Region } from "../libs/utils.js";
+const parseUa = (ua) => {
+  const parser = new UAParser(ua, {
+    // eslint-disable-next-line no-useless-escape
+    browser: [[/(ArcWallet)\/([\w\.]+)/i], [UAParser.BROWSER.NAME, UAParser.BROWSER.VERSION]]
+  });
+  const result = parser.getResult();
+  return result;
+};
+export default function UserSessions({
+  user,
+  showAction = true,
+  showUser = true
+}) {
+  const currentVisitorId = getVisitorId();
+  const { locale } = useLocaleContext();
+  const { confirmApi, confirmHolder } = useConfirm();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const getData = useMemoizedFn(async () => {
+    let data = user?.userSessions;
+    if (!data) {
+      data = await 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 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 sortBy(data, (x) => {
+      if (x.visitorId === currentVisitorId) {
+        return -1;
+      }
+      return now - new Date(x.updatedAt).getTime();
+    });
+  });
+  const pageState = useRequest(getData);
+  const safeData = useCreation(() => {
+    return pageState.data || [];
+  }, [pageState.data]);
+  const ipRegionMap = useCreation(() => {
+    return safeData.reduce((acc, x) => {
+      acc[x.lastLoginIp] = x.ipRegion;
+      return acc;
+    }, {});
+  }, [safeData]);
+  const logout = useMemoizedFn(({ visitorId }) => {
+    confirmApi.open({
+      title: t("logoutThisSession"),
+      content: t("logoutThisSessionConfirm"),
+      confirmButtonText: t("confirm"),
+      cancelButtonText: t("cancel"),
+      onConfirm: async () => {
+        await client.user.logout({ visitorId });
+        pageState.refresh();
+        confirmApi.close();
+      }
+    });
+  });
+  const otherUserSessions = useCreation(() => {
+    const list = safeData.filter((x) => x.visitorId !== currentVisitorId);
+    return list;
+  }, [safeData]);
+  const logoutAll = useMemoizedFn(() => {
+    confirmApi.open({
+      title: t("logoutAllSession"),
+      content: t("logoutAllSessionConfirm"),
+      confirmButtonText: t("confirm"),
+      cancelButtonText: t("cancel"),
+      onConfirm: async () => {
+        const list = otherUserSessions.map((x) => {
+          return () => client.user.logout({ visitorId: x.visitorId });
+        });
+        await pAll(list, {
+          concurrency: 3,
+          stopOnError: false
+        });
+        pageState.refresh();
+        confirmApi.close();
+      }
+    });
+  });
+  const customButtons = [];
+  if (showAction) {
+    customButtons.push(
+      /* @__PURE__ */ jsx(Tooltip, { title: t("logoutAllTips"), children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          sx: { ml: 0.5 },
+          size: "small",
+          variant: "contained",
+          color: "error",
+          onClick: logoutAll,
+          disabled: otherUserSessions.length === 0,
+          children: t("logoutAll")
+        }
+      ) }, "logoutAll")
+    );
+  }
+  const tableOptions = 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__ */ jsx(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__ */ jsx(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__ */ jsx(Box, { children: x.extra?.walletOS || t("unknown") });
+        }
+      }
+    },
+    showUser && {
+      label: t("user"),
+      name: "user",
+      options: {
+        customBodyRenderLite: (rawIndex) => {
+          const x = safeData[rawIndex];
+          return /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user });
+        }
+      }
+    },
+    {
+      label: t("updatedAt"),
+      name: "updatedAt",
+      options: {
+        customBodyRenderLite: (rawIndex) => {
+          const x = safeData[rawIndex];
+          return /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale });
+        }
+      }
+    },
+    {
+      label: t("lastLoginIp"),
+      name: "lastLoginIp",
+      options: {
+        customBodyRenderLite: (rawIndex) => {
+          const x = safeData[rawIndex];
+          return /* @__PURE__ */ jsx(Box, { children: ipRegionMap[x.lastLoginIp] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", children: ipRegionMap[x.lastLoginIp] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: x.lastLoginIp || t("unknown") })
+          ] }) : /* @__PURE__ */ jsx(Typography, { children: x.lastLoginIp || t("unknown") }) });
+        }
+      }
+    },
+    showAction && {
+      label: t("actions"),
+      name: "actions",
+      options: {
+        customBodyRenderLite: (rawIndex) => {
+          const x = safeData[rawIndex];
+          return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            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__ */ jsxs(
+    Box,
+    {
+      sx: {
+        ".MuiTableCell-head": {
+          whiteSpace: "nowrap",
+          fontWeight: "bold"
+        }
+      },
+      children: [
+        confirmHolder,
+        /* @__PURE__ */ jsx(
+          Datatable,
+          {
+            locale,
+            data: safeData,
+            columns,
+            customButtons,
+            options: tableOptions,
+            loading: pageState.loading
+          }
+        )
+      ]
+    }
+  );
+}

package/es/UserSessions/index.d.ts

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

package/es/UserSessions/index.js

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

package/es/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/es/UserSessions/libs/locales.js

@@ -0,0 +1,52 @@
+export const 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/es/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/es/UserSessions/libs/utils.js

@@ -0,0 +1,73 @@
+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;
+}
+export 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;
+}
+export async function batchIp2Region(ips) {
+  return Promise.all(ips.map((ip) => ip2Region(ip)));
+}

package/es/blocklets.js

@@ -28,30 +28,30 @@ export 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 (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/es/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/es/common/header-addons.js

@@ -8,9 +8,9 @@ import SessionUser from "@arcblock/ux/lib/SessionUser";
 import SessionBlocklet from "@arcblock/ux/lib/SessionBlocklet";
 import LocaleSelector from "@arcblock/ux/lib/Locale/selector";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { sessionManagerProps } from "../types.js";
+import { SessionManagerProps } from "../types.js";
 import { getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
-export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps: sessionManagerProps2 }) {
+export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
   const sessionCtx = useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const { enableConnect = true, enableLocale = true } = formattedBlocklet;
@@ -48,7 +48,7 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
             locale,
             menu,
             showRole: true,
-            ...sessionManagerProps2
+            ...sessionManagerProps
           },
           "session-user"
         )
@@ -73,7 +73,7 @@ HeaderAddons.propTypes = {
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps
+  sessionManagerProps: SessionManagerProps
 };
 HeaderAddons.defaultProps = {
   addons: null,

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

@@ -17,13 +17,13 @@ function ConfigUserSpaceProvider({ children }) {
   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__ */ jsx(
     Provider,

package/es/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/es/index.js

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

package/es/types.d.ts

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

package/es/types.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 import PropTypes from 'prop-types';
 
-export const blockletMetaProps = PropTypes.shape({
+export const BlockletMetaProps = PropTypes.shape({
   appLogo: PropTypes.node,
   appName: PropTypes.string,
   theme: PropTypes.shape({
@@ -24,7 +24,7 @@ export const blockletMetaProps = PropTypes.shape({
   ),
 });
 
-export const sessionManagerProps = PropTypes.shape({
+export const SessionManagerProps = PropTypes.shape({
   showText: PropTypes.bool,
   showRole: PropTypes.bool,
   switchDid: PropTypes.bool,

package/lib/@types/index.d.ts

@@ -1,13 +1,11 @@
 import type { Axios } from 'axios';
+import type { UserPublicInfo } from '@blocklet/js-sdk';
 export type SessionContext = {
     session: Session;
     api: Axios;
 };
-export type User = {
-    did: string;
-    fullName: string;
+export type User = UserPublicInfo & {
     role: string;
-    avatar: string;
     email?: string;
     phone?: string;
     sourceProvider?: string;
@@ -15,7 +13,7 @@ export type User = {
     lastLoginIp?: string;
     createdAt?: string;
     passports?: any[];
-    didSpace: Record<string, any>;
+    didSpace?: Record<string, any>;
 };
 export type UserCenterTab = {
     value: string;

package/lib/Dashboard/index.d.ts

@@ -13,11 +13,11 @@ declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddon
 }): import("react").JSX.Element | null;
 declare namespace Dashboard {
     namespace propTypes {
-        export { blockletMetaProps as meta };
+        export { BlockletMetaProps as meta };
         export let fallbackUrl: any;
         export let invalidPathFallback: any;
         export let headerAddons: any;
-        export { sessionManagerProps };
+        export { SessionManagerProps as sessionManagerProps };
         export let links: any;
     }
     namespace defaultProps {
@@ -27,15 +27,14 @@ declare namespace Dashboard {
         export { invalidPathFallback_1 as invalidPathFallback };
         let headerAddons_1: undefined;
         export { headerAddons_1 as headerAddons };
-        export namespace sessionManagerProps_1 {
+        export namespace sessionManagerProps {
             let showRole: boolean;
             function onLogout(): void;
         }
-        export { sessionManagerProps_1 as sessionManagerProps };
         let links_1: never[];
         export { links_1 as links };
     }
 }
-import { blockletMetaProps } from '../types';
-import { sessionManagerProps } from '../types';
+import { BlockletMetaProps } from '../types';
+import { SessionManagerProps } from '../types';
 import { publicPath } from '../blocklets';