fix(console): should not append slash in cors allowed uri (#1001)

packages/console/src/mdx-components/MultiTextInputField/index.tsx

@@ -42,7 +42,7 @@ const MultiTextInputField = ({ name, title, onError }: Props) => {
           validate: createValidatorForRhf({
             required: t('errors.required_field_missing_plural', { field: title }),
             pattern: {
-              verify: uriValidator(false),
+              verify: uriValidator({ verifyBlank: false }),
               message: t('errors.invalid_uri_format'),
             },
           }),

packages/console/src/pages/ApplicationDetails/components/Settings.tsx

@@ -9,7 +9,7 @@ import MultiTextInput from '@/components/MultiTextInput';
 import { MultiTextInputRule } from '@/components/MultiTextInput/types';
 import { createValidatorForRhf, convertRhfErrorMessage } from '@/components/MultiTextInput/utils';
 import TextInput from '@/components/TextInput';
-import { uriValidator } from '@/utilities/validator';
+import { uriOriginValidator, uriValidator } from '@/utilities/validator';
 
 import * as styles from '../index.module.scss';
 
@@ -23,7 +23,7 @@ const Settings = ({ oidcConfig }: Props) => {
 
   const uriPatternRules: MultiTextInputRule = {
     pattern: {
-      verify: uriValidator(false),
+      verify: uriValidator({ verifyBlank: false }),
       message: t('errors.invalid_uri_format'),
     },
   };
@@ -105,7 +105,12 @@ const Settings = ({ oidcConfig }: Props) => {
           control={control}
           defaultValue={[]}
           rules={{
-            validate: createValidatorForRhf(uriPatternRules),
+            validate: createValidatorForRhf({
+              pattern: {
+                verify: uriOriginValidator({ verifyBlank: false }),
+                message: t('errors.invalid_origin_format'),
+              },
+            }),
           }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <MultiTextInput

packages/console/src/pages/ApplicationDetails/index.tsx

@@ -31,7 +31,10 @@ import Settings from './components/Settings';
 import * as styles from './index.module.scss';
 
 const mapToUriFormatArrays = (value?: string[]) =>
-  value?.filter(Boolean).map((uri) => decodeURIComponent(new URL(uri).toString()));
+  value?.filter(Boolean).map((uri) => decodeURIComponent(uri));
+
+const mapToUriOriginFormatArrays = (value?: string[]) =>
+  value?.filter(Boolean).map((uri) => decodeURIComponent(new URL(uri).origin));
 
 const ApplicationDetails = () => {
   const { id } = useParams();
@@ -82,7 +85,7 @@ const ApplicationDetails = () => {
           },
           customClientMetadata: {
             ...formData.customClientMetadata,
-            corsAllowedOrigins: mapToUriFormatArrays(
+            corsAllowedOrigins: mapToUriOriginFormatArrays(
               formData.customClientMetadata.corsAllowedOrigins
             ),
           },

packages/console/src/utilities/validator.ts

@@ -1,4 +1,4 @@
-export const uriValidator = (verifyBlank = true) => {
+export const uriValidator = ({ verifyBlank = true }) => {
   return (value: string) => {
     if (!verifyBlank && value.trim().length === 0) {
       return true;
@@ -14,3 +14,17 @@ export const uriValidator = (verifyBlank = true) => {
     return true;
   };
 };
+
+export const uriOriginValidator = ({ verifyBlank = true }) => {
+  return (value: string) => {
+    if (!verifyBlank && value.trim().length === 0) {
+      return true;
+    }
+
+    try {
+      return new URL(value).origin === value;
+    } catch {
+      return false;
+    }
+  };
+};

packages/phrases/src/locales/en.ts

@@ -114,6 +114,7 @@ const translation = {
       empty: 'No Data',
       missing_total_number: 'Unable to find Total-Number in response headers.',
       invalid_uri_format: 'Invalid URI format',
+      invalid_origin_format: 'Invalid URI origin format',
       required_field_missing: 'Please enter {{field}}',
       required_field_missing_plural: 'You have to enter at least one {{field}}',
       more_details: 'More details',

packages/phrases/src/locales/zh-cn.ts

@@ -114,6 +114,7 @@ const translation = {
       empty: '没有数据',
       missing_total_number: '无法从返回的头部信息中找到 Total-Number。',
       invalid_uri_format: '无效的 URI 格式',
+      invalid_origin_format: '无效的 URI origin 格式',
       required_field_missing: '请输入{{field}}',
       required_field_missing_plural: '{{field}}不能全部为空',
       more_details: '查看详情',