Merge pull request #8181 from ProcessMaker/feature/FOUR-23805

FOUR-23805: Update the text of modal to create a URL and validate the URL

Author: pmPaulis

resources/js/admin/settings/components/ModalWhiteList.vue

@@ -6,10 +6,10 @@
   >
     <template #modal-title>
       <div class="tw-self-stretch tw-text-base tw-font-medium tw-text-[#20242A]">
-        {{ $t("URL Creation") }}
+        {{ $t("Configure URL Parents for Embedding") }}
       </div>
       <div class="tw-self-stretch tw-text-sm tw-text-[#596372]">
-        {{ $t("Please provide your information to create an account.") }}
+        {{ $t("Please provide a valid URL (e.g., https://example.com ) to specify the allowed origin(s) permitted to embed ProcessMaker.") }}
       </div>
     </template>
     <div class="tw-block">
@@ -31,16 +31,19 @@
       <div class="form-group col-md-12">
         <div class="d-flex flex-column">
           <label for="url">
-            {{ $t("Site Name") }}
+            {{ $t("Url") }}
           </label>
           <b-form-input
             id="url"
             v-model="url"
             type="text"
             required
-            placeholder="http://www.sample.org/head"
+            placeholder="https://www.sample.org/head"
             :state="stateURL"
           />
+          <div v-if="urlError" class="text-danger mt-1">
+            {{ urlError }}
+          </div>
         </div>
       </div>
     </div>
@@ -68,6 +71,7 @@ export default {
       stateURL: null,
       groupName: "",
       group_id: 3,
+      urlError: "",
     };
   },
   methods: {
@@ -79,6 +83,11 @@ export default {
     clear() {
       this.siteName = "";
       this.url = "";
+      this.urlError = "";
+    },
+    validateURL(url) {
+      const pattern = /^(https?:\/\/)?(\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/.*)?$/;
+      return pattern.test(url);
     },
     addWhiteListURL() {
       if (!this.siteName) {
@@ -89,6 +98,12 @@ export default {
         this.stateURL = false;
         return;
       }
+      // Validate the URL using the regex pattern
+      if (!this.validateURL(this.url)) {
+        this.stateURL = false;
+        this.urlError = __("Please enter a valid URL.");
+        return;
+      }
       const site = this.siteName.toLocaleLowerCase().trim().replaceAll(" ", "_");
       const data = {
         key: `white_list.${site}`,

resources/lang/en.json

@@ -444,6 +444,7 @@
   "Configure Script": "Configure Script",
   "Configure Template": "Configure Template",
   "Configure the authenticator app": "Configure the authenticator app",
+  "Configure URL Parents for Embedding": "Configure URL Parents for Embedding",
   "Configure": "Configure",
   "Confirm and Save": "Confirm and Save",
   "Confirm New Password": "Confirm New Password",
@@ -1549,6 +1550,7 @@
   "Please choose the tasks in your inbox that this new rule should apply to. <b>Use the column filters</b> to achieve this.": "Please choose the tasks in your inbox that this new rule should apply to. <b>Use the column filters</b> to achieve this.",
   "Please contact your administrator to get started.": "Please contact your administrator to get started.",
   "Please enter Tab Name": "Please enter Tab Name",
+  "Please provide a valid URL (e.g., https://example.com ) to specify the allowed origin(s) permitted to embed ProcessMaker.": "Please provide a valid URL (e.g., https://example.com ) to specify the allowed origin(s) permitted to embed ProcessMaker.",
   "Please log in to continue your work on this page.": "Please log in to continue your work on this page.",
   "Please select a Saved Search": "Please select a Saved Search",
   "Please take a look at it in the 'Rules' section located within your Inbox.": "Please take a look at it in the 'Rules' section located within your Inbox.",