From 230fcffaecb511e084325c32abc57004b97a59f4 Mon Sep 17 00:00:00 2001 From: Gao Sun Date: Sat, 18 Mar 2023 21:22:42 +0800 Subject: [PATCH] refactor: improve phone number testing (#3493) --- .../components/SenderTester/index.tsx | 19 +++++++++++-------- .../admin-console/connector-details.ts | 4 ++-- .../admin-console/connector-details.ts | 4 ++-- .../admin-console/connector-details.ts | 4 ++-- .../admin-console/connector-details.ts | 4 ++-- .../admin-console/connector-details.ts | 4 ++-- .../admin-console/connector-details.ts | 4 ++-- .../admin-console/connector-details.ts | 4 ++-- .../admin-console/connector-details.ts | 6 +++--- packages/toolkit/core-kit/src/regex.ts | 1 + 10 files changed, 29 insertions(+), 25 deletions(-) diff --git a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx index 66b46db8c..41265878e 100644 --- a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx +++ b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx @@ -1,7 +1,6 @@ -import { phoneRegEx, emailRegEx } from '@logto/core-kit'; +import { emailRegEx, phoneInputRegEx } from '@logto/core-kit'; import { ConnectorType } from '@logto/schemas'; import { conditional } from '@silverhand/essentials'; -import classNames from 'classnames'; import { useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; @@ -67,7 +66,12 @@ const SenderTester = ({ connectorId, connectorType, config, className }: Props) return; } - const data = { config: result.data, ...(isSms ? { phone: sendTo } : { email: sendTo }) }; + const data = { + config: result.data, + ...(isSms + ? { phone: sendTo.replace(/[ ()-]/g, '').replace(/\+/g, '00') } + : { email: sendTo }), + }; try { await api.post(`api/connectors/${connectorId}/test`, { json: data }).json(); @@ -87,7 +91,7 @@ const SenderTester = ({ connectorId, connectorType, config, className }: Props) className={styles.textField} > -
- {inputError?.message ?? t('connector_details.test_sender_description')} -
+
{t('connector_details.test_sender_description')}
+
{inputError?.message}
); }; 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 fd12a35d1..f3fca02e4 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 @@ -12,8 +12,8 @@ const connector_details = { edit_config_label: 'Gib deine JSON-Konfiguration ein', test_email_sender: 'Teste den E-Mail Connector', test_sms_sender: 'Teste den SMS Connector', - test_email_placeholder: 'Gib eine Test-E-Mail ein', - test_sms_placeholder: 'Gib eine Test-Telefonnummer ein', + test_email_placeholder: 'john.doe@example.com', + test_sms_placeholder: '+49 151 12345678', test_message_sent: 'Testnachricht wurde gesendet', test_sender_description: 'Logto verwendet die "Generic"-Vorlage zum Testen. Du erhältst eine Nachricht, wenn dein Connector richtig konfiguriert ist.', 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 6d15fdce9..78ac2100b 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 @@ -12,8 +12,8 @@ const connector_details = { edit_config_label: 'Enter your JSON here', test_email_sender: 'Test your email connector', test_sms_sender: 'Test your SMS connector', - test_email_placeholder: 'Enter a test email address', - test_sms_placeholder: 'Enter a test phone number', + test_email_placeholder: 'john.doe@example.com', + test_sms_placeholder: '+1 555-123-4567', test_message_sent: 'Test message sent', test_sender_description: 'Logto uses the "Generic" template for testing. You will receive a message if your connector is rightly configured.', 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 521559516..086cfd2a2 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 @@ -12,8 +12,8 @@ const connector_details = { edit_config_label: 'Entrez votre json ici', test_email_sender: 'Testez votre connecteur Email', test_sms_sender: 'Testez votre connecteur SMS', - test_email_placeholder: 'Entrez une adresse email de test', - test_sms_placeholder: 'Entrez un numéro de téléphone de test', + test_email_placeholder: 'john.doe@example.com', + test_sms_placeholder: '+33 6 12 34 56 78', test_message_sent: 'Message de test envoyé', test_sender_description: 'Logto utilise le modèle "Generic" pour les tests. Tu recevras un message si ton connecteur est correctement configuré.', 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 1088a18cc..c31b6e277 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 @@ -12,8 +12,8 @@ const connector_details = { edit_config_label: '여기에 JSON을 입력해 주세요.', test_email_sender: '이메일 연동 테스트', test_sms_sender: 'SMS 연동 테스트', - test_email_placeholder: '테스트 이메일 주소를 입력해 주세요.', - test_sms_placeholder: '테스트 휴대전화번호를 입력해 주세요.', + test_email_placeholder: 'john.doe@example.com', + test_sms_placeholder: '+82 10-1234-5678', test_message_sent: '테스트 메세지 전송 완료', test_sender_description: 'Logto는 "Generic" 템플릿을 사용하여 테스트합니다. 커넥터가 올바르게 구성되면 메시지를 받게 됩니다.', 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 838f77a1d..9768a6a48 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 @@ -12,8 +12,8 @@ const connector_details = { edit_config_label: 'Digite seu json aqui', test_email_sender: 'Teste seu conector de e-mail', test_sms_sender: 'Teste seu conector SMS', - test_email_placeholder: 'Insira um endereço de e-mail de teste', - test_sms_placeholder: 'Digite um número de telefone de teste', + test_email_placeholder: 'john.doe@example.com', + test_sms_placeholder: '+55 11 9 1234-5678', test_message_sent: 'Mensagem de teste enviada', test_sender_description: 'O Logto utiliza o modelo "Generic" para testes. Você receberá uma mensagem se o seu conector estiver configurado corretamente.', 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 0c2686305..bc83c6c7d 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 @@ -12,8 +12,8 @@ const connector_details = { edit_config_label: 'Introduza o JSON aqui', test_email_sender: 'Teste o conector de email', test_sms_sender: 'Teste o conector de SMS', - test_email_placeholder: 'Insira um endereço de email para o teste', - test_sms_placeholder: 'Insira um número de telefone para o teste', + test_email_placeholder: 'john.doe@example.com', + test_sms_placeholder: '+351 912 345 678', test_message_sent: 'Mensagem de teste enviada', test_sender_description: 'O Logto utiliza o modelo "Generic" para testes. Receberás uma mensagem se o teu conector estiver configurado corretamente.', 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 f14a9f4d8..d75b15be1 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 @@ -12,8 +12,8 @@ const connector_details = { edit_config_label: 'json girin ', test_email_sender: 'eposta connectorunuzu test edin', test_sms_sender: 'SMS connectorunuzu test edin', - test_email_placeholder: 'Test e-posta adresi girin', - test_sms_placeholder: 'Test telefon numarası girin', + test_email_placeholder: 'john.doe@example.com', + test_sms_placeholder: '+90 555 123 45 67', test_message_sent: 'Test mesajı gönderildi', test_sender_description: 'Logto testler için "Generic" şablonunu kullanır. Bağlantınız doğru şekilde yapılandırılmışsa bir mesaj alacaksınız.', 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 c18445b5e..fd8d0f986 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 @@ -12,11 +12,11 @@ const connector_details = { edit_config_label: '请在此输入你的 JSON 配置', test_email_sender: '测试你的邮件连接器', test_sms_sender: '测试你的短信连接器', - test_email_placeholder: '请输入一个用于测试的邮件地址', - test_sms_placeholder: '请输入一个用于测试的手机号码', + test_email_placeholder: 'john.doe@example.com', + test_sms_placeholder: '+86 131 1234 5678', test_message_sent: '测试信息已发送', test_sender_description: - 'Logto 使用"Generic"模板进行测试。如果你的连接器正确配置，你将收到一条消息。', + 'Logto 使用 "Generic" 模板进行测试。如果你的连接器正确配置，你将收到一条消息。', options_change_email: '更换邮件连接器', options_change_sms: '更换短信连接器', connector_deleted: '成功删除连接器', diff --git a/packages/toolkit/core-kit/src/regex.ts b/packages/toolkit/core-kit/src/regex.ts index c6933962f..138852aea 100644 --- a/packages/toolkit/core-kit/src/regex.ts +++ b/packages/toolkit/core-kit/src/regex.ts @@ -1,5 +1,6 @@ export const emailRegEx = /^\S+@\S+\.\S+$/; export const phoneRegEx = /^\d+$/; +export const phoneInputRegEx = /^\+?[\d-( )]+$/; export const usernameRegEx = /^[A-Z_a-z]\w*$/; export const webRedirectUriProtocolRegEx = /^https?:$/; export const mobileUriSchemeProtocolRegEx = /^[a-z][\d_a-z]*(\.[\d_a-z]+)+:$/;