@blocklet/ui-react 2.9.67 → 2.9.69

package/lib/UserCenter/components/{user-basic-info.d.ts → user-info/user-basic-info.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-import type { User } from '../../@types';
+import type { User } from '../../../@types';
 export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassport, switchProfile, openSettings, ...rest }: {
     user: User;
     isMyself?: boolean;

package/lib/UserCenter/components/{user-basic-info.js → user-info/user-basic-info.js}

@@ -17,7 +17,7 @@ var _ahooks = require("ahooks");
 var _util = require("@arcblock/ux/lib/Locale/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _noop = _interopRequireDefault(require("lodash/noop"));
-var _locales = require("../libs/locales");
+var _locales = require("../../libs/locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function UserBasicInfo({
   user,

package/lib/UserCenter/components/{user-info.d.ts → user-info/user-info.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-import type { User } from '../../@types';
+import type { User } from '../../../@types';
 export default function UserInfo({ user, ...rest }: {
     user: User;
 } & BoxProps): import("react").JSX.Element;

package/lib/UserCenter/components/{user-info.js → user-info/user-info.js}

@@ -16,7 +16,8 @@ var _settingsInputAntennaRounded = _interopRequireDefault(require("@iconify-icon
 var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
 var _util = require("@arcblock/ux/lib/Locale/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _locales = require("../libs/locales");
+var _constant = require("@arcblock/ux/lib/Util/constant");
+var _locales = require("../../libs/locales");
 var _userInfoItem = _interopRequireDefault(require("./user-info-item"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function UserInfo({
@@ -30,11 +31,7 @@ function UserInfo({
     return (0, _util.translate)(_locales.translations, key, locale, "en", data);
   });
   const readableProvider = (0, _ahooks.useCreation)(() => {
-    const nameMap = {
-      wallet: "DID Wallet",
-      auth0: "Auth0"
-    };
-    return user?.sourceProvider && nameMap[user.sourceProvider] || t("unknown");
+    return user?.sourceProvider && _constant.LOGIN_PROVIDER_NAME[user.sourceProvider] || t("unknown");
   }, [user?.sourceProvider]);
   const userInfoListData = [];
   userInfoListData.push({

package/lib/UserCenter/libs/locales.d.ts

@@ -31,6 +31,8 @@ export declare const translations: {
             slack: string;
         };
         common: {
+            confirm: string;
+            cancel: string;
             required: string;
             invalid: string;
         };
@@ -68,6 +70,14 @@ export declare const translations: {
                 };
             };
         };
+        thirdPartyLogin: {
+            title: string;
+            connect: string;
+            disconnect: string;
+            mainProviderCantRemove: string;
+            confirmUnbind: string;
+            confirmUnbindDescription: string;
+        };
     };
     en: {
         settings: string;
@@ -101,6 +111,8 @@ export declare const translations: {
             slack: string;
         };
         common: {
+            confirm: string;
+            cancel: string;
             required: string;
             invalid: string;
         };
@@ -138,5 +150,13 @@ export declare const translations: {
                 };
             };
         };
+        thirdPartyLogin: {
+            title: string;
+            connect: string;
+            disconnect: string;
+            mainProviderCantRemove: string;
+            confirmUnbind: string;
+            confirmUnbindDescription: string;
+        };
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -37,6 +37,8 @@ const translations = exports.translations = {
       slack: "Slack"
     },
     common: {
+      confirm: "\u786E\u8BA4",
+      cancel: "\u53D6\u6D88",
       required: "\u5FC5\u586B\u7684",
       invalid: "\u65E0\u6548"
     },
@@ -73,6 +75,14 @@ const translations = exports.translations = {
           tag: "\u5DF2\u8FDE\u63A5"
         }
       }
+    },
+    thirdPartyLogin: {
+      title: "\u7B2C\u4E09\u65B9\u767B\u5F55",
+      connect: "\u7ED1\u5B9A",
+      disconnect: "\u89E3\u7ED1",
+      mainProviderCantRemove: "\u4E3B\u8D26\u53F7\u4E0D\u5141\u8BB8\u89E3\u7ED1",
+      confirmUnbind: "\u786E\u5B9A\u8981\u89E3\u7ED1 {name} \u5417?",
+      confirmUnbindDescription: "\u89E3\u7ED1\u540E\u60A8\u5C06\u65E0\u6CD5\u4F7F\u7528 {name} \u767B\u5F55\u81F3\u8BE5\u8D26\u6237\u3002\u5982\u679C\u89E3\u7ED1\u540E\uFF0C\u60A8\u4ECD\u4F7F\u7528 {name} \u767B\u5F55\uFF0C\u4F1A\u81EA\u52A8\u521B\u5EFA\u4E00\u4E2A\u65B0\u8D26\u6237"
     }
   },
   en: {
@@ -107,6 +117,8 @@ const translations = exports.translations = {
       slack: "Slack"
     },
     common: {
+      confirm: "Confirm",
+      cancel: "Cancel",
       required: "Required",
       invalid: "Invalid"
     },
@@ -143,6 +155,14 @@ const translations = exports.translations = {
           tag: "Connected"
         }
       }
+    },
+    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/lib/UserSessions/components/user-sessions.js

@@ -208,10 +208,7 @@ function UserSessions({
     options: {
       customBodyRenderLite: rawIndex => {
         const x = safeData[rawIndex];
-        return x.createdAt ?
-        // @ts-ignore FIXME: @zhanghan 新版 js-sdk 会提供这个属性的提示
-        /* @__PURE__ */
-        (0, _jsxRuntime.jsx)(_RelativeTime.default, {
+        return x.createdAt ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_RelativeTime.default, {
           value: x.createdAt,
           relativeRange: 3 * 86400 * 1e3,
           locale

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.67",
+  "version": "2.9.69",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -62,13 +62,14 @@
     }
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.9.67",
-    "@arcblock/did-connect": "^2.9.67",
-    "@arcblock/react-hooks": "^2.9.67",
-    "@arcblock/ux": "^2.9.67",
-    "@blocklet/js-sdk": "1.16.25-beta-be3a37f4",
+    "@arcblock/bridge": "^2.9.69",
+    "@arcblock/did-connect": "^2.9.69",
+    "@arcblock/react-hooks": "^2.9.69",
+    "@arcblock/ux": "^2.9.69",
+    "@blocklet/js-sdk": "^1.16.25",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
     "ahooks": "^3.7.10",
@@ -84,7 +85,6 @@
     "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
-    "react-router-dom": "^6.22.3",
     "ua-parser-js": "^1.0.37",
     "ufo": "^1.3.2",
     "url-join": "^4.0.1"
@@ -92,7 +92,8 @@
   "peerDependencies": {
     "@mui/icons-material": ">=5.15.0",
     "@mui/material": ">=5.15.0",
-    "react": ">=18.2.0"
+    "react": ">=18.2.0",
+    "react-router-dom": ">=6.22.3"
   },
   "publishConfig": {
     "access": "public"
@@ -108,5 +109,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "d9517b055c9631ac47474119674ad845e4e7c03b"
+  "gitHead": "375716410d5c6dc796fbd8dcd3240b846a5e1b33"
 }

package/src/@types/index.ts

@@ -1,21 +1,61 @@
 import type { Axios } from 'axios';
 import type { UserPublicInfo } from '@blocklet/js-sdk';
+import { OAUTH_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 
 export type SessionContext = {
   session: Session;
   api: Axios;
 };
 
+export type OAuthAccount = {
+  provider: keyof typeof OAUTH_PROVIDER;
+  id: string;
+  did: string;
+  pk: string;
+  lastLoginAt: string;
+  firstLoginAt: string;
+  order?: number;
+  userInfo?: {
+    email: string;
+    emailVerified: boolean;
+    name: string;
+    picture: string;
+    sub: string;
+    extraData: Object;
+  };
+};
+
+export type WalletAccount = {
+  provider: 'wallet';
+  did: string;
+  pk: string;
+  lastLoginAt: string;
+  firstLoginAt: string;
+};
+
+export type NFTAccount = {
+  provider: 'nft';
+  did: string;
+  pk: string;
+  owner: string;
+  lastLoginAt: string;
+  firstLoginAt: string;
+};
+
+export type ConnectedAccount = OAuthAccount | WalletAccount | NFTAccount;
+
 export type User = UserPublicInfo & {
   role: string;
   email?: string;
   phone?: string;
   sourceProvider?: string;
+  sourceAppPid?: string;
   lastLoginAt?: string;
   lastLoginIp?: string;
   createdAt?: string;
   passports?: any[];
   didSpace?: Record<string, any>;
+  connectedAccounts?: any[];
 };
 
 export type UserCenterTab = {
@@ -29,7 +69,7 @@ export type UserCenterTab = {
 export type Session = {
   loading: boolean;
   initialized: boolean;
-  user: User;
+  user?: User;
   login: any;
   logout: any;
   switch: any;
@@ -38,6 +78,7 @@ export type Session = {
   switchPassport: any;
 
   refresh: Function;
+  useOAuth: Function;
 };
 
 export type WebhookType = 'slack' | 'api';

package/src/@types/shims.d.ts

@@ -1,5 +1,11 @@
 declare module '@arcblock/ux/*';
+declare module '@arcblock/ux/lib/DID';
+declare module '@arcblock/ux/lib/Tabs';
+declare module '@arcblock/ux/lib/Switch';
+declare module '@arcblock/ux/lib/ErrorBoundary';
+
 declare module '@arcblock/did-connect/*';
+declare module '@arcblock/did-connect/lib/Session';
 
 declare module 'is-url';
 declare module 'url-join';

package/src/Dashboard/index.jsx

@@ -77,7 +77,8 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       if (invalidPathFallback) {
         invalidPathFallback();
       } else {
-        window.location.href = flattened[0]?.url || publicPath;
+        // FIXME: @zhanghan 暂时取消跳转首个 url 的行为
+        // window.location.href = flattened[0]?.url || publicPath;
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/UserCenter/components/settings.tsx

@@ -12,6 +12,7 @@ import Privacy from './privacy';
 import { User, UserCenterTab } from '../../@types';
 import DidSpace from './storage';
 import { UserSessions } from '../../UserSessions';
+import ThirdPartyLogin from './third-party-login';
 
 export default function Settings({
   user,
@@ -46,6 +47,11 @@ export default function Settings({
         value: 'notification',
         content: <Notification user={user} />,
       },
+      {
+        label: t('thirdPartyLogin.title'),
+        value: 'thirdPartyLogin',
+        content: <ThirdPartyLogin user={user} />,
+      },
       {
         label: t('privacyManagement'),
         value: 'privacy',
@@ -73,7 +79,7 @@ export default function Settings({
 
   const currentTab = useCreation(() => {
     return tabs.find((x) => x.value === currentState.tab);
-  }, [currentState.tab]);
+  }, [currentState.tab, tabs]);
   const handleChangeTab = useMemoizedFn((value) => {
     currentState.tab = value;
   });

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

@@ -0,0 +1,133 @@
+import { useContext, useState } from 'react';
+import { List } from '@mui/material';
+import { useAsyncEffect, useCreation } from 'ahooks';
+import { getConnectedAccounts, getSourceProvider } from '@arcblock/ux/lib/SessionUser/libs/utils';
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+
+import type { ConnectedAccount, OAuthAccount, User, SessionContext as TSessionContext } from '../../../@types';
+import ThirdPartyItem from './third-party-item';
+
+type ConnectedAccountProps = OAuthAccount & {
+  enabled: boolean;
+};
+
+export default function ThirdPartyLogin({ user }: { user: User }) {
+  const { session } = useContext<TSessionContext>(SessionContext);
+  const [oauthConfigs, setOauthConfigs] = useState<Record<string, ConnectedAccountProps>>({});
+  const { getOAuthConfigs } = session.useOAuth();
+  useAsyncEffect(async () => {
+    const data = await getOAuthConfigs({
+      sourceAppPid: user?.sourceAppPid,
+    });
+    setOauthConfigs(data);
+  }, [user?.sourceAppPid]);
+
+  const availableProviders = useCreation(() => {
+    const oauthList = Object.keys(oauthConfigs)
+      .map((x) => {
+        return {
+          ...oauthConfigs[x],
+          provider: x,
+        };
+      })
+      .filter((x) => x.enabled);
+    return oauthList;
+  }, [oauthConfigs]);
+
+  /**
+   * 1. 如果 connectedAccount 中存在 auth0，则应该将 auth0 转换为 google, apple, github 中的一种。如果可以转换，则标记需要移除 auth0；如果无法转换，则保留 auth0
+   * 2. 如果标记移除了 auth0，则还需要对 sourceProvider 进行转换，转换的值为 google, apple, github 中的一种
+   * 3. 如果标记移除了 auth0，还需要将 auth0 的 userInfo 数据添加到转换后的 provider 上
+   */
+  const normalizedAccounts = useCreation(() => {
+    const connectedAccounts: ConnectedAccount[] = getConnectedAccounts(user);
+    let removeAuth0 = false;
+    let patchProvider = '';
+    let sourceProvider = getSourceProvider(user);
+    const auth0ConnectedAccount = connectedAccounts.find((x) => x.provider === LOGIN_PROVIDER.AUTH0) as OAuthAccount;
+    if (auth0ConnectedAccount) {
+      if (auth0ConnectedAccount.id.startsWith('google-oauth2|')) {
+        if (!connectedAccounts.some((x) => x.provider === 'google')) {
+          removeAuth0 = true;
+          patchProvider = LOGIN_PROVIDER.GOOGLE;
+          if (sourceProvider === LOGIN_PROVIDER.AUTH0) {
+            sourceProvider = LOGIN_PROVIDER.GOOGLE;
+          }
+        }
+      }
+      if (auth0ConnectedAccount.id.startsWith('appleid|')) {
+        if (!connectedAccounts.some((x) => x.provider === LOGIN_PROVIDER.APPLE)) {
+          removeAuth0 = true;
+          patchProvider = LOGIN_PROVIDER.APPLE;
+          if (sourceProvider === LOGIN_PROVIDER.AUTH0) {
+            sourceProvider = LOGIN_PROVIDER.APPLE;
+          }
+        }
+      }
+      if (auth0ConnectedAccount.id.startsWith('github|')) {
+        if (!connectedAccounts.some((x) => x.provider === LOGIN_PROVIDER.GITHUB)) {
+          removeAuth0 = true;
+          patchProvider = LOGIN_PROVIDER.GITHUB;
+          if (sourceProvider === LOGIN_PROVIDER.AUTH0) {
+            sourceProvider = LOGIN_PROVIDER.GITHUB;
+          }
+        }
+      }
+    }
+
+    const transformedProviders = availableProviders
+      .map((x) => {
+        if (x.provider === LOGIN_PROVIDER.AUTH0 && removeAuth0) {
+          return null;
+        }
+        const findConnectedAccount =
+          removeAuth0 && x.provider === patchProvider
+            ? (connectedAccounts.find((i) => i.provider === LOGIN_PROVIDER.AUTH0) as OAuthAccount)
+            : (connectedAccounts.find((i) => i.provider === x.provider) as OAuthAccount);
+        if (findConnectedAccount) {
+          return {
+            ...x,
+            provider: x.provider,
+            did: findConnectedAccount.did,
+            pk: findConnectedAccount.pk,
+            userInfo: findConnectedAccount.userInfo,
+            _bind: true,
+            _rawProvider: findConnectedAccount.provider,
+            _mainProvider: x.provider === sourceProvider,
+          };
+        }
+        return {
+          ...x,
+          provider: x.provider,
+          _rawProvider: x.provider,
+          _mainProvider: x.provider === sourceProvider,
+        };
+      })
+      .filter(Boolean)
+      .sort((a, b) => {
+        if (a?.order !== undefined && b?.order !== undefined) {
+          return a.order - b.order;
+        }
+        if (a?.order !== undefined) {
+          return -1;
+        }
+        return 1;
+      });
+    return transformedProviders;
+  }, [user?.connectedAccounts, availableProviders]);
+
+  return (
+    <List
+      dense
+      sx={{
+        gap: 1,
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
+      {normalizedAccounts.map((account) => {
+        return <ThirdPartyItem key={account?.provider} item={account as OAuthAccount} />;
+      })}
+    </List>
+  );
+}