@arcblock/ux 2.13.28 → 2.13.29

package/src/DIDConnect/did-connect-container.tsx

@@ -37,6 +37,7 @@ export default function DIDConnectContainer({
   appPid,
   slotProps,
   onClose = noop,
+  keepMounted = false,
 }: {
   // 是否弹出显示, true 表示在 Dialog 中渲染, 并可以通过 open/onClose 控制 dialog 的显示/隐藏, false 表示直接渲染原内容
   popup?: boolean;
@@ -59,6 +60,7 @@ export default function DIDConnectContainer({
       sx?: SxProps;
     };
   };
+  keepMounted?: boolean;
 }) {
   const color = useCreation(() => {
     const did = appPid || window.blocklet.appPid;
@@ -96,7 +98,7 @@ export default function DIDConnectContainer({
     onClose();
   };
 
-  const showModal = debouncedOpen || open;
+  const showModal = debouncedOpen || open || keepMounted;
 
   const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
 
@@ -286,6 +288,7 @@ export default function DIDConnectContainer({
       slots={{
         backdrop: BackdropWrap,
       }}
+      keepMounted={keepMounted}
       className="did-connect__container-dialog"
       onClose={handleOnClose}
       PaperProps={{

package/src/DIDConnect/index.ts

@@ -6,3 +6,4 @@ export { default as withContainer } from './with-container';
 export { default as withUxTheme } from './with-ux-theme';
 export { default as DIDConnectLogo } from './did-connect-logo';
 export { default as DIDConnectContainer } from './did-connect-container';
+export { default as RequestStorageAccessApiDialog } from './request-storage-access-api-dialog';

package/src/DIDConnect/request-storage-access-api-dialog.tsx

@@ -0,0 +1,280 @@
+import { Box, Button, Typography, Chip, List, ListItem } from '@mui/material';
+import { Icon } from '@iconify/react';
+import externalLinkIcon from '@iconify-icons/tabler/external-link';
+import lockOutlineIcon from '@iconify-icons/material-symbols/lock-outline';
+import checkCircleIcon from '@iconify-icons/material-symbols/check-circle';
+import rocketLaunchRoundedIcon from '@iconify-icons/material-symbols/rocket-launch-rounded';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import noop from 'lodash/noop';
+
+import { Locale } from '../type';
+import { translate } from '../Locale/util';
+import DIDConnectContainer from './did-connect-container';
+import CloseButton from '../CloseButton';
+import SharedBridge from '../SharedBridge';
+import { setVisitorId } from '../Util';
+
+type StorageAccessState = 'prompt' | 'granted' | 'denied';
+
+const translations: Record<
+  Locale,
+  {
+    allow: string;
+    dataUsage: string;
+    title: string;
+    clickAllow: ({ allowButton }: { allowButton: React.ReactNode }) => React.ReactNode;
+    reason: ({ site }: { site: React.ReactNode }) => React.ReactNode;
+    afterAllow: {
+      title: string;
+      list1: string;
+      list2: string;
+    };
+  }
+> = {
+  en: {
+    allow: 'Allow',
+    dataUsage:
+      'Your data is only used for identity authentication, and will not be collected or used for any other purpose.',
+    title: 'Authorization Request',
+    clickAllow: ({ allowButton }: { allowButton: React.ReactNode }) => {
+      return <>You only need to click the {allowButton} button below, and you will not see this request again.</>;
+    },
+    reason: ({ site }) => {
+      return <>For a better login experience, we need to apply for the storage permission of the {site} site.</>;
+    },
+    afterAllow: {
+      title: 'After authorization, you will enjoy:',
+      list1: 'More convenient login experience',
+      list2: 'Faster access speed',
+    },
+  },
+  zh: {
+    allow: '允许',
+    dataUsage: '您的数据仅用于身份认证，不会被收集或用于其他用途。',
+    title: '授权请求',
+    clickAllow: ({ allowButton }) => {
+      return <>您只需要点击下方的 {allowButton} 按钮，后续将不会再看到这个请求。</>;
+    },
+    reason: ({ site }) => {
+      return <>为了让您获得更好的登录体验，我们需要申请 {site} 站点存储权限。</>;
+    },
+    afterAllow: {
+      title: '授权后，您将享受：',
+      list1: '更便捷的登录体验',
+      list2: '更快的访问速度',
+    },
+  },
+};
+
+const RequestStorageAccessApiDialog = forwardRef(
+  (
+    {
+      locale = 'en',
+      src,
+      storageAccessState,
+      onHandle = noop,
+    }: {
+      locale?: Locale;
+      src: string;
+      storageAccessState: StorageAccessState;
+      onHandle: (data: { value: boolean; error?: Error }) => void;
+    },
+    ref
+  ) => {
+    const sharedBridgeRef = useRef<{ callIframe: (method: string) => Promise<any> }>(null);
+    const currentState = useReactive({
+      callback: noop,
+      open: false,
+      get origin() {
+        try {
+          return new URL(src).origin;
+        } catch (error) {
+          return src;
+        }
+      },
+      get host() {
+        try {
+          return new URL(src).host;
+        } catch (error) {
+          return src;
+        }
+      },
+    });
+    const t = useMemoizedFn((key, data = {}) => {
+      return translate(translations, key, locale, 'en', data);
+    });
+
+    const reset = useMemoizedFn(() => {
+      currentState.open = false;
+      currentState.callback = noop;
+    });
+
+    const open = useMemoizedFn(() => {
+      currentState.open = true;
+    });
+    const close = useMemoizedFn(() => {
+      currentState.open = false;
+    });
+
+    const _requestStorageAccess = useMemoizedFn(
+      async (callback: (result: boolean, origin?: 'broswer' | 'system') => void) => {
+        const result = await sharedBridgeRef.current?.callIframe('requestStorageAccess');
+        if (result.value) {
+          callback(true, 'broswer');
+        } else if (storageAccessState === undefined) {
+          // 用户未在当前网页交互过，此时必然需要进行一次弹窗
+          callback(false, 'system');
+        } else if (storageAccessState === 'denied') {
+          // 用户已经明确拒绝过跨站授权，直接弹窗
+          callback(false);
+        } else {
+          // NOTICE: 暂时保留这部分逻辑，后续可能会用上
+          // else if (
+          //   result.error?.name === 'NotAllowedError' &&
+          //   result.error?.message === 'requestStorageAccess not allowed'
+          // ) {
+          //   // 操作被浏览器禁止，需要用户手动与 iframe 交互一次才可以
+          //   currentState.open = true;
+          //   currentState.callback = callback;
+          // }
+          currentState.open = true;
+          currentState.callback = callback;
+        }
+      }
+    );
+    const requestStorageAccess = useMemoizedFn(() => {
+      return new Promise((resolve) => {
+        _requestStorageAccess((result, origin) => {
+          reset();
+          resolve({ value: result, origin });
+        });
+      });
+    });
+
+    const handleAllow = useMemoizedFn(() => {
+      currentState.open = false;
+    });
+    const handleClose = useMemoizedFn(() => {
+      currentState.open = false;
+      currentState.callback(false, 'system');
+    });
+
+    useImperativeHandle(ref, () => ({
+      open,
+      close,
+      requestStorageAccess,
+    }));
+
+    return (
+      <DIDConnectContainer popup open={currentState.open} onClose={handleClose} keepMounted>
+        <Box
+          sx={{
+            backgroundColor: 'background.default',
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            position: 'relative',
+            maxWidth: '100%',
+            transition: 'width 0.2s ease-in-out',
+            margin: 'auto',
+            p: 3,
+            gap: 2,
+          }}>
+          <CloseButton
+            onClose={handleClose}
+            sx={{
+              position: 'absolute',
+              right: 14,
+              top: 14,
+            }}
+          />
+          <Typography
+            component="div"
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+              fontFamily: 'Lexend',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+            }}>
+            <Box component={Icon} icon={lockOutlineIcon} fontSize={28} sx={{ color: 'warning.main' }} />
+            {t('title')}
+          </Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {/* 不需要随意更改以下内容的格式化，否则会影响到 UI 的展示 */}
+            <Typography>
+              {t('reason', {
+                site: (
+                  <Chip
+                    clickable
+                    component="a"
+                    href={currentState.origin}
+                    label={currentState.host}
+                    size="small"
+                    deleteIcon={<Icon icon={externalLinkIcon} />}
+                    onDelete={() => {}}
+                    target="_blank"
+                  />
+                ),
+              })}
+            </Typography>
+            <Typography component="div">
+              {t('clickAllow', {
+                allowButton: <Chip label={t('allow')} size="small" color="success" />,
+              })}
+            </Typography>
+            <Box sx={{ mt: 2 }}>
+              <Typography sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+                <Box component={Icon} icon={checkCircleIcon} fontSize={24} sx={{ color: 'success.main' }} />
+                {t('afterAllow.title')}
+              </Typography>
+              <List dense sx={{ py: 0, pl: 2 }}>
+                <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+                  <Box component={Icon} icon={rocketLaunchRoundedIcon} fontSize={20} sx={{ color: 'success.main' }} />
+                  {t('afterAllow.list1')}
+                </ListItem>
+                <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+                  <Box component={Icon} icon={rocketLaunchRoundedIcon} fontSize={20} sx={{ color: 'success.main' }} />
+                  {t('afterAllow.list2')}
+                </ListItem>
+              </List>
+            </Box>
+
+            <Typography component="div" variant="body2" color="grey.700">
+              {t('dataUsage')}
+            </Typography>
+          </Box>
+
+          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Box sx={{ position: 'relative', display: 'inline-block', cursor: 'pointer' }}>
+              <Button
+                variant="contained"
+                color="success"
+                onClick={handleAllow}
+                sx={{ minWidth: 100, letterSpacing: 1 }}>
+                {t('allow')}
+              </Button>
+              <SharedBridge
+                ref={sharedBridgeRef}
+                onClick={({ value, visitorId }) => {
+                  if (visitorId) setVisitorId(visitorId);
+
+                  currentState.callback(value, 'broswer');
+                }}
+                locale={locale}
+                src={src}
+                sx={{
+                  zIndex: 1,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </DIDConnectContainer>
+    );
+  }
+);
+
+export default memo(RequestStorageAccessApiDialog);

package/src/SessionUser/components/un-login.tsx

@@ -27,7 +27,7 @@ import { translations } from '../libs/translation';
 import Typography from '../../Typography';
 import QuickLoginItem from './quick-login-item';
 import { getFederatedEnabled, getMaster } from '../../Util/federated';
-import LoginButton from '../../LoginButton';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../Util/constant';
 
 export interface UnLoginProps {
   session: Session;
@@ -70,7 +70,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
   const loginAppName = loginApp?.appName || 'DID Connect';
   const loginAppLogo = joinURL(
     loginApp?.appUrl || '/',
-    loginApp?.appLogo || '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80'
+    loginApp?.appLogo || `${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo?imageFilter=convert&f=png&h=80`
   );
 
   useEffect(() => {
@@ -105,34 +105,26 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
 
   return (
     <>
-      <LoginButton
-        locale={locale}
+      <IconButton
+        ref={userAnchorRef}
+        data-cy="sessionManager-login"
+        className="arc-session-user-unlogin"
+        size="medium"
         onClick={_onLogin}
-        render={({ onClick }) => {
-          return (
-            <IconButton
-              ref={userAnchorRef}
-              data-cy="sessionManager-login"
-              className="arc-session-user-unlogin"
-              size="medium"
-              onClick={onClick}
-              aria-label="Login button">
-              {isFirstLoading ? (
-                <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
-                  <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
-                </Box>
-              ) : (
-                <Icon
-                  icon={UserIcon}
-                  fontSize={size}
-                  color={dark ? '#fff' : 'inherit'}
-                  style={{ transform: 'scale(1.25)' }}
-                />
-              )}
-            </IconButton>
-          );
-        }}
-      />
+        aria-label="Login button">
+        {isFirstLoading ? (
+          <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
+            <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
+          </Box>
+        ) : (
+          <Icon
+            icon={UserIcon}
+            fontSize={size}
+            color={dark ? '#fff' : 'inherit'}
+            style={{ transform: 'scale(1.25)' }}
+          />
+        )}
+      </IconButton>
       <Popper
         open={currentState.open}
         anchorEl={userAnchorRef.current}

package/src/SharedBridge/index.tsx

@@ -1,119 +1,113 @@
 import { Box } from '@mui/material';
 import type { SxProps } from '@mui/material';
-import React, { memo, useEffect, useId, useRef } from 'react';
+import { forwardRef, memo, useEffect, useId, useImperativeHandle, useRef } from 'react';
 import { withQuery } from 'ufo';
 import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
 
 import { mergeSx } from '../Util/style';
 import { callIframe, getCallbackAction } from '../Util/iframe';
 import { Locale } from '../type';
-import NeedStorageAccessApiDialog from './need-storage-access-api-dialog';
-import { DIDConnectContainer } from '../DIDConnect';
 
-const SharedBridge = memo(function SharedBridge({
-  src,
-  onClick,
-  onLoad,
-  sx,
-  iframeRef,
-  locale = 'en',
-  ...rest
-}: {
-  src: string;
-  onClick: (data: { action: string; value: boolean; visitorId?: string }) => void;
-  onLoad: () => void;
-  sx?: SxProps;
-  iframeRef?: React.RefObject<HTMLIFrameElement>;
-  locale?: Locale;
-}) {
-  const _iframeRef = useRef<HTMLIFrameElement>(null);
-  const refId = useId();
-  const dataId = `shared-bridge_${refId}`;
-  const currentState = useReactive<{
-    hasInited?: boolean;
-    open: boolean;
-    hasStorageAccess: boolean;
-    origin: string;
-    host: string;
-  }>({
-    hasInited: undefined,
-    open: false,
-    hasStorageAccess: false,
-    get origin() {
-      try {
-        return new URL(src).origin;
-      } catch (error) {
-        return src;
-      }
-    },
-    get host() {
-      try {
-        return new URL(src).host;
-      } catch (error) {
-        return src;
-      }
+const SharedBridge = forwardRef(
+  (
+    {
+      src,
+      onClick,
+      onLoad = noop,
+      sx,
+      locale = 'en',
+      ...rest
+    }: {
+      src: string;
+      onClick: (data: { action: string; value: boolean; visitorId?: string; error?: Error }) => void;
+      onLoad?: () => void;
+      sx?: SxProps;
+      locale?: Locale;
     },
-  });
+    ref
+  ) => {
+    const targetIframeRef = useRef<HTMLIFrameElement>(null);
+    const refId = useId();
+    const dataId = `shared-bridge_${refId}`;
+    const currentState = useReactive<{
+      hasInited?: boolean;
+      open: boolean;
+      hasStorageAccess: boolean;
+      origin: string;
+      host: string;
+      containerEl: HTMLDivElement | null;
+    }>({
+      hasInited: undefined,
+      open: false,
+      hasStorageAccess: false,
+      containerEl: null,
+      get origin() {
+        try {
+          return new URL(src).origin;
+        } catch (error) {
+          return src;
+        }
+      },
+      get host() {
+        try {
+          return new URL(src).host;
+        } catch (error) {
+          return src;
+        }
+      },
+    });
 
-  const targetIframeRef = iframeRef ?? _iframeRef;
+    useEffect(() => {
+      async function handleMessage(event: MessageEvent) {
+        const { data } = event;
+        if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
+          currentState.open = false;
 
-  useEffect(() => {
-    async function handleMessage(event: MessageEvent) {
-      const { data } = event;
-      if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
-        currentState.open = false;
+          if (!data.value) {
+            onClick(data);
+            return;
+          }
 
-        if (!data.value) {
-          onClick(data);
-          return;
+          const { value: visitorId } = await callIframe(targetIframeRef.current as HTMLIFrameElement, 'getVisitorId');
+          onClick({ ...data, visitorId });
+        } else if (data.action === getCallbackAction(dataId, 'preRequestStorageAccess')) {
+          currentState.open = true;
         }
-
-        const { value: visitorId } = await callIframe(targetIframeRef.current as HTMLIFrameElement, 'getVisitorId');
-        onClick({ ...data, visitorId });
-      } else if (data.action === getCallbackAction(dataId, 'preRequestStorageAccess')) {
-        currentState.open = true;
       }
-    }
 
-    window.addEventListener('message', handleMessage);
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onClick, dataId, targetIframeRef?.current]);
+      window.addEventListener('message', handleMessage);
+      return () => {
+        window.removeEventListener('message', handleMessage);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onClick, dataId, targetIframeRef?.current]);
 
-  const handleLoad = useMemoizedFn(() => {
-    callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
-      currentState.hasStorageAccess = value;
-      currentState.hasInited = true;
+    const handleLoad = useMemoizedFn(() => {
+      callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
+        currentState.hasStorageAccess = value;
+        currentState.hasInited = true;
+      });
+      // HACK: 如果目标 bridge 1s 内没有初始化，则认为目标 bridge 不兼容，不进行后续内容的加载
+      setTimeout(() => {
+        if (currentState.hasInited === undefined) {
+          currentState.hasInited = false;
+        }
+      }, 1000);
+      onLoad();
     });
-    setTimeout(() => {
-      if (currentState.hasInited === undefined) {
-        currentState.hasInited = false;
-      }
-    }, 1000);
-    onLoad();
-  });
-
-  if (currentState.hasInited === false) {
-    return null;
-  }
 
-  if (currentState.hasStorageAccess) {
-    return null;
-  }
-
-  return (
-    <>
-      <DIDConnectContainer popup hideCloseButton open={currentState.open}>
-        <NeedStorageAccessApiDialog locale={locale} origin={currentState.origin} host={currentState.host} />
-      </DIDConnectContainer>
+    useImperativeHandle(ref, () => ({
+      callIframe(action: string) {
+        return callIframe(targetIframeRef.current as HTMLIFrameElement, action);
+      },
+    }));
+    return (
       <Box
         {...rest}
         component="iframe"
         ref={targetIframeRef}
         onLoad={handleLoad}
-        title="shared-bridge"
         data-id={dataId}
         src={withQuery(src, { id: dataId })}
         sx={mergeSx(
@@ -125,13 +119,13 @@ const SharedBridge = memo(function SharedBridge({
             width: '100%',
             height: '100%',
             cursor: 'pointer',
-            opacity: 0,
+            backgroundColor: 'transparent',
           },
           sx
         )}
       />
-    </>
-  );
-});
+    );
+  }
+);
 
-export default SharedBridge;
+export default memo(SharedBridge);

package/lib/LoginButton/index.d.ts

@@ -1,12 +0,0 @@
-import { Locale } from '../type';
-type LoginButtonProps = {
-    onClick: (options?: {
-        openMode?: 'popup' | 'window';
-    }) => void;
-    render: (options: {
-        onClick: () => void;
-    }) => React.ReactNode;
-    locale?: Locale;
-};
-export default function LoginButton({ onClick, render, locale }: LoginButtonProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export {};