From 92ffc6cfdd3a14dbeef5a2ea30808af5701b3ec8 Mon Sep 17 00:00:00 2001 From: wangsijie Date: Wed, 1 Mar 2023 16:53:54 +0800 Subject: [PATCH] feat(console): add callback uri field (#3231) --- .../components/ConnectorContent.tsx | 2 +- .../ConnectorForm/ConfigForm.module.scss | 11 +++++++++++ .../components/ConnectorForm/ConfigForm.tsx | 16 +++++++++++++++- .../pages/Connectors/components/Guide/index.tsx | 7 ++++++- .../de/translation/admin-console/connectors.ts | 3 +++ .../en/translation/admin-console/connectors.ts | 3 +++ .../fr/translation/admin-console/connectors.ts | 3 +++ .../ko/translation/admin-console/connectors.ts | 3 +++ .../translation/admin-console/connectors.ts | 3 +++ .../translation/admin-console/connectors.ts | 3 +++ .../translation/admin-console/connectors.ts | 3 +++ .../translation/admin-console/connectors.ts | 3 +++ 12 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.module.scss diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx index 030cad3bc..c8cf7c56e 100644 --- a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx +++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx @@ -116,7 +116,7 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop !isSocialConnector && getDocumentationUrl('/docs/references/connectors') )} > - + {/* Tell typescript that the connectorType is Email or Sms */} {connectorData.type !== ConnectorType.Social && ( diff --git a/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.module.scss b/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.module.scss new file mode 100644 index 000000000..ccd87402f --- /dev/null +++ b/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.module.scss @@ -0,0 +1,11 @@ +@use '@/scss/underscore' as _; + +.copyToClipboard { + display: block; +} + +.description { + color: var(--color-text-secondary); + font: var(--font-body-2); + margin-top: _.unit(0.5); +} diff --git a/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx b/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx index 2cb0d431b..902ef0e3a 100644 --- a/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx +++ b/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx @@ -1,30 +1,44 @@ import type { ConnectorConfigFormItem } from '@logto/connector-kit'; import type { ConnectorFactoryResponse } from '@logto/schemas'; +import { useContext } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import CodeEditor from '@/components/CodeEditor'; +import CopyToClipboard from '@/components/CopyToClipboard'; import FormField from '@/components/FormField'; +import { AppEndpointsContext } from '@/containers/AppEndpointsProvider'; import { jsonValidator } from '@/utils/validator'; import type { ConnectorFormType } from '../../types'; import ConfigFormItems from '../ConfigForm'; +import * as styles from './ConfigForm.module.scss'; type Props = { configTemplate?: ConnectorFactoryResponse['configTemplate']; formItems?: ConnectorConfigFormItem[]; className?: string; + connectorId: string; }; -const ConfigForm = ({ configTemplate, formItems, className }: Props) => { +const ConfigForm = ({ configTemplate, formItems, className, connectorId }: Props) => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { control, formState: { errors }, } = useFormContext(); + const { userEndpoint } = useContext(AppEndpointsContext); return (
+ + +
{t('connectors.guide.callback_uri_description')}
+ {formItems ? ( ) : ( diff --git a/packages/console/src/pages/Connectors/components/Guide/index.tsx b/packages/console/src/pages/Connectors/components/Guide/index.tsx index 2d32cbd62..b5ad19fdf 100644 --- a/packages/console/src/pages/Connectors/components/Guide/index.tsx +++ b/packages/console/src/pages/Connectors/components/Guide/index.tsx @@ -1,8 +1,10 @@ +import { generateStandardId } from '@logto/core-kit'; import { isLanguageTag } from '@logto/language-kit'; import type { ConnectorFactoryResponse, ConnectorResponse } from '@logto/schemas'; import { ConnectorType } from '@logto/schemas'; import { conditional } from '@silverhand/essentials'; import i18next from 'i18next'; +import { useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; @@ -36,6 +38,7 @@ type Props = { const Guide = ({ connector, onClose }: Props) => { const api = useApi(); const navigate = useNavigate(); + const [callbackConnectorId, setCallbackConnectorId] = useState(generateStandardId()); const { updateConfigs } = useConfigs(); const parseJsonConfig = useConfigParser(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); @@ -63,13 +66,14 @@ const Guide = ({ connector, onClose }: Props) => { return; } - const { formItems, isStandard, id: connectorId } = connector; + const { formItems, isStandard, id: connectorId, type } = connector; const config = formItems ? parseFormConfig(data, formItems) : parseJsonConfig(data.config); const { syncProfile, name, logo, logoDark, target } = data; const basePayload = { config, connectorId, + id: conditional(type === ConnectorType.Social && callbackConnectorId), metadata: conditional( isStandard && { logo, @@ -143,6 +147,7 @@ const Guide = ({ connector, onClose }: Props) => {
{t('connectors.guide.parameter_configuration')}
diff --git a/packages/phrases/src/locales/de/translation/admin-console/connectors.ts b/packages/phrases/src/locales/de/translation/admin-console/connectors.ts index dc79a9362..614ef7034 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/connectors.ts @@ -59,6 +59,9 @@ const connectors = { sync_profile_each_sign_in: 'Always do a sync at each sign-in', // UNTRANSLATED sync_profile_tip: "Sync the basic profile from the social provider, such as users' names and their avatars.", // UNTRANSLATED + callback_uri: 'Callback URI', // UNTRANSLATED + callback_uri_description: + "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.", // UNTRANSLATED }, platform: { universal: 'Universal', diff --git a/packages/phrases/src/locales/en/translation/admin-console/connectors.ts b/packages/phrases/src/locales/en/translation/admin-console/connectors.ts index 0125f1839..be496705c 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/connectors.ts @@ -59,6 +59,9 @@ const connectors = { sync_profile_each_sign_in: 'Always do a sync at each sign-in', sync_profile_tip: "Sync the basic profile from the social provider, such as users' names and their avatars.", + callback_uri: 'Callback URI', + callback_uri_description: + "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.", }, platform: { universal: 'Universal', diff --git a/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts b/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts index b85069883..3c8d03970 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts @@ -60,6 +60,9 @@ const connectors = { sync_profile_each_sign_in: 'Always do a sync at each sign-in', // UNTRANSLATED sync_profile_tip: "Sync the basic profile from the social provider, such as users' names and their avatars.", // UNTRANSLATED + callback_uri: 'Callback URI', // UNTRANSLATED + callback_uri_description: + "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.", // UNTRANSLATED }, platform: { universal: 'Universel', diff --git a/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts b/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts index ab5ac0ab6..5f2aeea29 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts @@ -57,6 +57,9 @@ const connectors = { sync_profile_only_at_sign_up: '회원가입할 때 동기화', sync_profile_each_sign_in: '로그인할 때마다 동기화', sync_profile_tip: '이름과 아바타와 같은 기본적인 사용자 프로필을 동기화해요.', + callback_uri: 'Callback URI', // UNTRANSLATED + callback_uri_description: + "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.", // UNTRANSLATED }, platform: { universal: 'Universal', diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts index ef18ef46d..2dd1f1e12 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts @@ -58,6 +58,9 @@ const connectors = { sync_profile_each_sign_in: 'Sempre sincronizar a cada login', sync_profile_tip: "Sync the basic profile from the social provider, such as users' names and their avatars.", // UNTRANSLATED + callback_uri: 'Callback URI', // UNTRANSLATED + callback_uri_description: + "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.", // UNTRANSLATED }, platform: { universal: 'Universal', diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts index e741a3df9..6c5561a5e 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts @@ -59,6 +59,9 @@ const connectors = { sync_profile_each_sign_in: 'Always do a sync at each sign-in', // UNTRANSLATED sync_profile_tip: "Sync the basic profile from the social provider, such as users' names and their avatars.", // UNTRANSLATED + callback_uri: 'Callback URI', // UNTRANSLATED + callback_uri_description: + "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.", // UNTRANSLATED }, platform: { universal: 'Universal', diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts index a78a79657..cb4891570 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts @@ -60,6 +60,9 @@ const connectors = { sync_profile_each_sign_in: 'Always do a sync at each sign-in', // UNTRANSLATED sync_profile_tip: "Sync the basic profile from the social provider, such as users' names and their avatars.", // UNTRANSLATED + callback_uri: 'Callback URI', // UNTRANSLATED + callback_uri_description: + "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.", // UNTRANSLATED }, platform: { universal: 'Evrensel', diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts index e05600b5b..081720d06 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts @@ -54,6 +54,9 @@ const connectors = { sync_profile_only_at_sign_up: '首次注册时同步', sync_profile_each_sign_in: '每次登录时同步', sync_profile_tip: '同步用户的用户名、头像等个人资料信息', + callback_uri: 'Callback URI', // UNTRANSLATED + callback_uri_description: + "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.", // UNTRANSLATED }, platform: { universal: '通用',