feat(console): add callback uri field (#3231)

2025-03-31 22:51:25 -05:00 · 2023-03-01 16:53:54 +08:00 · 2023-03-01 16:53:54 +08:00 · 92ffc6cfdd
commit 92ffc6cfdd
parent f0772c6549
12 changed files with 57 additions and 3 deletions
--- 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')
          )}
        >
-          <ConfigForm formItems={connectorData.formItems} />
+          <ConfigForm formItems={connectorData.formItems} connectorId={connectorData.id} />
        </FormCard>
        {/* Tell typescript that the connectorType is Email or Sms */}
        {connectorData.type !== ConnectorType.Social && (
--- a/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.module.scss
+++ 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);
+}
--- 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<ConnectorFormType>();
+  const { userEndpoint } = useContext(AppEndpointsContext);

  return (
    <div className={className}>
+      <FormField title="connectors.guide.callback_uri">
+        <CopyToClipboard
+          className={styles.copyToClipboard}
+          variant="border"
+          value={new URL(`/callback/${connectorId}`, userEndpoint).toString()}
+        />
+        <div className={styles.description}>{t('connectors.guide.callback_uri_description')}</div>
+      </FormField>
      {formItems ? (
        <ConfigFormItems formItems={formItems} />
      ) : (
--- 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<string>(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) => {
                  <div>{t('connectors.guide.parameter_configuration')}</div>
                </div>
                <ConfigForm
+                  connectorId={callbackConnectorId}
                  configTemplate={connector.configTemplate}
                  formItems={connector.formItems}
                />
--- 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',
--- 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',
--- 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',
--- 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',
--- 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',
--- 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',
--- 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',
--- 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: '通用',