From 6e2a84ef61fbbfb9409945bd64b8a8eb9c80a252 Mon Sep 17 00:00:00 2001 From: simeng-li Date: Mon, 20 Mar 2023 18:52:46 +0800 Subject: [PATCH] fix(console): fix linked social account not shown bug (#3550) --- .../console/src/components/UserInfoCard/index.tsx | 6 ++++++ .../Profile/components/LinkAccountSection/index.tsx | 11 ++++++----- packages/console/src/types/profile.ts | 9 --------- .../locales/de/translation/admin-console/profile.ts | 1 + .../locales/en/translation/admin-console/profile.ts | 1 + .../locales/fr/translation/admin-console/profile.ts | 1 + .../locales/ko/translation/admin-console/profile.ts | 1 + .../pt-br/translation/admin-console/profile.ts | 1 + .../pt-pt/translation/admin-console/profile.ts | 1 + .../tr-tr/translation/admin-console/profile.ts | 1 + .../zh-cn/translation/admin-console/profile.ts | 1 + 11 files changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/console/src/components/UserInfoCard/index.tsx b/packages/console/src/components/UserInfoCard/index.tsx index 521e3f17e..f6aee6d2e 100644 --- a/packages/console/src/components/UserInfoCard/index.tsx +++ b/packages/console/src/components/UserInfoCard/index.tsx @@ -1,6 +1,7 @@ import type { IdTokenClaims } from '@logto/react'; import type { User } from '@logto/schemas'; import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; import UserAvatar from '../UserAvatar'; import * as styles from './index.module.scss'; @@ -15,6 +16,8 @@ type Props = { }; const UserInfoCard = ({ className, user, avatarSize = 'medium' }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { name, username, avatar, picture, primaryEmail, email } = user ?? {}; const avatarToDisplay = avatar ?? picture; const nameToDisplay = name ?? username; @@ -29,6 +32,9 @@ const UserInfoCard = ({ className, user, avatarSize = 'medium' }: Props) => {
{nameToDisplay}
{emailToDisplay &&
{emailToDisplay}
} + {!nameToDisplay && !emailToDisplay && ( +
({t('profile.link_account.anonymous')})
+ )}
); diff --git a/packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx b/packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx index d68a87a59..5bf40240c 100644 --- a/packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx +++ b/packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx @@ -1,3 +1,5 @@ +import type { SocialUserInfo } from '@logto/connector-kit'; +import { socialUserInfoGuard } from '@logto/connector-kit'; import { buildIdGenerator } from '@logto/core-kit'; import type { ConnectorResponse, UserInfo } from '@logto/schemas'; import { Theme } from '@logto/schemas'; @@ -6,7 +8,6 @@ import { appendPath, conditional } from '@silverhand/essentials'; import { useCallback, useMemo } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; -import { is } from 'superstruct'; import MailIcon from '@/assets/images/mail.svg'; import FormCard from '@/components/FormCard'; @@ -17,8 +18,6 @@ import { adminTenantEndpoint, getBasename, meApi, profileSocialLinkingKeyPrefix import { useStaticApi } from '@/hooks/use-api'; import { useConfirmModal } from '@/hooks/use-confirm-modal'; import useTheme from '@/hooks/use-theme'; -import type { SocialUserInfo } from '@/types/profile'; -import { socialUserInfoGuard } from '@/types/profile'; import { popupWindow } from '../../utils'; import type { Row } from '../CardContent'; @@ -63,13 +62,15 @@ const LinkAccountSection = ({ user, connectors, onUpdate }: Props) => { return connectors.map(({ id, name, logo, logoDark, target }) => { const logoSrc = theme === Theme.Dark && logoDark ? logoDark : logo; const relatedUserDetails = user.identities?.[target]?.details; - const hasLinked = is(relatedUserDetails, socialUserInfoGuard); + + const socialUserInfo = socialUserInfoGuard.safeParse(relatedUserDetails); + const hasLinked = socialUserInfo.success; return { key: target, icon: , label: , - value: conditional(hasLinked && relatedUserDetails), + value: conditional(hasLinked && socialUserInfo.data), renderer: (user) => (user ? : ), action: hasLinked ? { diff --git a/packages/console/src/types/profile.ts b/packages/console/src/types/profile.ts index f7a8fa3a1..bc054f2e3 100644 --- a/packages/console/src/types/profile.ts +++ b/packages/console/src/types/profile.ts @@ -6,12 +6,3 @@ export const locationStateGuard = s.object({ }); export type LocationState = s.Infer; - -export const socialUserInfoGuard = s.object({ - id: s.string(), - name: s.string(), - email: s.string(), - avatar: s.string(), -}); - -export type SocialUserInfo = s.Infer; diff --git a/packages/phrases/src/locales/de/translation/admin-console/profile.ts b/packages/phrases/src/locales/de/translation/admin-console/profile.ts index f487682a4..09e18a631 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/profile.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/profile.ts @@ -19,6 +19,7 @@ const profile = { email_required: 'Email is required', // UNTRANSLATED invalid_email: 'Invalid email address', // UNTRANSLATED identical_email_address: 'The input email address is identical to the current one', // UNTRANSLATED + anonymous: 'Anonymous', // UNTRANSLATED }, password: { title: 'PASSWORD & SECURITY', // UNTRANSLATED diff --git a/packages/phrases/src/locales/en/translation/admin-console/profile.ts b/packages/phrases/src/locales/en/translation/admin-console/profile.ts index e647b5c35..16192396d 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/profile.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/profile.ts @@ -19,6 +19,7 @@ const profile = { email_required: 'Email is required', invalid_email: 'Invalid email address', identical_email_address: 'The input email address is identical to the current one', + anonymous: 'Anonymous', }, password: { title: 'PASSWORD & SECURITY', diff --git a/packages/phrases/src/locales/fr/translation/admin-console/profile.ts b/packages/phrases/src/locales/fr/translation/admin-console/profile.ts index f487682a4..09e18a631 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/profile.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/profile.ts @@ -19,6 +19,7 @@ const profile = { email_required: 'Email is required', // UNTRANSLATED invalid_email: 'Invalid email address', // UNTRANSLATED identical_email_address: 'The input email address is identical to the current one', // UNTRANSLATED + anonymous: 'Anonymous', // UNTRANSLATED }, password: { title: 'PASSWORD & SECURITY', // UNTRANSLATED diff --git a/packages/phrases/src/locales/ko/translation/admin-console/profile.ts b/packages/phrases/src/locales/ko/translation/admin-console/profile.ts index f487682a4..09e18a631 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/profile.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/profile.ts @@ -19,6 +19,7 @@ const profile = { email_required: 'Email is required', // UNTRANSLATED invalid_email: 'Invalid email address', // UNTRANSLATED identical_email_address: 'The input email address is identical to the current one', // UNTRANSLATED + anonymous: 'Anonymous', // UNTRANSLATED }, password: { title: 'PASSWORD & SECURITY', // UNTRANSLATED diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/profile.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/profile.ts index f487682a4..09e18a631 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/profile.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/profile.ts @@ -19,6 +19,7 @@ const profile = { email_required: 'Email is required', // UNTRANSLATED invalid_email: 'Invalid email address', // UNTRANSLATED identical_email_address: 'The input email address is identical to the current one', // UNTRANSLATED + anonymous: 'Anonymous', // UNTRANSLATED }, password: { title: 'PASSWORD & SECURITY', // UNTRANSLATED diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/profile.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/profile.ts index f487682a4..09e18a631 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/profile.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/profile.ts @@ -19,6 +19,7 @@ const profile = { email_required: 'Email is required', // UNTRANSLATED invalid_email: 'Invalid email address', // UNTRANSLATED identical_email_address: 'The input email address is identical to the current one', // UNTRANSLATED + anonymous: 'Anonymous', // UNTRANSLATED }, password: { title: 'PASSWORD & SECURITY', // UNTRANSLATED diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/profile.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/profile.ts index f487682a4..09e18a631 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/profile.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/profile.ts @@ -19,6 +19,7 @@ const profile = { email_required: 'Email is required', // UNTRANSLATED invalid_email: 'Invalid email address', // UNTRANSLATED identical_email_address: 'The input email address is identical to the current one', // UNTRANSLATED + anonymous: 'Anonymous', // UNTRANSLATED }, password: { title: 'PASSWORD & SECURITY', // UNTRANSLATED diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/profile.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/profile.ts index 1f1483504..7836f517e 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/profile.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/profile.ts @@ -18,6 +18,7 @@ const profile = { email_required: '邮箱不能为空', invalid_email: '无效的邮箱地址', identical_email_address: '输入的邮箱地址与当前邮箱地址相同', + anonymous: '匿名', }, password: { title: '密码与安全',