@blocklet/ui-react 2.9.67 → 2.9.69

package/src/UserCenter/components/third-party-login/third-party-item.tsx

@@ -0,0 +1,239 @@
+import { Icon } from '@iconify/react';
+import { Box, ListItem, Tooltip, Typography } from '@mui/material';
+import LinkRoundedIcon from '@iconify-icons/material-symbols/link-rounded';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import Button from '@arcblock/ux/lib/Button';
+import Avatar from '@arcblock/ux/lib/Avatar';
+import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useConfirm } from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import InfoOutlineRoundedIcon from '@iconify-icons/material-symbols/info-outline-rounded';
+import AppleIcon from '@iconify-icons/logos/apple';
+import GithubIcon from '@iconify-icons/logos/github-icon';
+import GoogleIcon from '@iconify-icons/logos/google-icon';
+// import Auth0Icon from '@iconify-icons/logos/auth0-icon';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import { useContext } from 'react';
+import pick from 'lodash/pick';
+import { getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
+import { LOGIN_PROVIDER, OAUTH_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+
+import { translations } from '../../libs/locales';
+import type { OAuthAccount, SessionContext as TSessionContext } from '../../../@types';
+
+export default function ThirdPartyItem({
+  item,
+}: {
+  item: {
+    provider: string;
+    did: string;
+    pk: string;
+    userInfo?: OAuthAccount['userInfo'];
+    _bind?: boolean;
+    _rawProvider?: string;
+    _mainProvider?: boolean;
+  };
+}) {
+  const { confirmApi, confirmHolder } = useConfirm();
+  const currentState = useReactive({
+    loading: false,
+  });
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const { session } = useContext<TSessionContext>(SessionContext);
+  const { bindOAuth, unbindOAuth, setBaseUrl, baseUrl: oauthBaseUrl } = session.useOAuth();
+
+  const iconMap = {
+    // email: MailOutlineRoundedIcon,
+    [LOGIN_PROVIDER.AUTH0]: MailOutlineRoundedIcon,
+    [LOGIN_PROVIDER.APPLE]: AppleIcon,
+    [LOGIN_PROVIDER.GITHUB]: GithubIcon,
+    [LOGIN_PROVIDER.GOOGLE]: GoogleIcon,
+  };
+
+  const icon = useCreation(() => {
+    return iconMap[item?.provider];
+  }, [item?.provider]);
+  const title = useCreation(() => {
+    return OAUTH_PROVIDER[item?.provider as keyof typeof OAUTH_PROVIDER] || 'unknown';
+  }, [item?.provider]);
+
+  const toggleBind = useMemoizedFn(async () => {
+    try {
+      currentState.loading = true;
+      await new Promise((resolve, reject) => {
+        if (item?._bind) {
+          confirmApi.open({
+            title: t('thirdPartyLogin.confirmUnbind', { name: title }),
+            content: t('thirdPartyLogin.confirmUnbindDescription', { name: title }),
+            confirmButtonText: t('common.confirm'),
+            cancelButtonText: t('common.cancel'),
+            onConfirm(close: () => void) {
+              unbindOAuth({
+                session,
+                connectedAccount: {
+                  ...pick(item, ['did', 'pk']),
+                  showProvider: item.provider,
+                  provider: item._rawProvider,
+                },
+              })
+                .then(resolve)
+                .catch(reject);
+              close();
+            },
+            onCancel: resolve,
+          });
+        } else {
+          const backupBaseUrl = oauthBaseUrl;
+          const blocklet = window?.blocklet;
+          let baseUrl = '/';
+          const federatedEnabled = getFederatedEnabled(blocklet);
+          const master = getMaster(blocklet);
+          if (federatedEnabled && master?.appPid && session?.user?.sourceAppPid) {
+            baseUrl = master.appUrl;
+          }
+          setBaseUrl(baseUrl);
+          bindOAuth({
+            session,
+            oauthItem: {
+              ...item,
+              provider: item._rawProvider,
+            },
+          })
+            .then(resolve)
+            .catch(reject)
+            .finally(() => {
+              setBaseUrl(backupBaseUrl);
+            });
+        }
+      });
+    } catch (err) {
+      console.error(`Failed to ${item?._bind ? 'unbind' : 'bind'} oauth account`, err);
+    } finally {
+      currentState.loading = false;
+    }
+  });
+
+  return (
+    <>
+      <ListItem
+        disablePadding
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}>
+        <Box
+          sx={{
+            flex: 1,
+            borderRadius: 2,
+            border: `1px solid ${colors.strokeBorderBase}`,
+            background: colors.backgroundsBgField,
+            display: 'flex',
+            alignItems: 'center',
+            py: 1,
+            px: 1.5,
+            gap: 0.75,
+            fontSize: '14px',
+            lineHeight: 1,
+          }}>
+          <Icon icon={icon} fontSize={16} />
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flex: 1,
+              gap: 1,
+            }}>
+            {title}
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}>
+            {item.userInfo?.email || item.did}
+            {item.userInfo?.email ? (
+              <Tooltip
+                title={
+                  <>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <Avatar size={36} variant="circle" shape="circle" src={item.userInfo?.picture} did={item.did} />
+                      <Box>
+                        <Typography
+                          sx={{
+                            whiteSpace: 'normal',
+                            wordBreak: 'break-all',
+                            fontSize: '0.9rem',
+                          }}>
+                          {item.userInfo?.name}
+                        </Typography>
+                        <Typography
+                          sx={{
+                            whiteSpace: 'normal',
+                            wordBreak: 'break-all',
+                            fontSize: '0.9rem',
+                          }}>
+                          {item.userInfo?.email}
+                        </Typography>
+                      </Box>
+                    </Box>
+                    {/* 暂不显示 oauth 账户的 did */}
+                    {/* <Box
+                    component={DID}
+                    did={item.did}
+                    sx={{
+                      '& .did-address-text': {
+                        color: 'white',
+                      },
+                    }}
+                  /> */}
+                  </>
+                }>
+                <Icon
+                  icon={InfoOutlineRoundedIcon}
+                  color={colors.textSubtitle}
+                  fontSize={16}
+                  style={{ cursor: 'pointer' }}
+                />
+              </Tooltip>
+            ) : null}
+          </Box>
+        </Box>
+        <Tooltip title={item._mainProvider ? t('thirdPartyLogin.mainProviderCantRemove') : ''}>
+          {/* HACK: 结合下面的 button disable 使用，必须增加这一层 */}
+          <Box>
+            <Button
+              variant="outlined"
+              size="small"
+              sx={{
+                color: item?._bind ? colors.red : colors.foregroundsFgBase,
+                borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
+                backgroundColor: colors.buttonsButtonNeutral,
+                '&:hover': {
+                  borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
+                  backgroundColor: colors.buttonsButtonNeutralHover,
+                },
+                py: 0.5,
+                borderRadius: 2,
+                fontWeight: 500,
+              }}
+              startIcon={currentState.loading ? null : <Icon icon={LinkRoundedIcon} />}
+              onClick={toggleBind}
+              disabled={item._mainProvider}
+              loading={currentState.loading}>
+              {item?._bind ? t('thirdPartyLogin.disconnect') : t('thirdPartyLogin.connect')}
+            </Button>
+          </Box>
+        </Tooltip>
+      </ListItem>
+      {confirmHolder}
+    </>
+  );
+}

