feat: guard text inputs for CustomHeaderField component (#4609)

* feat: guard text inputs for CustomHeaderField component

* feat: add valueValidator and update keyValidator

* fix(console): check custom header key and value only if they are not empty

* chore(phrases): add invalid input phrases for custom header field

---------

Co-authored-by: Xiao Yijun <xiaoyijun@silverhand.io>

packages/console/src/pages/WebhookDetails/WebhookSettings/CustomHeaderField/index.tsx

@@ -11,6 +11,14 @@ import { type WebhookDetailsFormType } from '@/pages/WebhookDetails/types';
 
 import * as styles from './index.module.scss';
 
+const isValidHeaderKey = (key: string) => {
+  return /^[\u0021-\u0039\u003B-\u007E]+$/.test(key);
+};
+
+const isValidHeaderValue = (value: string) => {
+  return /^[\u0020-\u007E]*$/.test(value);
+};
+
 function CustomHeaderField() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
@@ -44,9 +52,23 @@ function CustomHeaderField() {
       return Boolean(key) || t('webhook_details.settings.key_missing_error');
     }
 
+    if (Boolean(key) && !isValidHeaderKey(key)) {
+      return t('webhook_details.settings.invalid_key_error');
+    }
+
     return true;
   };
 
+  const valueValidator = (value: string, index: number) => {
+    if (Boolean(value) && !isValidHeaderValue(value)) {
+      return t('webhook_details.settings.invalid_value_error');
+    }
+
+    return getValues(`headers.${index}.key`)
+      ? Boolean(value) || t('webhook_details.settings.value_missing_error')
+      : true;
+  };
+
   const revalidate = () => {
     for (const [index] of fields.entries()) {
       void trigger(`headers.${index}.key`);
@@ -79,10 +101,7 @@ function CustomHeaderField() {
                 placeholder="Value"
                 error={Boolean(headerErrors?.[index]?.value)}
                 {...register(`headers.${index}.value`, {
-                  validate: (value) =>
-                    getValues(`headers.${index}.key`)
-                      ? Boolean(value) || t('webhook_details.settings.value_missing_error')
-                      : true,
+                  validate: (value) => valueValidator(value, index),
                   onChange: revalidate,
                 })}
               />

packages/phrases/src/locales/de/translation/admin-console/webhook-details.ts

@@ -41,6 +41,8 @@ const webhook_details = {
     key_duplicated_error: 'Schlüssel können nicht wiederholt werden.',
     key_missing_error: 'Key ist erforderlich.',
     value_missing_error: 'Eine Eingabe ist erforderlich.',
+    invalid_key_error: 'Schlüssel ist ungültig',
+    invalid_value_error: 'Wert ist ungültig',
     test: 'Test',
     test_webhook: 'Testen Sie Ihren Webhook',
     test_webhook_description:

packages/phrases/src/locales/en/translation/admin-console/webhook-details.ts

@@ -40,6 +40,8 @@ const webhook_details = {
     key_duplicated_error: 'Key cannot be repeated.',
     key_missing_error: 'Key is required.',
     value_missing_error: 'Value is required.',
+    invalid_key_error: 'Key is invalid',
+    invalid_value_error: 'Value is invalid',
     test: 'Test',
     test_webhook: 'Test your webhook',
     test_webhook_description:

packages/phrases/src/locales/es/translation/admin-console/webhook-details.ts

@@ -41,6 +41,8 @@ const webhook_details = {
     key_duplicated_error: 'Las claves no pueden repetirse.',
     key_missing_error: 'Se requiere clave.',
     value_missing_error: 'Se requiere valor.',
+    invalid_key_error: 'La clave no es válida',
+    invalid_value_error: 'El valor no es válido',
     test: 'Prueba',
     test_webhook: 'Probar su webhook',
     test_webhook_description:

packages/phrases/src/locales/fr/translation/admin-console/webhook-details.ts

@@ -41,6 +41,8 @@ const webhook_details = {
     key_duplicated_error: 'Les clés ne peuvent pas se répéter.',
     key_missing_error: 'La clé est requise.',
     value_missing_error: 'La valeur est requise.',
+    invalid_key_error: 'Clé invalide',
+    invalid_value_error: 'La valeur est invalide',
     test: 'Tester',
     test_webhook: 'Tester votre webhook',
     test_webhook_description:

packages/phrases/src/locales/it/translation/admin-console/webhook-details.ts

@@ -40,6 +40,8 @@ const webhook_details = {
     key_duplicated_error: 'Le chiavi non possono essere ripetute.',
     key_missing_error: 'La chiave è necessaria.',
     value_missing_error: 'Il valore è obbligatorio.',
+    invalid_key_error: 'Chiave non valida',
+    invalid_value_error: 'Valore non valido',
     test: 'Test',
     test_webhook: 'Testa il tuo webhook',
     test_webhook_description:

packages/phrases/src/locales/ja/translation/admin-console/webhook-details.ts

@@ -40,6 +40,8 @@ const webhook_details = {
     key_duplicated_error: 'キーは繰り返すことはできません。',
     key_missing_error: 'キーは必須です。',
     value_missing_error: '値が必要です。',
+    invalid_key_error: 'キーが無効です',
+    invalid_value_error: '値が無効です',
     test: 'テスト',
     test_webhook: 'Webhookをテストする',
     test_webhook_description:

packages/phrases/src/locales/ko/translation/admin-console/webhook-details.ts

@@ -39,6 +39,8 @@ const webhook_details = {
     key_duplicated_error: '키는 반복될 수 없습니다.',
     key_missing_error: '키는 필수 값입니다.',
     value_missing_error: '값은 필수 값입니다.',
+    invalid_key_error: '키가 유효하지 않습니다',
+    invalid_value_error: '값이 유효하지 않습니다',
     test: '테스트',
     test_webhook: 'Webhook 테스트',
     test_webhook_description:

packages/phrases/src/locales/pl-pl/translation/admin-console/webhook-details.ts

@@ -40,6 +40,8 @@ const webhook_details = {
     key_duplicated_error: 'Klucze nie mogą się powtarzać.',
     key_missing_error: 'Klucz jest wymagany.',
     value_missing_error: 'Wartość jest wymagana.',
+    invalid_key_error: 'Klucz jest nieprawidłowy',
+    invalid_value_error: 'Wartość jest nieprawidłowa',
     test: 'Test',
     test_webhook: 'Wypróbuj swój webhook',
     test_webhook_description:

packages/phrases/src/locales/pt-br/translation/admin-console/webhook-details.ts

@@ -40,6 +40,8 @@ const webhook_details = {
     key_duplicated_error: 'As chaves não podem ser repetidas.',
     key_missing_error: 'A chave é obrigatória.',
     value_missing_error: 'O valor é obrigatório.',
+    invalid_key_error: 'Chave inválida',
+    invalid_value_error: 'O valor é inválido',
     test: 'Testar',
     test_webhook: 'Teste seu webhook',
     test_webhook_description:

packages/phrases/src/locales/pt-pt/translation/admin-console/webhook-details.ts

@@ -40,6 +40,8 @@ const webhook_details = {
     key_duplicated_error: 'As chaves não podem ser repetidas.',
     key_missing_error: 'Key é obrigatório.',
     value_missing_error: 'O valor é obrigatório.',
+    invalid_key_error: 'Chave inválida',
+    invalid_value_error: 'Valor inválido',
     test: 'Teste',
     test_webhook: 'Teste seu webhook',
     test_webhook_description:

packages/phrases/src/locales/ru/translation/admin-console/webhook-details.ts

@@ -40,6 +40,8 @@ const webhook_details = {
     key_duplicated_error: 'Ключи не могут повторяться.',
     key_missing_error: 'Ключ обязателен.',
     value_missing_error: 'Значение обязательно',
+    invalid_key_error: 'Ключ недействителен',
+    invalid_value_error: 'Значение недействительно',
     test: 'Тестирование',
     test_webhook: 'Протестировать ваш вебхук',
     test_webhook_description:

packages/phrases/src/locales/tr-tr/translation/admin-console/webhook-details.ts

@@ -39,6 +39,8 @@ const webhook_details = {
     key_duplicated_error: 'Anahtarlar tekrarlanamaz.',
     key_missing_error: 'Anahtar gereklidir.',
     value_missing_error: 'Değer gereklidir.',
+    invalid_key_error: 'Anahtar geçersiz',
+    invalid_value_error: 'Değer geçersiz',
     test: 'Test',
     test_webhook: 'Webhook’unuzu test edin',
     test_webhook_description:

packages/phrases/src/locales/zh-cn/translation/admin-console/webhook-details.ts

@@ -37,6 +37,8 @@ const webhook_details = {
     key_duplicated_error: 'Key 不能重复。',
     key_missing_error: '必须填写 Key。',
     value_missing_error: '必须填写值。',
+    invalid_key_error: ' Key 无效',
+    invalid_value_error: '值无效',
     test: '测试',
     test_webhook: '测试您的 Webhook',
     test_webhook_description:

packages/phrases/src/locales/zh-hk/translation/admin-console/webhook-details.ts

@@ -37,6 +37,8 @@ const webhook_details = {
     key_duplicated_error: 'Key 不能重複。',
     key_missing_error: '必須填寫 Key。',
     value_missing_error: '未填寫值。',
+    invalid_key_error: 'Key 無效',
+    invalid_value_error: '值無效',
     test: '測試',
     test_webhook: '測試您的 webhook',
     test_webhook_description:

packages/phrases/src/locales/zh-tw/translation/admin-console/webhook-details.ts

@@ -37,6 +37,8 @@ const webhook_details = {
     key_duplicated_error: 'Key 不能重複。',
     key_missing_error: '必須填寫 Key。',
     value_missing_error: '未填寫值。',
+    invalid_key_error: 'Key 無效',
+    invalid_value_error: '值無效',
     test: '測試',
     test_webhook: '測試您的 Webhook',
     test_webhook_description: