@blocklet/ui-react/lib/common/domain-warning.js

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

import { jsxs as a, jsx as t } from "react/jsx-runtime";
import { useState as S, useMemo as d, useCallback as u } from "react";
import p from "prop-types";
import { Dialog as T, DialogContent as C, Typography as c, Box as W, DialogActions as v, Button as f } from "@mui/material";
import { useMemoizedFn as M } from "ahooks";
import { translate as O } from "@arcblock/ux/lib/Locale/util";
import { joinURL as A } from "ufo";
import j from "../hooks/use-mobile.js";
const z = ["admin", "owner"], I = (i) => i.endsWith(".ip.abtnet.io"), E = (i) => i.endsWith(".did.abtnet.io"), H = {
  en: {
    guest: {
      title: "Notice: You are using a temporary domain",
      description: "You are accessing this site through a temporary domain. For a better experience, please contact the site administrator to configure a custom domain. Using a custom domain not only makes access more convenient but also ensures your access is more secure."
    },
    owner: {
      title: "Enhance Your Website Security",
      description: "Dear administrator, we recommend configuring your custom domain immediately, which will:",
      benefits1: "Automatically obtain HTTPS certificates to ensure secure data transmission",
      benefits2: "Create an exclusive brand image and increase website credibility",
      benefits3: "Get a shorter, more memorable access address",
      benefits4: "Provide visitors with a more professional experience",
      benefits5: "Domain configuration takes just minutes to complete, taking your website to the next level!"
    },
    skip: "Remind Me Later",
    bindDomain: "Configure Domain"
  },
  zh: {
    guest: {
      title: "温馨提示：当前使用的是临时域名",
      description: "您正在通过临时域名访问本站点。为了获得更好的访问体验，请联系站点管理员配置自定义域名。使用自定义域名不仅访问更便捷，还能确保您的访问更加安全。"
    },
    owner: {
      title: "提升网站安全性与专业度",
      description: "尊敬的管理员，我们建议您尽快配置自定义域名，这样可以：",
      benefits1: "自动获取 HTTPS 证书，确保数据传输安全",
      benefits2: "打造专属品牌形象，提升网站可信度",
      benefits3: "获得更简短、易记的访问地址",
      benefits4: "为访客提供更专业的访问体验",
      benefits5: "只需几分钟即可完成域名配置，全面提升您的网站品质！"
    },
    skip: "稍后提醒",
    bindDomain: "配置域名"
  }
}, N = 1e3 * 60 * 60 * 24 * 30, w = ".well-known/service/admin/domains";
function P({ locale: i = "en", session: h = {} }) {
  const l = h?.user, b = j(), [g, s] = S(() => {
    const e = window.localStorage.getItem("domain-warning-skip");
    if (!e) return !0;
    const r = +/* @__PURE__ */ new Date(), k = +new Date(e);
    return r - k > N;
  }), n = M((e, r = {}) => O(H, e, i, "en", r)), m = d(() => {
    try {
      const { hostname: e } = new URL(window.location.href);
      return e;
    } catch {
      return "";
    }
  }, []), x = d(
    () => [
      n("owner.benefits1"),
      n("owner.benefits2"),
      n("owner.benefits3"),
      n("owner.benefits4"),
      n("owner.benefits5")
    ],
    [n]
  ), D = u(() => {
    window.localStorage.setItem("domain-warning-skip", (/* @__PURE__ */ new Date()).toISOString()), s(!1);
  }, []), y = u(() => {
    const e = A(window.location.origin, w);
    e.startsWith("http") && window.open(e, "_blank"), s(!1);
  }, []), o = l?.role && z.includes(l.role);
  return window.location.href.includes(w) || b || !I(m) && !E(m) ? null : /* @__PURE__ */ a(T, { open: g, disableEscapeKeyDown: !0, fullWidth: !0, maxWidth: "sm", onClose: () => s(!1), children: [
    /* @__PURE__ */ a(C, { sx: { padding: "20px !important" }, children: [
      /* @__PURE__ */ t(
        c,
        {
          sx: {
            fontSize: "20px",
            fontWeight: "500"
          },
          children: n(o ? "owner.title" : "guest.title")
        }
      ),
      /* @__PURE__ */ t(
        c,
        {
          sx: {
            marginTop: "20px",
            fontSize: "14px",
            color: "text.secondary"
          },
          children: n(o ? "owner.description" : "guest.description")
        }
      ),
      o && /* @__PURE__ */ t(W, { component: "ul", children: x.map((e) => /* @__PURE__ */ t(
        c,
        {
          component: "li",
          sx: {
            fontSize: "14px",
            color: "text.secondary"
          },
          children: e
        },
        e
      )) })
    ] }),
    /* @__PURE__ */ a(v, { sx: { px: "12px !important" }, children: [
      /* @__PURE__ */ t(f, { onClick: D, children: n("skip") }),
      o && /* @__PURE__ */ t(f, { variant: "contained", onClick: y, children: n("bindDomain") })
    ] })
  ] });
}
P.propTypes = {
  locale: p.string,
  session: p.object
};
export {
  P as default
};