@blocklet/ui-react 2.9.67 → 2.9.68

package/es/@types/index.d.ts

@@ -1,19 +1,55 @@
 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 = {
     value: string;
@@ -25,7 +61,7 @@ export type UserCenterTab = {
 export type Session = {
     loading: boolean;
     initialized: boolean;
-    user: User;
+    user?: User;
     login: any;
     logout: any;
     switch: any;
@@ -33,6 +69,7 @@ export type Session = {
     switchProfile: any;
     switchPassport: any;
     refresh: Function;
+    useOAuth: Function;
 };
 export type WebhookType = 'slack' | 'api';
 export type WebhookItemData = {

package/es/@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/es/Dashboard/index.js

@@ -58,7 +58,6 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       if (invalidPathFallback) {
         invalidPathFallback();
       } else {
-        window.location.href = flattened[0]?.url || publicPath;
       }
     }
   }, [invalidPathFallback, flattened, matchedIndex]);

package/es/UserCenter/components/settings.js

@@ -10,6 +10,7 @@ import Notification from "./notification.js";
 import Privacy from "./privacy.js";
 import DidSpace from "./storage/index.js";
 import { UserSessions } from "../../UserSessions/index.js";
+import ThirdPartyLogin from "./third-party-login/index.js";
 export default function Settings({
   user,
   settings,
@@ -37,6 +38,11 @@ export default function Settings({
         value: "notification",
         content: /* @__PURE__ */ jsx(Notification, { user })
       },
+      {
+        label: t("thirdPartyLogin.title"),
+        value: "thirdPartyLogin",
+        content: /* @__PURE__ */ jsx(ThirdPartyLogin, { user })
+      },
       {
         label: t("privacyManagement"),
         value: "privacy",
@@ -59,7 +65,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/es/UserCenter/components/third-party-login/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { User } from '../../../@types';
+export default function ThirdPartyLogin({ user }: {
+    user: User;
+}): import("react").JSX.Element;

package/es/UserCenter/components/third-party-login/index.js

@@ -0,0 +1,111 @@
+import { jsx } from "react/jsx-runtime";
+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 ThirdPartyItem from "./third-party-item.js";
+export default function ThirdPartyLogin({ user }) {
+  const { session } = useContext(SessionContext);
+  const [oauthConfigs, setOauthConfigs] = useState({});
+  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]);
+  const normalizedAccounts = useCreation(() => {
+    const connectedAccounts = getConnectedAccounts(user);
+    let removeAuth0 = false;
+    let patchProvider = "";
+    let sourceProvider = getSourceProvider(user);
+    const auth0ConnectedAccount = connectedAccounts.find((x) => x.provider === LOGIN_PROVIDER.AUTH0);
+    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) : connectedAccounts.find((i) => i.provider === x.provider);
+      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 !== void 0 && b?.order !== void 0) {
+        return a.order - b.order;
+      }
+      if (a?.order !== void 0) {
+        return -1;
+      }
+      return 1;
+    });
+    return transformedProviders;
+  }, [user?.connectedAccounts, availableProviders]);
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      dense: true,
+      sx: {
+        gap: 1,
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: normalizedAccounts.map((account) => {
+        return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account?.provider);
+      })
+    }
+  );
+}

package/es/UserCenter/components/third-party-login/third-party-item.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { OAuthAccount } from '../../../@types';
+export default function ThirdPartyItem({ item, }: {
+    item: {
+        provider: string;
+        did: string;
+        pk: string;
+        userInfo?: OAuthAccount['userInfo'];
+        _bind?: boolean;
+        _rawProvider?: string;
+        _mainProvider?: boolean;
+    };
+}): import("react").JSX.Element;

package/es/UserCenter/components/third-party-login/third-party-item.js

