feat(fe:FSADT1-1565): Highlight text on Auto Complete options (#1286)

* Changed to v-dompurify-html as using v-html can expose the application to XSS (cross-site scripting) attacks

* Changed to v-dompurify-html as using v-html can expose the application to XSS (cross-site scripting) attacks

* Changed to v-dompurify-html as using v-html can expose the application to XSS (cross-site scripting) attacks

* feat(fe): Highlight text on Auto Complete options

* chore: add vue-dompurify-html plugin to Cypress

* Safely escaped special characters

---------

Co-authored-by: Fernando Terra <79578735+fterra-encora@users.noreply.github.com>
Co-authored-by: Fernando Terra <fernando.terra@encora.com>

frontend/cypress/support/component.ts

@@ -5,6 +5,7 @@ import './commands'
 
 import { mount } from 'cypress/vue'
 import '@cypress/code-coverage/support'
+import VueDOMPurifyHTML from "vue-dompurify-html";
 import '@/styles'
 
 declare global {
@@ -15,4 +16,10 @@ declare global {
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add('mount', (component, options = {}) => {
+  options.global = options.global || {};
+  options.global.plugins = options.global.plugins || [];
+  options.global.plugins.push(VueDOMPurifyHTML);
+
+  return mount(component, options);
+});

frontend/src/components/forms/AutoCompleteInputComponent.vue

@@ -8,6 +8,7 @@ import type { CDSComboBox } from "@carbon/web-components";
 import { useEventBus } from "@vueuse/core";
 // Types
 import type { BusinessSearchResult, CodeNameType, CodeNameValue } from "@/dto/CommonTypesDto";
+import { highlightMatch } from "@/services/ForestClientService";
 import { isEmpty, type ValidationMessageType } from "@/dto/CommonTypesDto";
 import type { DROPDOWN_SIZE } from "@carbon/web-components/es/components/dropdown/defs";
 
@@ -363,7 +364,7 @@ const safeHelperText = computed(() => props.tip || " ");
           </template>
           <template v-else>
             <slot :value="item.value">
-              {{ item.name }}
+              <span v-dompurify-html="highlightMatch(item.name, inputValue)"></span>
             </slot>
           </template>
         </cds-combo-box-item>

frontend/src/helpers/ForestClientUserSession.ts

@@ -112,8 +112,6 @@ class ForestClientUserSession implements SessionProperties {
     }
   };
 
-
-
   private processName = (
     payload: any,
     provider: string

frontend/src/pages/SearchPage.vue

@@ -13,7 +13,7 @@ import { useFetchTo } from "@/composables/useFetch";
 import { useEventBus } from "@vueuse/core";
 
 import type { ClientSearchResult, CodeNameValue } from "@/dto/CommonTypesDto";
-import { adminEmail, getObfuscatedEmailLink, toTitleCase } from "@/services/ForestClientService";
+import { adminEmail, getObfuscatedEmailLink, toTitleCase, highlightMatch } from "@/services/ForestClientService";
 import summit from "@carbon/pictograms/es/summit";
 import userSearch from "@carbon/pictograms/es/user--search";
 import useSvg from "@/composables/useSvg";
@@ -232,7 +232,7 @@ onMounted(() => {
           #="{ value }"
         >
           <div class="search-result-item" v-if="value">
-            {{ searchResultToText(value) }}
+            <span v-dompurify-html="highlightMatch(searchResultToText(value), searchKeyword)"></span>
             <cds-tag :type="tagColor(value.clientStatus)" title="">
               <span>{{ value.clientStatus }}</span>
             </cds-tag>

frontend/src/pages/SubmissionReviewPage.vue

@@ -314,10 +314,11 @@ const rejectValidation = reactive<Record<string, boolean>>({
 });
 
 const cleanedRejectionReason = computed(() => {
-  return data.value.rejectionReason.replace(/<div>&nbsp;<\/div>/g, '').replace(/<p>/g, ' ').replace(/<\/p>/g, '');
+  return data.value.rejectionReason 
+    ? "Client " + data.value.rejectionReason.replace(/<div>&nbsp;<\/div>/g, '').replace(/<p>/g, ' ').replace(/<\/p>/g, '') 
+    : '';
 });
 
-
 const isProcessing = computed(() => {
   const processingStatus = (
     !data.value.business.clientNumber
@@ -330,9 +331,6 @@ const isProcessing = computed(() => {
 
   return processingStatus;
 });
-
-
-
 </script>
 
 <template>
@@ -577,7 +575,10 @@ const isProcessing = computed(() => {
               </read-only-component>
 
               <read-only-component label="Reason for rejection" v-if="data.submissionStatus === 'Rejected'">
-                <span class="body-compact-01" style="width: 40rem" v-html="'Client' + cleanedRejectionReason"></span>
+                <span class="body-compact-01" 
+                      style="width: 40rem" 
+                      v-dompurify-html="cleanedRejectionReason">
+                </span>
               </read-only-component>
 
             </div>

frontend/src/pages/staffform/ReviewWizardStep.vue

@@ -211,7 +211,7 @@ watch([validation], () => {
         <span v-if="address.notes  && 
                     address.notes.length"
               class="body-compact-01">
-          <span v-html="getFormattedHtml(address.notes)"></span>
+          <span v-dompurify-html="getFormattedHtml(address.notes)"></span>
         </span>
       </div>
     </div>

frontend/src/services/ForestClientService.ts

@@ -100,3 +100,21 @@ export const getObfuscatedEmailLink = email => {
 export const getFormattedHtml = ((value: string) => {
   return value ? value.replace(/\n/g, '<br>') : '';
 });
+
+export const highlightMatch = (itemName: string, searchTerm: string): string => {
+  const trimmedSearchTerm = searchTerm.trim();
+  if (!trimmedSearchTerm) return itemName;
+
+  // Escape special characters in the search term
+  const escapedSearchTerm = trimmedSearchTerm.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+  const regex = new RegExp(`(${escapedSearchTerm})`, 'i');
+  const parts = itemName.split(regex);
+
+  return parts
+    .map(part =>
+      part.toLowerCase() === trimmedSearchTerm.toLowerCase()
+        ? `<span>${part}</span>` 
+        : `<strong>${part}</strong>`
+    )
+    .join('');
+};