package/src/UserCenter/components/user-center.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Box, CircularProgress, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
-import { useCreation, useMemoizedFn, useMount, useRequest } from 'ahooks';
+import { useCreation, useMemoizedFn, useMount, useRequest, useUpdateEffect } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
@@ -21,8 +21,7 @@ import type { UserPublicInfo } from '@blocklet/js-sdk';
 import Footer from '../../Footer';
 import Header from '../../Header';
 import { translations } from '../libs/locales';
-import UserInfo from './user-info';
-import UserBasicInfo from './user-basic-info';
+import { UserInfo, UserBasicInfo } from './user-info';
 import type { SessionContext as TSessionContext, User, UserCenterTab } from '../../@types';
 // @ts-ignore
 import { formatBlockletInfo, getLocalizedNavigation } from '../../blocklets';
@@ -96,14 +95,14 @@ export default function UserCenter({
       }
     },
     {
-      refreshDeps: [currentDid, isMyself, session?.initialized],
+      refreshDeps: [currentDid, isMyself, session?.initialized, session?.user],
     }
   );
 
   const privacyState = useRequest(
     async () => {
       if (userState.data && currentTab) {
-        const config = await client.user.getUserPrivacyConfig({ did: currentDid });
+        const config = await client.user.getUserPrivacyConfig({ did: currentDid as string });
         return config;
       }
       return null;
@@ -174,27 +173,35 @@ export default function UserCenter({
     }
   });
 
+  const settingContent = useCreation(() => {
+    return (
+      <Settings
+        user={userState.data as User}
+        settings={{ userCenterTabs }}
+        onSave={async () => {
+          await privacyState.runAsync();
+          return privacyState.data;
+        }}
+      />
+    );
+  }, [userState.data]);
+
   const openSettings = useMemoizedFn(() => {
     confirmApi.open({
       title: t('settings'),
-      content: (
-        <Settings
-          user={userState.data as User}
-          settings={{
-            userCenterTabs,
-          }}
-          onSave={async () => {
-            await privacyState.runAsync();
-            return privacyState.data;
-          }}
-        />
-      ),
+      content: settingContent,
       showCancelButton: false,
       confirmButtonText: t('done'),
       onConfirm: confirmApi.close,
     });
   });
 
+  useUpdateEffect(() => {
+    confirmApi.update({
+      content: settingContent,
+    });
+  }, [settingContent]);
+
   useMount(() => {
     if (autoPopupSetting) {
       openSettings();

package/src/UserCenter/components/user-info/index.tsx

@@ -0,0 +1,3 @@
+export { default as UserBasicInfo } from './user-basic-info';
+export { default as UserInfoItem } from './user-info-item';
+export { default as UserInfo } from './user-info';

package/src/UserCenter/components/{user-basic-info.tsx → user-info/user-basic-info.tsx}

@@ -12,8 +12,8 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import noop from 'lodash/noop';
 
-import { translations } from '../libs/locales';
-import type { User } from '../../@types';
+import { translations } from '../../libs/locales';
+import type { User } from '../../../@types';
 
 export default function UserBasicInfo({
   user,

package/src/UserCenter/components/{user-info.tsx → user-info/user-info.tsx}

@@ -10,10 +10,11 @@ import SettingsInputAntennaRoundedIcon from '@iconify-icons/material-symbols/set
 import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
 
-import { translations } from '../libs/locales';
+import { translations } from '../../libs/locales';
 import UserInfoItem from './user-info-item';
-import type { User } from '../../@types';
+import type { User } from '../../../@types';
 
 export default function UserInfo({
   user,
@@ -27,11 +28,7 @@ export default function UserInfo({
   });
 
   const readableProvider = useCreation(() => {
-    const nameMap = {
-      wallet: 'DID Wallet',
-      auth0: 'Auth0',
-    };
-    return (user?.sourceProvider && nameMap[user.sourceProvider as keyof typeof nameMap]) || t('unknown');
+    return (user?.sourceProvider && LOGIN_PROVIDER_NAME[user.sourceProvider]) || t('unknown');
   }, [user?.sourceProvider]);
 
   const userInfoListData = [];

package/src/UserCenter/libs/locales.ts

@@ -31,6 +31,8 @@ export const translations = {
       slack: 'Slack',
     },
     common: {
+      confirm: '确认',
+      cancel: '取消',
       required: '必填的',
       invalid: '无效',
     },
@@ -68,6 +70,15 @@ export const translations = {
         },
       },
     },
+    thirdPartyLogin: {
+      title: '第三方登录',
+      connect: '绑定',
+      disconnect: '解绑',
+      mainProviderCantRemove: '主账号不允许解绑',
+      confirmUnbind: '确定要解绑 {name} 吗?',
+      confirmUnbindDescription:
+        '解绑后您将无法使用 {name} 登录至该账户。如果解绑后，您仍使用 {name} 登录，会自动创建一个新账户',
+    },
   },
   en: {
     settings: 'Settings',
@@ -101,6 +112,8 @@ export const translations = {
       slack: 'Slack',
     },
     common: {
+      confirm: 'Confirm',
+      cancel: 'Cancel',
       required: 'Required',
       invalid: 'Invalid',
     },
@@ -138,5 +151,14 @@ export const translations = {
         },
       },
     },
+    thirdPartyLogin: {
+      title: 'Third Party Login',
+      connect: 'Connect',
+      disconnect: 'Disconnect',
+      mainProviderCantRemove: 'Main account not allowed to remove',
+      confirmUnbind: 'Are you sure to unbind {name}?',
+      confirmUnbindDescription:
+        'You will not be able to log in to this account using {name} after unbundling. If you are still logged in with {name} after unbundling, a new account will be created automatically!',
+    },
   },
 };

package/src/UserSessions/components/user-sessions.tsx

@@ -201,9 +201,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          // @ts-ignore FIXME: @zhanghan 新版 js-sdk 会提供这个属性的提示
           return x.createdAt ? (
-            // @ts-ignore FIXME: @zhanghan 新版 js-sdk 会提供这个属性的提示
             <RelativeTime value={x.createdAt} relativeRange={3 * 86400 * 1000} locale={locale} />
           ) : (
             t('unknown')
@@ -217,7 +215,6 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          // @ts-ignore FIXME: @zhanghan 新版 js-sdk 会提供这个属性的提示
           return x.status === 'expired' ? (
             t('expired')
           ) : (