@blocklet/ui-react/lib/UserSessions/components/user-sessions.js

Some useful front-end web components that can be used in Blocklets.

import { jsx as n, jsxs as s, Fragment as k } from "react/jsx-runtime";
import K from "@arcblock/ux/lib/Datatable";
import { useReactive as z, useMemoizedFn as v, useMount as $, useRequest as J, useCreation as w } from "ahooks";
import { translate as X } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as O } from "@arcblock/ux/lib/Locale/context";
import T from "@arcblock/ux/lib/RelativeTime";
import S from "ua-parser-js";
import { getVisitorId as Y } from "@arcblock/ux/lib/Util";
import { useConfirm as Z } from "@arcblock/ux/lib/Dialog";
import _ from "@arcblock/ux/lib/DID";
import ee from "p-queue";
import { Box as d, Typography as a, CircularProgress as te, useMediaQuery as oe, Tooltip as ne, Button as P, RadioGroup as re, FormControlLabel as B, Radio as C } from "@mui/material";
import { memo as ie, useEffect as se } from "react";
import { getBlockletSDK as ae } from "@blocklet/js-sdk";
import { mergeSx as M } from "@arcblock/ux/lib/Util/style";
import le from "../../hooks/use-mobile.js";
import ce from "./user-session-info.js";
import { translations as de } from "../libs/locales.js";
import { ip2Region as pe } from "../libs/utils.js";
const D = (p) => new S(p, {
  // eslint-disable-next-line no-useless-escape
  browser: [[/(ArcWallet)\/([\w\.]+)/i], [S.BROWSER.NAME, S.BROWSER.VERSION]]
}).getResult(), W = {
  display: "flex",
  justifyContent: "flex-end",
  textAlign: "right"
}, ue = new ee({ concurrency: 1 }), me = ie(({ userSession: p, isMobile: h = !1 }) => {
  const l = z({
    loading: !0,
    ipRegion: ""
  }), { t: f } = O();
  return se(() => {
    ue.add(async () => {
      try {
        l.ipRegion = await pe(p.lastLoginIp);
      } finally {
        l.loading = !1;
      }
    });
  }, [l, p.lastLoginIp]), /* @__PURE__ */ n(
    d,
    {
      ...h && {
        display: "flex",
        alignItems: "center",
        justifyContent: "flex-end",
        gap: 1,
        flexWrap: "wrap"
      },
      children: l.ipRegion ? /* @__PURE__ */ s(k, { children: [
        /* @__PURE__ */ n(a, { variant: "body2", children: l.ipRegion }),
        /* @__PURE__ */ n(a, { variant: "body2", color: "grey", children: p.lastLoginIp || f("unknown") })
      ] }) : /* @__PURE__ */ s(k, { children: [
        /* @__PURE__ */ n(a, { children: p.lastLoginIp || f("unknown") }),
        l.loading ? /* @__PURE__ */ n(a, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ n(te, { size: 12, color: "inherit" }) }) : null
      ] })
    }
  );
});
function Me({
  user: p,
  showAction: h = !0,
  showUser: l = !0,
  getUserSessions: f,
  showOffline: I = !1,
  showAppPid: j = !1
}) {
  const L = ae(), r = z({
    status: "online",
    page: 1,
    pageSize: 10
  }), u = z({
    online: 0,
    expired: 0,
    offline: 0
  }), y = Y(), { locale: b } = O(), m = le({ key: "md" }), H = oe((e) => e.breakpoints.down("lg")), { confirmApi: R, confirmHolder: E } = Z(), t = v((e, o = {}) => X(de, e, b, "en", o)), F = v(async () => {
    const e = await f({
      page: r.page,
      pageSize: r.pageSize,
      status: r.status
    }), o = e?.paging?.total || 0;
    return u[r.status] = o, {
      total: o,
      list: e?.list || []
    };
  });
  $(async () => {
    const e = await f({
      page: 1,
      pageSize: 1,
      status: "expired"
    });
    u.expired = e?.paging?.total || 0;
    const o = await f({
      page: 1,
      pageSize: 1,
      status: "offline"
    });
    u.offline = o?.paging?.total || 0;
  });
  const c = J(F, {
    refreshDeps: [r.status, r.page, r.pageSize]
  }), i = w(() => c.data?.list || [], [c.data?.list]), N = w(() => {
    const e = r.status;
    return e === "online" ? u[e] <= 1 : u[e] === 0;
  }, [i, y]), x = w(() => M({}, m ? W : {}), [m]), U = v(({ visitorId: e }) => {
    R.open({
      title: t("logoutThisSession"),
      content: t("logoutThisSessionConfirm"),
      confirmButtonText: t("confirm"),
      confirmButtonProps: {
        color: "error"
      },
      cancelButtonText: t("cancel"),
      onConfirm: async () => {
        await L.user.logout({
          visitorId: e,
          includeFederated: !0
        });
        const { page: o = 0 } = r, { list: g = [] } = c.data || {}, G = g.length || 0;
        o > 1 && G === 1 && (r.page = Math.max(o - 1, 1)), c.refresh(), R.close();
      }
    });
  }), V = v(() => {
    R.open({
      title: t("logoutAllSession", {
        type: t(r.status)
      }),
      content: t("logoutAllSessionConfirm", {
        type: t(r.status)
      }),
      confirmButtonText: t("confirm"),
      confirmButtonProps: {
        color: "error"
      },
      cancelButtonText: t("cancel"),
      onConfirm: async () => {
        await L.user.logout({
          status: r.status,
          visitorId: y,
          includeFederated: !0
        }), r.page = 1, c.refresh(), R.close();
      }
    });
  }), A = [];
  h && A.push(
    /* @__PURE__ */ n(
      ne,
      {
        title: t("logoutAllTips", {
          type: t(r.status)
        }),
        children: /* @__PURE__ */ n(
          P,
          {
            sx: { ml: 0.5 },
            size: "small",
            variant: "contained",
            color: "error",
            onClick: V,
            disabled: N,
            children: t("logoutAll", {
              type: t(r.status)
            })
          }
        )
      },
      "logoutAll"
    )
  );
  const q = w(() => ({
    // viewColumns: false,
    search: !1,
    sort: !1,
    download: !1,
    filter: !1,
    print: !1,
    expandableRowsOnClick: !1,
    searchDebounceTime: 600,
    page: r.page - 1,
    rowsPerPage: r.pageSize,
    count: c.data?.total || 0
  }), [c.data?.total, r.page, r.pageSize]), Q = [
    {
      label: t("platform"),
      name: "platform",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e], g = D(o?.ua);
          return /* @__PURE__ */ n(d, { sx: x, children: [g.os?.name, g.os?.version].filter(Boolean).join("/") || t("unknown") });
        }
      }
    },
    {
      label: t("deviceType"),
      name: "deviceType",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e], g = D(o?.ua);
          return /* @__PURE__ */ n(d, { sx: x, children: [g.browser?.name, g.browser?.version].filter(Boolean).join("/") || t("unknown") });
        }
      }
    },
    {
      label: t("walletOS"),
      name: "walletOS",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e];
          return /* @__PURE__ */ n(d, { sx: x, children: o.extra?.walletOS || t("unknown") });
        }
      }
    },
    j && {
      label: "App Pid",
      name: "appPid",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e];
          return o.appPid ? /* @__PURE__ */ n(_, { size: 14, responsive: !1, compact: !0, did: o.appPid }) : null;
        }
      }
    },
    l && {
      label: t("user"),
      name: "user",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e];
          return /* @__PURE__ */ n(d, { sx: M({ minWidth: 150, maxWidth: 250 }, m ? W : {}), children: /* @__PURE__ */ n(ce, { sessionUser: o.user, user: p }) });
        }
      }
    },
    {
      label: t("createdAt"),
      name: "createdAt",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e];
          return /* @__PURE__ */ n(d, { sx: x, children: o.createdAt ? /* @__PURE__ */ n(T, { value: o.createdAt, relativeRange: 3 * 86400 * 1e3, locale: b }) : t("unknown") });
        }
      }
    },
    !I && {
      label: t("updatedAt"),
      name: "updatedAt",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e];
          return /* @__PURE__ */ n(d, { sx: x, children: o.status === "expired" ? t("expired") : /* @__PURE__ */ n(T, { value: o.updatedAt, relativeRange: 3 * 86400 * 1e3, locale: b }) });
        }
      }
    },
    {
      label: t("lastLoginIp"),
      name: "lastLoginIp",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e];
          return /* @__PURE__ */ n(me, { userSession: o, isMobile: m });
        }
      }
    },
    h && {
      label: t("actions"),
      name: "actions",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e];
          return /* @__PURE__ */ n(d, { sx: x, children: /* @__PURE__ */ n(
            P,
            {
              sx: {
                whiteSpace: "nowrap",
                fontSize: "12px !important",
                lineHeight: "1.25",
                px: 1
              },
              disabled: y === o.visitorId,
              variant: "outlined",
              size: "small",
              color: "error",
              onClick: () => U({ visitorId: o.visitorId }),
              children: o.status === "expired" ? t("remove") : y === o.visitorId ? t("currentSession") : t("logout")
            }
          ) });
        }
      }
    }
  ].filter(Boolean);
  return /* @__PURE__ */ s(
    d,
    {
      className: "pc-user-sessions",
      sx: {
        maxWidth: m ? "unset" : H ? "calc(100vw - 300px)" : "100%",
        ...m && {
          ".pc-user-sessions-table > div:nth-child(2)": {
            border: "1px solid",
            borderColor: "divider",
            borderRadius: 1
          }
        },
        ".MuiTableCell-head": {
          whiteSpace: "nowrap",
          fontWeight: "bold"
        },
        ".MuiTableRow-root": {
          border: "unset",
          "&:nth-child(even)": {
            backgroundColor: "grey.50",
            "&:hover": {
              backgroundColor: (e) => `${e.palette.grey[50]} !important`
            }
          }
        },
        ".MuiTableRow-hover": {
          "&:hover": {
            backgroundColor: "inherit !important"
          }
        },
        ".MuiTableCell-root": {
          paddingRight: "8px",
          paddingLeft: "8px",
          color: "text.secondary",
          ...m && {
            padding: "8px !important",
            "&:first-child": {
              paddingTop: "20px!important"
            },
            "&:last-child": {
              paddingBottom: "20px!important"
            }
          }
        }
      },
      children: [
        E,
        /* @__PURE__ */ n(
          K,
          {
            count: c.data?.total || 0,
            locale: b,
            data: i,
            columns: Q,
            customButtons: A,
            options: q,
            loading: c.loading,
            className: "pc-user-sessions-table",
            title: /* @__PURE__ */ s(
              re,
              {
                row: !0,
                sx: { lineHeight: 1, ml: 1 },
                onChange: (e) => {
                  r.status = e.target.value;
                },
                children: [
                  /* @__PURE__ */ n(
                    B,
                    {
                      value: "online",
                      control: /* @__PURE__ */ n(C, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "online" }),
                      label: /* @__PURE__ */ s(a, { sx: { display: "flex", alignItems: "center" }, children: [
                        t("online"),
                        /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                          "(",
                          u.online,
                          ")"
                        ] })
                      ] })
                    }
                  ),
                  /* @__PURE__ */ n(
                    B,
                    {
                      value: "expired",
                      control: /* @__PURE__ */ n(C, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "expired" }),
                      label: /* @__PURE__ */ s(a, { sx: { display: "flex", alignItems: "center" }, children: [
                        t("expired"),
                        /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                          "(",
                          u.expired,
                          ")"
                        ] })
                      ] })
                    }
                  ),
                  I ? /* @__PURE__ */ n(
                    B,
                    {
                      value: "offline",
                      control: /* @__PURE__ */ n(C, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "offline" }),
                      label: /* @__PURE__ */ s(a, { sx: { display: "flex", alignItems: "center" }, children: [
                        t("offline"),
                        /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                          "(",
                          u.offline,
                          ")"
                        ] })
                      ] })
                    }
                  ) : null
                ]
              }
            ),
            onChange: (e) => {
              r.page = e.page + 1, r.pageSize = e.rowsPerPage;
            }
          }
        )
      ]
    }
  );
}
export {
  Me as default
};