fix(FSADT1-1086): Email Address Pattern Found

- Obfuscated email #3

frontend/src/assets/styles/global.scss

@@ -1780,3 +1780,17 @@ cds-header-panel[expanded] {
     max-width: calc(100vw - 21rem);
   }
 }
+
+.link-button {
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  color: var(--light-theme-link-link-primary, #005cb8);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.link-button:hover {
+  color: var(--light-theme-link-link-primary-hover, #00478f);
+}

frontend/src/components/MainHeaderComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watchEffect, getCurrentInstance } from "vue";
-import { getMailtoLink, getObfuscatedEmail } from "@/services/ForestClientService";
+import { openMailtoLink, getObfuscatedEmail } from "@/services/ForestClientService";
 
 // Carbon
 import "@carbon/web-components/es/components/button/index";
@@ -243,7 +243,9 @@ const adminEmail = "[email protected]";
     <cds-modal-body>
       <p>
         Can’t proceed with your application? Let us know by emailing your issue to 
-        <a v-bind:href="getMailtoLink(adminEmail)" v-bind:innerHTML="getObfuscatedEmail(adminEmail)"></a>
+        <button class="link-button" @click="openMailtoLink(adminEmail)" aria-label="Contact Admin via Email">
+          <span v-bind:innerHTML="getObfuscatedEmail(adminEmail)"></span>
+        </button>
       </p>
     </cds-modal-body>
   </cds-modal>

frontend/src/pages/bceidform/BusinessInformationWizardStep.vue

@@ -24,7 +24,7 @@ import { submissionValidation } from "@/helpers/validators/SubmissionValidators"
 import { retrieveClientType, exportAddress } from "@/helpers/DataConversors";
 // Importing session
 import ForestClientUserSession from "@/helpers/ForestClientUserSession";
-import { getEnumKeyByEnumValue, getMailtoLink, getObfuscatedEmail } from "@/services/ForestClientService";
+import { getEnumKeyByEnumValue, openMailtoLink, getObfuscatedEmail } from "@/services/ForestClientService";
 
 //Defining the props and emiter to reveice the data and emit an update
 const props = defineProps<{ data: FormDataDto; active: boolean }>();
@@ -299,7 +299,9 @@ const bcRegistryEmail = "[email protected]";
             <li class="body-compact-01">
               If your name isn’t there, call BC Registry toll free at
               <a href="tel:18775261526">1-877-526-1526</a> or email them at
-              <a v-bind:href="getMailtoLink(bcRegistryEmail)" v-bind:innerHTML="getObfuscatedEmail(bcRegistryEmail)"></a>.
+              <button class="link-button" @click="openMailtoLink(bcRegistryEmail)" aria-label="Contact BC Registry via Email">
+                <span v-bind:innerHTML="getObfuscatedEmail(bcRegistryEmail)"></span>
+              </button>.
             </li>
           </ol>
         </div>

frontend/src/services/ForestClientService.ts

@@ -50,19 +50,18 @@ export const getEnumKeyByEnumValue = <T extends Record<string, any>>(enumObject:
   return key ? String(key) : "Unknown";
 };
 
-const isValidEmail = (email) => {
-  const emailRegex: RegExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
-  return emailRegex.test(email);
-};
-
 export const getObfuscatedEmail = email => {
   const obfuscatedEmail = email.replace('@', '&#64;');
   return obfuscatedEmail;
 };
 
 export const getMailtoLink = email => {
-  const isValid = isValidEmail(email);
-  const sanitizedEmail = isValid ? email : '';
-  const encodedEmail = encodeURIComponent(sanitizedEmail);
+  const encodedEmail = encodeURIComponent(email);
   return 'mailto:' + encodedEmail;
 };
+
+export const openMailtoLink = (email) => {
+  const encodedEmail = encodeURIComponent(email);
+  const mailtoLink = 'mailto:' +  encodedEmail;
+  location.assign(mailtoLink);
+}