@@ -0,0 +1,227 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 { 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.js";
+export default function ThirdPartyItem({
+  item
+}) {
+  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(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] || "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) {
+              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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      ListItem,
+      {
+        disablePadding: true,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            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
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon, fontSize: 16 }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      flex: 1,
+                      gap: 1
+                    },
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5
+                    },
+                    children: [
+                      item.userInfo?.email || item.did,
+                      item.userInfo?.email ? /* @__PURE__ */ jsx(
+                        Tooltip,
+                        {
+                          title: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                            /* @__PURE__ */ jsx(Avatar, { size: 36, variant: "circle", shape: "circle", src: item.userInfo?.picture, did: item.did }),
+                            /* @__PURE__ */ jsxs(Box, { children: [
+                              /* @__PURE__ */ jsx(
+                                Typography,
+                                {
+                                  sx: {
+                                    whiteSpace: "normal",
+                                    wordBreak: "break-all",
+                                    fontSize: "0.9rem"
+                                  },
+                                  children: item.userInfo?.name
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                Typography,
+                                {
+                                  sx: {
+                                    whiteSpace: "normal",
+                                    wordBreak: "break-all",
+                                    fontSize: "0.9rem"
+                                  },
+                                  children: item.userInfo?.email
+                                }
+                              )
+                            ] })
+                          ] }) }),
+                          children: /* @__PURE__ */ jsx(
+                            Icon,
+                            {
+                              icon: InfoOutlineRoundedIcon,
+                              color: colors.textSubtitle,
+                              fontSize: 16,
+                              style: { cursor: "pointer" }
+                            }
+                          )
+                        }
+                      ) : null
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { title: item._mainProvider ? t("thirdPartyLogin.mainProviderCantRemove") : "", children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            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 : /* @__PURE__ */ jsx(Icon, { icon: LinkRoundedIcon }),
+              onClick: toggleBind,
+              disabled: item._mainProvider,
+              loading: currentState.loading,
+              children: item?._bind ? t("thirdPartyLogin.disconnect") : t("thirdPartyLogin.connect")
+            }
+          ) }) })
+        ]
+      }
+    ),
+    confirmHolder
+  ] });
+}

package/es/UserCenter/components/user-center.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { Box, CircularProgress, Typography } 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";
 import Tabs from "@arcblock/ux/lib/Tabs";
@@ -17,8 +17,7 @@ import { getQuery, withQuery } from "ufo";
 import Footer from "../../Footer/index.js";
 import Header from "../../Header/index.js";
 import { translations } from "../libs/locales.js";
-import UserInfo from "./user-info.js";
-import UserBasicInfo from "./user-basic-info.js";
+import { UserInfo, UserBasicInfo } from "./user-info/index.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
 import Passport from "./passport.js";
 import Settings from "./settings.js";
@@ -73,7 +72,7 @@ export default function UserCenter({
       }
     },
     {
-      refreshDeps: [currentDid, isMyself, session?.initialized]
+      refreshDeps: [currentDid, isMyself, session?.initialized, session?.user]
     }
   );
   const privacyState = useRequest(
@@ -143,27 +142,33 @@ export default function UserCenter({
       });
     }
   });
+  const settingContent = useCreation(() => {
+    return /* @__PURE__ */ jsx(
+      Settings,
+      {
+        user: userState.data,
+        settings: { userCenterTabs },
+        onSave: async () => {
+          await privacyState.runAsync();
+          return privacyState.data;
+        }
+      }
+    );
+  }, [userState.data]);
   const openSettings = useMemoizedFn(() => {
     confirmApi.open({
       title: t("settings"),
-      content: /* @__PURE__ */ jsx(
-        Settings,
-        {
-          user: userState.data,
-          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/es/UserCenter/components/user-info/index.d.ts

@@ -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/es/UserCenter/components/user-info/index.js

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

package/es/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/es/UserCenter/components/{user-basic-info.js → user-info/user-basic-info.js}

@@ -11,7 +11,7 @@ import { useCreation, useMemoizedFn } from "ahooks";
 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.js";
+import { translations } from "../../libs/locales.js";
 export default function UserBasicInfo({
   user,
   isMyself = true,

package/es/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/es/UserCenter/components/{user-info.js → user-info/user-info.js}

@@ -10,7 +10,8 @@ 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 { translations } from "../libs/locales.js";
+import { LOGIN_PROVIDER_NAME } from "@arcblock/ux/lib/Util/constant";
+import { translations } from "../../libs/locales.js";
 import UserInfoItem from "./user-info-item.js";
 export default function UserInfo({
   user,
@@ -21,11 +22,7 @@ export default function UserInfo({
     return translate(translations, key, locale, "en", data);
   });
   const readableProvider = useCreation(() => {
-    const nameMap = {
-      wallet: "DID Wallet",
-      auth0: "Auth0"
-    };
-    return user?.sourceProvider && nameMap[user.sourceProvider] || t("unknown");
+    return user?.sourceProvider && LOGIN_PROVIDER_NAME[user.sourceProvider] || t("unknown");
   }, [user?.sourceProvider]);
   const userInfoListData = [];
   userInfoListData.push({

package/es/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;
+        };
     };
 };