WEB-748: Improve email validation and fix translation namespace consi…

README.md

@@ -370,6 +370,20 @@ When `ENABLE_EXTERNAL_NATIONAL_ID_SYSTEM` is set to `true`, the following fields
 
 The user types the External ID value, and if it matches the configured regex, the system calls the external API to retrieve and auto-fill client information.
 
+#### External Email Validation Configuration
+
+The email validation regex can be customized using the `EXTERNAL_EMAIL_REGEX` environment variable.
+
+If not provided, the application falls back to the default built-in validation pattern.
+
+This allows deployments to enforce stricter or region-specific email validation rules without modifying source code.
+
+Example:
+
+```bash
+EXTERNAL_EMAIL_REGEX=^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
+```
+
 **Docker Compose with External National ID:**
 
 ```bash

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -230,9 +230,10 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
       <input matInput formControlName="emailAddress" />
-      @if (createClientForm.controls.emailAddress.errors?.email) {
+
+      @if (createClientForm.controls.emailAddress.hasError('pattern') && createClientForm.controls.emailAddress.value) {
         <mat-error>
-          {{ 'error.Email not valid' | translate }}
+          {{ 'errors.Email not valid' | translate }}
         </mat-error>
       }
     </mat-form-field>

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -7,6 +7,7 @@
  */
 
 /** Angular Imports */
+import { environment } from '../../../../environments/environment';
 import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, inject } from '@angular/core';
 import {
   UntypedFormBuilder,
@@ -114,6 +115,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
    * Creates the client form.
    */
   setClientForm() {
+    const emailRegex = environment.EXTERNAL_EMAIL_REGEX?.trim();
     this.createClientForm = this.formBuilder.group({
       officeId: [
         '',
@@ -133,7 +135,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
       mobileNo: [''],
       emailAddress: [
         '',
-        Validators.email
+        [Validators.pattern(emailRegex)]
       ],
       dateOfBirth: [''],
       clientTypeId: [''],

src/assets/env.js

@@ -111,4 +111,7 @@
   window['env']['oidcApiUrl'] = '';
   window['env']['oidcFrontUrl'] = '';
 
+  // External Email Validation Regex (optional override)
+  window['env']['EXTERNAL_EMAIL_REGEX'] = '';
+
 })(this);

src/assets/env.template.js

@@ -120,4 +120,7 @@
   window['env']['oidcClientId'] = '$FINERACT_PLUGIN_OIDC_CLIENT_ID';
   window['env']['oidcApiUrl'] = '$FINERACT_PLUGIN_OIDC_API_URL';
   window['env']['oidcFrontUrl'] = '$FINERACT_PLUGIN_OIDC_FRONTEND_URL';
+
+  // External Email Validation Regex (optional override)
+  window['env']['EXTERNAL_EMAIL_REGEX'] = '$EXTERNAL_EMAIL_REGEX';
 })(this);

src/environments/environment.prod.ts

@@ -16,6 +16,7 @@ const provider = loadedEnv['apiProvider'];
 
 export const environment = {
   production: true,
+  EXTERNAL_EMAIL_REGEX: loadedEnv.EXTERNAL_EMAIL_REGEX || '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
   version: env.mifos_x.version,
   hash: env.mifos_x.hash,
   // For connecting to server running elsewhere update the tenant identifier

src/environments/environment.ts

@@ -19,6 +19,7 @@ const loadedEnv = window.env || {};
 
 export const environment = {
   production: false,
+  EXTERNAL_EMAIL_REGEX: loadedEnv.EXTERNAL_EMAIL_REGEX || '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
   version: env.mifos_x.version,
   hash: env.mifos_x.hash,
   // For connecting to server running elsewhere update the tenant identifier