From 312b899a208ac2ba183056771c844ea837fe5d16 Mon Sep 17 00:00:00 2001 From: wangsijie Date: Mon, 20 Feb 2023 18:04:43 +0800 Subject: [PATCH] feat(console): new style for create and edit connector (#3126) --- .../components/ConnectorContent.module.scss | 4 -- .../components/ConnectorContent.tsx | 52 ++++++++++++------- .../components/Guide/index.module.scss | 42 +++++++++++++-- .../Connectors/components/Guide/index.tsx | 21 +++++++- .../src/pages/Connectors/utils/index.ts | 11 ++++ .../admin-console/connector-details.ts | 4 +- .../translation/admin-console/connectors.ts | 4 +- .../admin-console/connector-details.ts | 4 +- .../translation/admin-console/connectors.ts | 4 +- .../admin-console/connector-details.ts | 4 +- .../translation/admin-console/connectors.ts | 4 +- .../admin-console/connector-details.ts | 4 +- .../translation/admin-console/connectors.ts | 4 +- .../admin-console/connector-details.ts | 4 +- .../translation/admin-console/connectors.ts | 4 +- .../admin-console/connector-details.ts | 4 +- .../translation/admin-console/connectors.ts | 4 +- .../admin-console/connector-details.ts | 4 +- .../translation/admin-console/connectors.ts | 4 +- .../admin-console/connector-details.ts | 4 +- .../translation/admin-console/connectors.ts | 4 +- 21 files changed, 148 insertions(+), 46 deletions(-) diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.module.scss b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.module.scss index 59c90ff09..cc122d07f 100644 --- a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.module.scss +++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.module.scss @@ -1,9 +1,5 @@ @use '@/scss/underscore' as _; -.configForm { - margin-top: _.unit(6); -} - .senderTest { margin-top: _.unit(6); } diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx index b664cb78a..7d5446273 100644 --- a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx +++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx @@ -1,5 +1,6 @@ import type { ConnectorResponse } from '@logto/schemas'; import { ConnectorType } from '@logto/schemas'; +import { conditional } from '@silverhand/essentials'; import { useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; @@ -43,6 +44,7 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop watch, reset, } = methods; + const isSocialConnector = connectorData.type === ConnectorType.Social; useEffect(() => { const { formItems, metadata, config, syncProfile } = connectorData; @@ -64,13 +66,12 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop const config = formItems ? parseFormConfig(data, formItems) : parseJsonConfig(data.config); const { syncProfile, name, logo, logoDark, target } = data; - const payload = - connectorData.type === ConnectorType.Social - ? { - config, - syncProfile: syncProfile === SyncProfileMode.EachSignIn, - } - : { config }; + const payload = isSocialConnector + ? { + config, + syncProfile: syncProfile === SyncProfileMode.EachSignIn, + } + : { config }; const standardConnectorPayload = { ...payload, metadata: { name: { en: name }, logo, logoDark, target }, @@ -95,26 +96,39 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop onDiscard={reset} onSubmit={onSubmit} > + {isSocialConnector && ( + + + + )} - - - {connectorData.type !== ConnectorType.Social && ( + + + {/* Tell typescript that the connectorType is Email or Sms */} + {connectorData.type !== ConnectorType.Social && ( + - )} - + + )} diff --git a/packages/console/src/pages/Connectors/components/Guide/index.module.scss b/packages/console/src/pages/Connectors/components/Guide/index.module.scss index 29effe646..16f5c46bc 100644 --- a/packages/console/src/pages/Connectors/components/Guide/index.module.scss +++ b/packages/console/src/pages/Connectors/components/Guide/index.module.scss @@ -9,7 +9,7 @@ .header { display: flex; align-items: center; - background-color: var(--color-layer-1); + background: none; height: 64px; padding: 0 _.unit(21) 0 _.unit(2); @@ -40,19 +40,51 @@ .readme { background-color: var(--color-layer-1); + border: 1.5px solid var(--color-focused-variant); border-radius: 16px; - padding: 0 _.unit(6); - margin: _.unit(6) _.unit(3) _.unit(6) _.unit(18); + margin: _.unit(2) _.unit(3) _.unit(6) _.unit(18); + overflow: hidden; + + .readmeTitle { + font: var(--font-title-1); + padding: _.unit(5) _.unit(6) _.unit(4); + border-bottom: 1px solid var(--color-focused-variant); + } + + .readmeContent { + padding: 0 _.unit(6); + overflow-y: auto; + height: 100%; + } } .setup { - margin: _.unit(6) _.unit(18) _.unit(6) _.unit(3); + margin: _.unit(2) _.unit(18) _.unit(6) _.unit(3); .block { background-color: var(--color-layer-1); border-radius: 16px; - padding: _.unit(6); + padding: 0 _.unit(6) _.unit(6); margin-bottom: _.unit(6); + + .blockTitle { + font: var(--font-title-1); + padding: _.unit(5) 0 _.unit(6); + display: flex; + align-items: center; + gap: _.unit(4); + + .number { + width: 28px; + height: 28px; + border-radius: 50%; + background-color: var(--color-focused-variant); + color: var(--color-primary); + font: var(--font-title-2); + text-align: center; + line-height: 28px; + } + } } .footer { diff --git a/packages/console/src/pages/Connectors/components/Guide/index.tsx b/packages/console/src/pages/Connectors/components/Guide/index.tsx index 6f0277167..7de2fc58b 100644 --- a/packages/console/src/pages/Connectors/components/Guide/index.tsx +++ b/packages/console/src/pages/Connectors/components/Guide/index.tsx @@ -21,6 +21,7 @@ import SenderTester from '@/pages/ConnectorDetails/components/SenderTester'; import type { ConnectorFormType } from '../../types'; import { SyncProfileMode } from '../../types'; +import { splitMarkdownByTitle } from '../../utils'; import BasicForm from '../ConnectorForm/BasicForm'; import ConfigForm from '../ConnectorForm/ConfigForm'; import { useConfigParser } from '../ConnectorForm/hooks'; @@ -38,7 +39,8 @@ const Guide = ({ connector, onClose }: Props) => { const { updateConfigs } = useConfigs(); const parseJsonConfig = useConfigParser(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { id: connectorId, type: connectorType, name, readme, isStandard, formItems } = connector; + const { id: connectorId, type: connectorType, name, readme, formItems } = connector; + const { title, content } = splitMarkdownByTitle(readme); const { language } = i18next; const connectorName = conditional(isLanguageTag(language) && name[language]) ?? name.en; const isSocialConnector = @@ -116,12 +118,19 @@ const Guide = ({ connector, onClose }: Props) => { />
- {readme} +
+
README: {title}
+ {content} +
{isSocialConnector && (
+
+
1
+
{t('connectors.guide.general_setting')}
+
{
)}
+
+
{isSocialConnector ? 2 : 1}
+
{t('connectors.guide.parameter_configuaration')}
+
{
{!isSocialConnector && (
+
+
2
+
{t('connectors.guide.general_setting')}
+
{ + const match = /# (.*)/.exec(markdown); + + const title = (match ? match[1] : '') ?? ''; + + return { + title, + content: markdown.replace(title, ''), + }; +}; diff --git a/packages/phrases/src/locales/de/translation/admin-console/connector-details.ts b/packages/phrases/src/locales/de/translation/admin-console/connector-details.ts index 85b6e9f17..cec547453 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/connector-details.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/connector-details.ts @@ -1,10 +1,12 @@ const connector_details = { back_to_connectors: 'Zurück zu Connectoren', check_readme: 'Zur README', - settings: 'Settings', // UNTRANSLATED + settings: 'General settings', // UNTRANSLATED settings_description: 'Connectors play a critical role in Logto. With their help, Logto enables end-users to use passwordless registration or sign-in and the capabilities of signing in with social accounts.', // UNTRANSLATED save_error_empty_config: 'Bitte fülle die Konfiguration aus', + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED send: 'Senden', send_error_invalid_format: 'Ungültige Eingabe', edit_config_label: 'Gib deine JSON-Konfiguration ein', 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 b0a6223ec..449f6576c 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/connectors.ts @@ -30,7 +30,9 @@ const connectors = { }, guide: { subtitle: 'Eine Schritt-für-Schritt-Anleitung zur Konfiguration deines Connectors', - connector_setting: 'Connector setting', // UNTRANSLATED + general_setting: 'General settings', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED name: 'Connector name', // UNTRANSLATED name_tip: 'The name of the connector button will be displayed as "Continue with {{name}}." Be mindful of the length of the naming in case it gets too long.', // UNTRANSLATED diff --git a/packages/phrases/src/locales/en/translation/admin-console/connector-details.ts b/packages/phrases/src/locales/en/translation/admin-console/connector-details.ts index c1b98b4b2..bd2064871 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/connector-details.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/connector-details.ts @@ -1,9 +1,11 @@ const connector_details = { back_to_connectors: 'Back to Connectors', check_readme: 'Check README', - settings: 'Settings', + settings: 'General settings', settings_description: 'Connectors play a critical role in Logto. With their help, Logto enables end-users to use passwordless registration or sign-in and the capabilities of signing in with social accounts.', + parameter_configuaration: 'Parameter configuration', + test_connection: 'Test connection', save_error_empty_config: 'Please enter config', send: 'Send', send_error_invalid_format: 'Invalid input', 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 d3b762441..39ee7feb5 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/connectors.ts @@ -30,7 +30,9 @@ const connectors = { }, guide: { subtitle: 'A step by step guide to configure your connector', - connector_setting: 'Connector setting', + general_setting: 'General settings', + parameter_configuaration: 'Parameter configuration', + test_connection: 'Test connection', name: 'Connector name', name_tip: 'The name of the connector button will be displayed as "Continue with {{name}}." Be mindful of the length of the naming in case it gets too long.', diff --git a/packages/phrases/src/locales/fr/translation/admin-console/connector-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/connector-details.ts index 8db9ccb95..55cfa5617 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/connector-details.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/connector-details.ts @@ -1,9 +1,11 @@ const connector_details = { back_to_connectors: 'Retour à Connecteurs', check_readme: 'Vérifier le README', - settings: 'Settings', // UNTRANSLATED + settings: 'General settings', // UNTRANSLATED settings_description: 'Connectors play a critical role in Logto. With their help, Logto enables end-users to use passwordless registration or sign-in and the capabilities of signing in with social accounts.', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED save_error_empty_config: 'Veuillez entrer la configuration', send: 'Envoyer', send_error_invalid_format: 'Entrée non valide', 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 974f692f8..ab3ec1268 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts @@ -31,7 +31,9 @@ const connectors = { }, guide: { subtitle: 'Un guide étape par étape pour configurer votre connecteur', - connector_setting: 'Connector setting', // UNTRANSLATED + general_setting: 'General settings', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED name: 'Connector name', // UNTRANSLATED name_tip: 'The name of the connector button will be displayed as "Continue with {{name}}." Be mindful of the length of the naming in case it gets too long.', // UNTRANSLATED diff --git a/packages/phrases/src/locales/ko/translation/admin-console/connector-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/connector-details.ts index cabd81c9f..5e202e8d6 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/connector-details.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/connector-details.ts @@ -1,9 +1,11 @@ const connector_details = { back_to_connectors: '연동으로 돌아가기', check_readme: 'README 확인', - settings: '설정', + settings: 'General settings', // UNTRANSLATED settings_description: 'Logto에서 연동은 중요한 역할을 해요. 연동 시스템을 통하여, 사용자들에게 비밀번호 없이 회원 가입을 하고 로그인을 할 수 있게 하거나, 소셜 계정을 통하여 로그인을 할 수 있게 도와줘요.', + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED save_error_empty_config: '설정을 입력해 주세요.', send: '보내기', send_error_invalid_format: '유효하지 않은 입력', 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 c7bf6e615..906fe569c 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts @@ -31,7 +31,9 @@ const connectors = { }, guide: { subtitle: '단계별 가이드를 따라, 연동해 주세요.', - connector_setting: '연동 설정', + general_setting: 'General settings', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED name: '연동 이름', name_tip: '다음과 같이 연동 이름이 출력돼요. "{{name}}으로 계속하기".', logo: '연동 로고 URL', diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/connector-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/connector-details.ts index 67b0f408d..09f8bb5f7 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/connector-details.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/connector-details.ts @@ -1,9 +1,11 @@ const connector_details = { back_to_connectors: 'Voltar para Conectores', check_readme: 'Visualize o README', - settings: 'Configurações', + settings: 'General settings', // UNTRANSLATED settings_description: 'Os conectores desempenham um papel crítico no Logto. Com a ajuda deles, a Logto permite que os usuários finais usem o registro ou login sem senha e os recursos de login com contas sociais.', + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED save_error_empty_config: 'Por favor insira a configuração', send: 'Enviar', send_error_invalid_format: 'Campo inválido', 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 6213bd310..8ffe33313 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 @@ -31,7 +31,9 @@ const connectors = { }, guide: { subtitle: 'Um guia passo a passo para configurar seu conector', - connector_setting: 'Configuração do conector', + general_setting: 'General settings', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED name: 'Nome do conector', name_tip: 'O nome do botão do conector será exibido como "Continue com {{Connector Name}}".', logo: 'URL do logotipo do conector', diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/connector-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/connector-details.ts index 9023ba2c1..eb553b4e2 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/connector-details.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/connector-details.ts @@ -1,9 +1,11 @@ const connector_details = { back_to_connectors: 'Voltar para Conectores', check_readme: 'Verifique o README', - settings: 'Settings', // UNTRANSLATED + settings: 'General settings', // UNTRANSLATED settings_description: 'Connectors play a critical role in Logto. With their help, Logto enables end-users to use passwordless registration or sign-in and the capabilities of signing in with social accounts.', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED save_error_empty_config: 'Por favor, insira a configuração', send: 'Enviar', send_error_invalid_format: 'Entrada inválida', 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 d159291f4..96318b5c4 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 @@ -30,7 +30,9 @@ const connectors = { }, guide: { subtitle: 'Um guia passo a passo para configurar o conector', - connector_setting: 'Connector setting', // UNTRANSLATED + general_setting: 'General settings', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED name: 'Connector name', // UNTRANSLATED name_tip: 'The name of the connector button will be displayed as "Continue with {{name}}." Be mindful of the length of the naming in case it gets too long.', // UNTRANSLATED diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/connector-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/connector-details.ts index 23d0e2c5a..14aca8d18 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/connector-details.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/connector-details.ts @@ -1,9 +1,11 @@ const connector_details = { back_to_connectors: 'Connectorlara dön', check_readme: 'READMEye göz at', - settings: 'Settings', // UNTRANSLATED + settings: 'General settings', // UNTRANSLATED settings_description: 'Connectors play a critical role in Logto. With their help, Logto enables end-users to use passwordless registration or sign-in and the capabilities of signing in with social accounts.', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED save_error_empty_config: 'Lütfen yapılandırmayı girin', send: 'Gönder', send_error_invalid_format: 'Geçersiz input', 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 3cb1b2014..d485da26f 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 @@ -31,7 +31,9 @@ const connectors = { }, guide: { subtitle: 'Connectorı yapılandırmak için adım adım kılavuz', - connector_setting: 'Connector setting', // UNTRANSLATED + general_setting: 'General settings', // UNTRANSLATED + parameter_configuaration: 'Parameter configuration', // UNTRANSLATED + test_connection: 'Test connection', // UNTRANSLATED name: 'Connector name', // UNTRANSLATED name_tip: 'The name of the connector button will be displayed as "Continue with {{name}}." Be mindful of the length of the naming in case it gets too long.', // UNTRANSLATED diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/connector-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/connector-details.ts index b15440541..b06858b5f 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/connector-details.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/connector-details.ts @@ -1,9 +1,11 @@ const connector_details = { back_to_connectors: '返回连接器', check_readme: '查看 README', - settings: '设置', + settings: '通用设置', settings_description: 'Connectors play a critical role in Logto. With their help, Logto enables end-users to use passwordless registration or sign-in and the capabilities of signing in with social accounts.', // UNTRANSLATED + parameter_configuaration: '参数配置', + test_connection: '连接测试', save_error_empty_config: '请输入配置内容', send: '发送', send_error_invalid_format: '无效输入', 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 2fd7d8d99..ed3b0ecec 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 @@ -29,7 +29,9 @@ const connectors = { }, guide: { subtitle: '参考以下步骤完成你的连接器设置', - connector_setting: '设置连接器', + general_setting: '通用设置', + parameter_configuaration: '参数配置', + test_connection: '连接测试', name: '连接器名称', name_tip: '按钮上将展示「通过 {{name}} 继续」。名字不宜过长而导致信息无法展示完整。', logo: 'Logo 图片链接',