@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 A } from "react/jsx-runtime";
import G from "@arcblock/ux/lib/Datatable";
import { useReactive as z, useMemoizedFn as w, useMount as $, useRequest as J, useCreation as v } from "ahooks";
import { translate as K } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as j } from "@arcblock/ux/lib/Locale/context";
import T from "@arcblock/ux/lib/RelativeTime";
import S from "ua-parser-js";
import { getVisitorId as X } from "@arcblock/ux/lib/Util";
import { useConfirm as Y } from "@arcblock/ux/lib/Dialog";
import Z from "p-queue";
import { Box as d, Typography as a, CircularProgress as _, useMediaQuery as ee, Tooltip as te, Button as k, RadioGroup as oe, FormControlLabel as B, Radio as C } from "@mui/material";
import { memo as ne, useEffect as re } from "react";
import { mergeSx as M } from "@arcblock/ux/lib/Util/style";
import ie from "../../hooks/use-mobile.js";
import se from "./user-session-info.js";
import { client as P } from "../../libs/client.js";
import { translations as ae } from "../libs/locales.js";
import { ip2Region as le } from "../libs/utils.js";
const W = (u) => new S(u, {
  // eslint-disable-next-line no-useless-escape
  browser: [[/(ArcWallet)\/([\w\.]+)/i], [S.BROWSER.NAME, S.BROWSER.VERSION]]
}).getResult(), O = {
  display: "flex",
  justifyContent: "flex-end",
  textAlign: "right"
}, ce = new Z({ concurrency: 1 }), de = ne(({ userSession: u, isMobile: h = !1 }) => {
  const l = z({
    loading: !0,
    ipRegion: ""
  }), { t: f } = j();
  return re(() => {
    ce.add(async () => {
      try {
        l.ipRegion = await le(u.lastLoginIp);
      } finally {
        l.loading = !1;
      }
    });
  }, [l, u.lastLoginIp]), /* @__PURE__ */ n(
    d,
    {
      ...h && {
        display: "flex",
        alignItems: "center",
        justifyContent: "flex-end",
        gap: 1,
        flexWrap: "wrap"
      },
      children: l.ipRegion ? /* @__PURE__ */ s(A, { children: [
        /* @__PURE__ */ n(a, { variant: "body2", children: l.ipRegion }),
        /* @__PURE__ */ n(a, { variant: "body2", color: "grey", children: u.lastLoginIp || f("unknown") })
      ] }) : /* @__PURE__ */ s(A, { children: [
        /* @__PURE__ */ n(a, { children: u.lastLoginIp || f("unknown") }),
        l.loading ? /* @__PURE__ */ n(a, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ n(_, { size: 12, color: "inherit" }) }) : null
      ] })
    }
  );
});
function Ae({
  user: u,
  showAction: h = !0,
  showUser: l = !0,
  getUserSessions: f,
  showOffline: I = !1
}) {
  const r = z({
    status: "online",
    page: 1,
    pageSize: 10
  }), p = z({
    online: 0,
    expired: 0,
    offline: 0
  }), y = X(), { locale: b } = j(), m = ie({ key: "md" }), H = ee((e) => e.breakpoints.down("lg")), { confirmApi: R, confirmHolder: D } = Y(), t = w((e, o = {}) => K(ae, e, b, "en", o)), E = w(async () => {
    const e = await f({
      page: r.page,
      pageSize: r.pageSize,
      status: r.status
    }), o = e?.paging?.total || 0;
    return p[r.status] = o, {
      total: o,
      list: e?.list || []
    };
  });
  $(async () => {
    const e = await f({
      page: 1,
      pageSize: 1,
      status: "expired"
    });
    p.expired = e?.paging?.total || 0;
    const o = await f({
      page: 1,
      pageSize: 1,
      status: "offline"
    });
    p.offline = o?.paging?.total || 0;
  });
  const c = J(E, {
    refreshDeps: [r.status, r.page, r.pageSize]
  }), i = v(() => c.data?.list || [], [c.data?.list]), F = v(() => {
    const e = r.status;
    return e === "online" ? p[e] <= 1 : p[e] === 0;
  }, [i, y]), x = v(() => M({}, m ? O : {}), [m]), N = w(({ visitorId: e }) => {
    R.open({
      title: t("logoutThisSession"),
      content: t("logoutThisSessionConfirm"),
      confirmButtonText: t("confirm"),
      confirmButtonProps: {
        color: "error"
      },
      cancelButtonText: t("cancel"),
      onConfirm: async () => {
        await P.user.logout({
          visitorId: e,
          includeFederated: !0
        });
        const { page: o = 0 } = r, { list: g = [] } = c.data || {}, Q = g.length || 0;
        o > 1 && Q === 1 && (r.page = Math.max(o - 1, 1)), c.refresh(), R.close();
      }
    });
  }), U = w(() => {
    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 P.user.logout({
          status: r.status,
          visitorId: y,
          includeFederated: !0
        }), r.page = 1, c.refresh(), R.close();
      }
    });
  }), L = [];
  h && L.push(
    /* @__PURE__ */ n(
      te,
      {
        title: t("logoutAllTips", {
          type: t(r.status)
        }),
        children: /* @__PURE__ */ n(
          k,
          {
            sx: { ml: 0.5 },
            size: "small",
            variant: "contained",
            color: "error",
            onClick: U,
            disabled: F,
            children: t("logoutAll", {
              type: t(r.status)
            })
          }
        )
      },
      "logoutAll"
    )
  );
  const V = v(() => ({
    // 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 = W(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 = W(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") });
        }
      }
    },
    l && {
      label: t("user"),
      name: "user",
      options: {
        customBodyRenderLite: (e) => {
          const o = i[e];
          return /* @__PURE__ */ n(d, { sx: M({ minWidth: 150, maxWidth: 250 }, m ? O : {}), children: /* @__PURE__ */ n(se, { sessionUser: o.user, user: u }) });
        }
      }
    },
    {
      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(de, { 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(
            k,
            {
              sx: {
                whiteSpace: "nowrap",
                fontSize: "12px !important",
                lineHeight: "1.25",
                px: 1
              },
              disabled: y === o.visitorId,
              variant: "outlined",
              size: "small",
              color: "error",
              onClick: () => N({ 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: [
        D,
        /* @__PURE__ */ n(
          G,
          {
            count: c.data?.total || 0,
            locale: b,
            data: i,
            columns: q,
            customButtons: L,
            options: V,
            loading: c.loading,
            className: "pc-user-sessions-table",
            title: /* @__PURE__ */ s(
              oe,
              {
                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: [
                          "(",
                          p.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: [
                          "(",
                          p.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: [
                          "(",
                          p.offline,
                          ")"
                        ] })
                      ] })
                    }
                  ) : null
                ]
              }
            ),
            onChange: (e) => {
              r.page = e.page + 1, r.pageSize = e.rowsPerPage;
            }
          }
        )
      ]
    }
  );
}
export {
  Ae as default
};