refactor(console,phrases): improve protected app details form validation and error handling (#5347)

2025-01-06 20:40:08 -05:00 · 2024-01-31 14:34:53 +08:00 · 2024-01-31 14:34:53 +08:00 · df92091106
commit df92091106
parent c65b36565a
65 changed files with 148 additions and 109 deletions
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx
@ -1,3 +1,4 @@
+import { isValidRegEx, validateUriOrigin } from '@logto/core-kit';
 import {
  DomainStatus,
  type Application,
@ -95,8 +96,32 @@ function ProtectedAppSettings({ data }: Props) {
            placeholder={t('application_details.application_name_placeholder')}
          />
        </FormField>
+        <FormField
+          isRequired
+          title="protected_app.form.url_field_label"
+          description={cond(
+            getFieldState('protectedAppMetadata.origin').isDirty &&
+              'protected_app.form.url_field_modification_notice'
+          )}
+          tip={<span className={styles.tip}>{t('application_details.origin_url_tip')}</span>}
+        >
+          <TextInput
+            {...register('protectedAppMetadata.origin', {
+              required: true,
+              validate: (value) =>
+                validateUriOrigin(value) || t('protected_app.form.errors.invalid_url'),
+            })}
+            error={
+              // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+              errors.protectedAppMetadata?.origin?.message ||
+              (errors.protectedAppMetadata?.origin?.type === 'required' &&
+                t('protected_app.form.errors.url_required'))
+            }
+            placeholder={t('protected_app.form.url_field_placeholder')}
+          />
+        </FormField>
        {!!host && (
-          <FormField title="application_details.app_domain_protected">
+          <FormField title="domain.custom.custom_domain_field">
            {!customDomain && (
              <AddDomainForm
                className={styles.customDomain}
@ -125,7 +150,7 @@ function ProtectedAppSettings({ data }: Props) {
            {customDomain?.status !== DomainStatus.Active && (
              <>
                <div className={styles.label}>
-                  {t('application_details.app_domain_protected_description_1')}
+                  {t('application_details.app_domain_description_1')}
                </div>
                <div className={styles.hostInUse}>
                  <span className={styles.host}>{host}</span>
@ -139,27 +164,12 @@ function ProtectedAppSettings({ data }: Props) {
            {customDomain?.status === DomainStatus.Active && (
              <span className={styles.label}>
                <Trans components={{ domain: <span className={styles.inlineCode} /> }}>
-                  {t('application_details.app_domain_protected_description_2', { domain: host })}
+                  {t('application_details.app_domain_description_2', { domain: host })}
                </Trans>
              </span>
            )}
          </FormField>
        )}
-        <FormField
-          isRequired
-          title="protected_app.form.url_field_label"
-          description={cond(
-            getFieldState('protectedAppMetadata.origin').isDirty &&
-              'protected_app.form.url_field_modification_notice'
-          )}
-          tip={<span className={styles.tip}>{t('application_details.origin_url_tip')}</span>}
-        >
-          <TextInput
-            {...register('protectedAppMetadata.origin', { required: true })}
-            error={Boolean(errors.protectedAppMetadata?.origin)}
-            placeholder={t('protected_app.form.url_field_placeholder')}
-          />
-        </FormField>
        <FormField
          title="application_details.custom_rules"
          description="application_details.custom_rules_description"
@ -175,7 +185,9 @@ function ProtectedAppSettings({ data }: Props) {
          {fields.map((field, index) => (
            <TextInput
              key={field.id}
-              {...register(`protectedAppMetadata.pageRules.${index}.path`)}
+              {...register(`protectedAppMetadata.pageRules.${index}.path`, {
+                validate: (value) => !value || isValidRegEx(value) || t('errors.invalid_regex'),
+              })}
              error={Boolean(errors.protectedAppMetadata?.pageRules?.[index]?.path)}
              placeholder={t('application_details.custom_rules_placeholder')}
            />
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx
@ -51,6 +51,7 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P

  const formMethods = useForm<ApplicationForm>({
    defaultValues: applicationFormDataParser.fromResponse(data),
+    mode: 'onBlur',
  });

  const {
--- a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx
@ -49,7 +49,7 @@ function ProtectedAppForm({
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
-  } = useForm<ProtectedAppForm>();
+  } = useForm<ProtectedAppForm>({ mode: 'onBlur' });

  const api = useApi({ hideErrorToast: true });

--- a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: 'Anwendung {{name}} wurde erfolgreich gelöscht',
  redirect_uri_required: 'Gib mindestens eine Umleitungs-URI an',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/de/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/domain.ts
@ -15,8 +15,9 @@ const domain = {
    custom_domain_field: 'Benutzerdefinierte Domain',
    custom_domain_placeholder: 'ihre.domain.com',
    add_domain: 'Domain hinzufügen',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      'Ungültiges Subdomänen-Format. Bitte geben Sie eine Subdomäne mit mindestens drei Teilen ein.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Domain überprüfen',
    enable_ssl: 'SSL aktivieren',
    checking_dns_tip:
--- a/packages/phrases/src/locales/de/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'Ungültiges URI-Format',
  invalid_origin_format: 'Ungültiges URI Origin-Format',
  invalid_json_format: 'Ungültiges JSON-Format',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'Ungültiges Fehlermeldung-Format.',
  required_field_missing: 'Bitte fülle {{field}} aus',
  required_field_missing_plural: 'Mindestens ein {{field}} muss ausgefüllt sein',
--- a/packages/phrases/src/locales/de/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
@ -67,10 +67,9 @@ const application_details = {
  enter_your_application_name: 'Enter your application name',
  application_deleted: 'Application {{name}} has been successfully deleted',
  redirect_uri_required: 'You must enter at least one redirect URI',
-  app_domain_protected: 'App domain protected',
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  origin_url_tip:
    "Enter primary website address of your application, excluding any '/pathname'.\n\nNote: The Origin URL itself won't require authentication; only accesses via the added app domain will be protected.",
--- a/packages/phrases/src/locales/en/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/domain.ts
@ -16,7 +16,7 @@ const domain = {
    custom_domain_placeholder: 'your.domain.com',
    add_domain: 'Add domain',
    invalid_domain_format:
-      'Invalid subdomain format. Please enter a subdomain with at least three parts.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Verify domain',
    enable_ssl: 'Enable SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/en/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/errors.ts
@ -7,6 +7,7 @@ const errors = {
  invalid_uri_format: 'Invalid URI format',
  invalid_origin_format: 'Invalid URI origin format',
  invalid_json_format: 'Invalid JSON format',
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'The error message format is invalid.',
  required_field_missing: 'Please enter {{field}}',
  required_field_missing_plural: 'You have to enter at least one {{field}}',
--- a/packages/phrases/src/locales/en/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/protected-app.ts
@ -27,7 +27,7 @@ const protected_app = {
    create_application: 'Create application',
    create_protected_app: 'Create and experience instantly',
    errors: {
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      domain_in_use: 'This subdomain name is already in use.',
      invalid_domain_format:
        "Invalid subdomain format: use only lowercase letters, numbers, and hyphens '-'.",
--- a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: 'Se ha eliminado exitosamente la aplicación {{name}}',
  redirect_uri_required: 'Debes ingresar al menos un URI de Redireccionamiento',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/es/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/domain.ts
@ -15,8 +15,9 @@ const domain = {
    custom_domain_field: 'Dominio personalizado',
    custom_domain_placeholder: 'tu.dominio.com',
    add_domain: 'Agregar dominio',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      'Formato de subdominio no válido. Por favor ingrese un subdominio con al menos tres partes.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Verificar dominio',
    enable_ssl: 'Habilitar SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/es/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'Formato de URI no válido',
  invalid_origin_format: 'Formato de origen de URI no válido',
  invalid_json_format: 'Formato JSON no válido',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'El formato del mensaje de error es inválido.',
  required_field_missing: 'Por favor ingrese {{field}}',
  required_field_missing_plural: 'Tienes que ingresar al menos un {{field}}',
--- a/packages/phrases/src/locales/es/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: "L'application {{name}} a été supprimée avec succès.",
  redirect_uri_required: 'Vous devez entrer au moins un URI de redirection.',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/fr/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/domain.ts
@ -15,8 +15,9 @@ const domain = {
    custom_domain_field: 'Domaine personnalisé',
    custom_domain_placeholder: 'votre.domaine.com',
    add_domain: 'Ajouter un domaine',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      'Format de sous-domaine invalide. Veuillez entrer un sous-domaine d’au moins trois parties.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Vérifier le domaine',
    enable_ssl: 'Activer SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/fr/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: "Format d'URI non valide",
  invalid_origin_format: "Format d'origine URI non valide",
  invalid_json_format: 'Format JSON non valide',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: "Le format du message d'erreur n'est pas valide.",
  required_field_missing: 'Veuillez saisir {{field}}',
  required_field_missing_plural: 'Vous devez entrer au moins un {{field}}.',
--- a/packages/phrases/src/locales/fr/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: "L'applicazione {{name}} è stata eliminata con successo",
  redirect_uri_required: 'Devi inserire almeno un URI di reindirizzamento',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/it/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/domain.ts
@ -15,8 +15,9 @@ const domain = {
    custom_domain_field: 'Dominio personalizzato',
    custom_domain_placeholder: 'il-tuo-dominio.com',
    add_domain: 'Aggiungi dominio',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      'Formato del sottodominio non valido. Inserisci un sottodominio con almeno tre parti.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Verifica dominio',
    enable_ssl: 'Abilita SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/it/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'Formato URI non valido',
  invalid_origin_format: 'Formato origine URI non valido',
  invalid_json_format: 'Formato JSON non valido',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'Il formato del messaggio di errore non è valido.',
  required_field_missing: 'Inserisci {{field}}',
  required_field_missing_plural: 'Devi inserire almeno un {{field}}',
--- a/packages/phrases/src/locales/it/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: 'アプリケーション{{name}}が正常に削除されました',
  redirect_uri_required: 'リダイレクトURIを少なくとも1つ入力する必要があります',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/ja/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/domain.ts
@ -14,8 +14,9 @@ const domain = {
    custom_domain_field: 'カスタムドメイン',
    custom_domain_placeholder: 'your.domain.com',
    add_domain: 'ドメインを追加',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      '無効なドメイン形式または少なくとも3つのサブドメインを含む有効なドメインを入力してください。',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'ドメインを検証',
    enable_ssl: 'SSLを有効にする',
    checking_dns_tip:
--- a/packages/phrases/src/locales/ja/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: '無効なURI形式',
  invalid_origin_format: '無効なURIの起源の形式',
  invalid_json_format: '無効なJSON形式',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'エラーメッセージの形式が無効です。',
  required_field_missing: '{{field}}を入力してください',
  required_field_missing_plural: '少なくとも1つの{{field}}を入力する必要があります',
--- a/packages/phrases/src/locales/ja/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: '{{name}} 어플리케이션이 성공적으로 삭제되었어요.',
  redirect_uri_required: '반드시 최소 하나의 Redirect URI 를 입력해야 해요.',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/ko/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/domain.ts
@ -14,8 +14,9 @@ const domain = {
    custom_domain_field: '사용자 지정 도메인',
    custom_domain_placeholder: 'your.domain.com',
    add_domain: '도메인 추가',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      '잘못된 하위 도메인 형식입니다. 하위 도메인은 적어도 3부분으로 구성돼야 합니다.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: '도메인 확인',
    enable_ssl: 'SSL 사용',
    checking_dns_tip:
--- a/packages/phrases/src/locales/ko/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'URI 형식이 유효하지 않음',
  invalid_origin_format: 'URI origin 형식이 유효하지 않음',
  invalid_json_format: 'JSON 형식이 유효하지 않음',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: '오류 메세지 형식이 유효하지 않아요.',
  required_field_missing: '{{field}}을/를 입력해 주세요.',
  required_field_missing_plural: '최소 1개의 {{field}}을/를 입력해야 해요.',
--- a/packages/phrases/src/locales/ko/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: 'Aplikacja {{name}} została pomyślnie usunięta',
  redirect_uri_required: 'Musisz wpisać co najmniej jeden adres URL przekierowania',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/domain.ts
@ -15,8 +15,9 @@ const domain = {
    custom_domain_field: 'Niestandardowa domena',
    custom_domain_placeholder: 'twoja.domena.com',
    add_domain: 'Dodaj domenę',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      'Nieprawidłowy format poddomeny. Wprowadź poddomenę z co najmniej trzema elementami.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Zweryfikuj domenę',
    enable_ssl: 'Włącz SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'Nieprawidłowy format URI',
  invalid_origin_format: 'Nieprawidłowy format pochodzenia URI',
  invalid_json_format: 'Nieprawidłowy format JSON',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'Nieprawidłowy format komunikatu błędu.',
  required_field_missing: 'Wpisz {{field}}',
  required_field_missing_plural: 'Musisz wprowadzić przynajmniej jeden {{field}}',
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: 'O aplicativo {{name}} foi excluído com sucesso',
  redirect_uri_required: 'Você deve inserir pelo menos um URI de redirecionamento',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/domain.ts
@ -15,8 +15,9 @@ const domain = {
    custom_domain_field: 'Domínio personalizado',
    custom_domain_placeholder: 'seu.domínio.com',
    add_domain: 'Adicionar domínio',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      'Formato de subdomínio inválido. Insira um subdomínio com pelo menos três partes.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Verificar domínio',
    enable_ssl: 'Habilitar SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'Formato de URI inválido',
  invalid_origin_format: 'Formato de origem de URI inválido',
  invalid_json_format: 'Formato JSON inválido',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'O formato da mensagem de erro é inválido.',
  required_field_missing: 'Por favor, insira {{field}}',
  required_field_missing_plural: 'Você deve inserir pelo menos um {{field}}',
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: 'Aplicação {{name}} eliminada com sucesso',
  redirect_uri_required: 'Deve inserir pelo menos um URI de redirecionamento',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/domain.ts
@ -15,8 +15,9 @@ const domain = {
    custom_domain_field: 'Domínio personalizado',
    custom_domain_placeholder: 'seu.dominio.com',
    add_domain: 'Adicionar domínio',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      'Formato de subdomínio inválido. Introduza um subdomínio com pelo menos três partes.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Verificar domínio',
    enable_ssl: 'Ativar SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'Formato de URI inválido',
  invalid_origin_format: 'Formato de origem de URI inválido',
  invalid_json_format: 'Formato JSON inválido',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'O formato da mensagem de erro é inválido.',
  required_field_missing: 'Por favor, introduza {{field}}',
  required_field_missing_plural: 'Deve inserir pelo menos um {{field}}',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: 'Приложение {{name}} успешно удалено',
  redirect_uri_required: 'Вы должны ввести по крайней мере один URI перенаправления',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/ru/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/domain.ts
@ -15,7 +15,9 @@ const domain = {
    custom_domain_field: 'Пользовательский домен',
    custom_domain_placeholder: 'Ваш.домен.com',
    add_domain: 'Добавить домен',
-    invalid_domain_format: 'Некорректный формат поддомена. Введите поддомен с минимум 3 секциями.',
+    /** UNTRANSLATED */
+    invalid_domain_format:
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Проверить домен',
    enable_ssl: 'Включить SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/ru/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'Неверный формат URI',
  invalid_origin_format: 'Неверный формат URI-оригинала',
  invalid_json_format: 'Неверный формат JSON',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'Неверный формат сообщения об ошибке.',
  required_field_missing: 'Пожалуйста, введите {{field}}',
  required_field_missing_plural: 'Вы должны ввести хотя бы одно {{field}}',
--- a/packages/phrases/src/locales/ru/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
@ -80,12 +80,10 @@ const application_details = {
  application_deleted: '{{name}} Uygulaması başarıyla silindi',
  redirect_uri_required: 'En az 1 yönlendirme URIı girmelisiniz',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/domain.ts
@ -15,8 +15,9 @@ const domain = {
    custom_domain_field: 'Özel alan adı',
    custom_domain_placeholder: 'alan_adınız.com',
    add_domain: 'Alan Adı Ekle',
+    /** UNTRANSLATED */
    invalid_domain_format:
-      'Geçersiz alt alan adı biçimi. Lütfen en az üç parçadan oluşan bir alt alan adı girin.',
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: 'Alan adınızı doğrulayın',
    enable_ssl: 'SSL etkinleştirilsin mi',
    checking_dns_tip:
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: 'Geçersiz URI biçimi',
  invalid_origin_format: 'Geçersiz URI kaynak biçimi',
  invalid_json_format: 'Geçersiz JSON biçimi',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: 'Hata mesajı biçimi geçersiz.',
  required_field_missing: 'Lütfen {{field}} giriniz',
  required_field_missing_plural: 'En az bir {{field}} girmek zorundasınız.',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
@ -78,12 +78,10 @@ const application_details = {
  application_deleted: '应用 {{name}} 成功删除。',
  redirect_uri_required: '至少需要输入一个重定向 URI。',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/domain.ts
@ -13,7 +13,9 @@ const domain = {
    custom_domain_field: '自定义域名',
    custom_domain_placeholder: 'your.domain.com',
    add_domain: '添加域名',
-    invalid_domain_format: '无效的子域名格式，请至少输入三个部分的子域名。',
+    /** UNTRANSLATED */
+    invalid_domain_format:
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: '验证域名',
    enable_ssl: '启用 SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: '无效的 URI 格式',
  invalid_origin_format: '无效的 URI origin 格式',
  invalid_json_format: '无效的 JSON 格式',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: '非法的错误信息格式',
  required_field_missing: '请输入{{field}}',
  required_field_missing_plural: '至少需要输入一个{{field}}',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts
@ -78,12 +78,10 @@ const application_details = {
  application_deleted: '應用 {{name}} 成功刪除。',
  redirect_uri_required: '至少需要輸入一個重定向 URL。',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/domain.ts
@ -13,7 +13,9 @@ const domain = {
    custom_domain_field: '自定義域名',
    custom_domain_placeholder: 'your.domain.com',
    add_domain: '添加域名',
-    invalid_domain_format: '子域名格式無效，請輸入至少三個子域名部分。',
+    /** UNTRANSLATED */
+    invalid_domain_format:
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: '驗證域名',
    enable_ssl: '啟用 SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: '無效的 URI 格式',
  invalid_origin_format: '無效的 URI origin 格式',
  invalid_json_format: '無效的 JSON 格式',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: '非法的錯誤信息格式',
  required_field_missing: '請輸入{{field}}',
  required_field_missing_plural: '至少需要輸入一個{{field}}',
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts
@ -79,12 +79,10 @@ const application_details = {
  application_deleted: '應用 {{name}} 成功刪除。',
  redirect_uri_required: '至少需要輸入一個重定向 URL。',
  /** UNTRANSLATED */
-  app_domain_protected: 'App domain protected',
-  /** UNTRANSLATED */
-  app_domain_protected_description_1:
+  app_domain_description_1:
    'Feel free to use your subdomain with protected.app powered by Logto, which is permanently valid.',
  /** UNTRANSLATED */
-  app_domain_protected_description_2:
+  app_domain_description_2:
    'Feel free to utilize your domain <domain>{{domain}}</domain> which is permanently valid.',
  /** UNTRANSLATED */
  origin_url_tip:
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/domain.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/domain.ts
@ -13,7 +13,9 @@ const domain = {
    custom_domain_field: '自訂網域',
    custom_domain_placeholder: 'your.domain.com',
    add_domain: '新增網域',
-    invalid_domain_format: '子網域格式無效，請輸入至少三個部分的子網域。',
+    /** UNTRANSLATED */
+    invalid_domain_format:
+      'Please provide a valid domain URL with a minimum of three parts, e.g. "your.domain.com."',
    verify_domain: '驗證網域',
    enable_ssl: '啟用 SSL',
    checking_dns_tip:
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/errors.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/errors.ts
@ -7,6 +7,8 @@ const errors = {
  invalid_uri_format: '無效的 URI 格式',
  invalid_origin_format: '無效的 URI origin 格式',
  invalid_json_format: '無效的 JSON 格式',
+  /** UNTRANSLATED */
+  invalid_regex: 'Invalid regular expression',
  invalid_error_message_format: '非法的錯誤訊息格式',
  required_field_missing: '請輸入{{field}}',
  required_field_missing_plural: '至少需要輸入一個{{field}}',
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/protected-app.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/protected-app.ts
@ -46,7 +46,7 @@ const protected_app = {
    create_protected_app: 'Create and experience instantly',
    errors: {
      /** UNTRANSLATED */
-      domain_required: 'Subdomain is required',
+      domain_required: 'Subdomain is required.',
      /** UNTRANSLATED */
      domain_in_use: 'This subdomain name is already in use.',
      /** UNTRANSLATED */
--- a/packages/toolkit/core-kit/src/utils/index.ts
+++ b/packages/toolkit/core-kit/src/utils/index.ts
@ -1,2 +1,3 @@
 export * from './color.js';
+export * from './regex.js';
 export * from './url.js';
--- a/packages/toolkit/core-kit/src/utils/regex.ts
+++ b/packages/toolkit/core-kit/src/utils/regex.ts
@ -0,0 +1,7 @@
+export const isValidRegEx = (regEx?: string) => {
+  try {
+    return Boolean(regEx && new RegExp(regEx));
+  } catch {
+    return false;
+  }
+};