FIX #16956 TIME 0:10 control phone format with regex

src/frontend/app/visa/externalVisaWorkflow/createExternalUser/create-external-user.component.html

@@ -9,7 +9,7 @@
                 <mat-label>{{ 'lang.source' | translate }}</mat-label>
                 <mat-select #source [(ngModel)]="userOTP.sourceId" (selectionChange)="setCurrentSource($event.value)"
                     required>
-                    <mat-option *ngFor="let source of sources" [value]="source.id">
+                    <mat-option *ngFor="let source of sources" [value]="source.id" [title]="source.label">
                         {{ source.label }}
                     </mat-option>
                 </mat-select>
@@ -63,9 +63,9 @@
             </mat-form-field>
             <mat-form-field appearance="fill">
                 <mat-label>{{'lang.phoneNumber' | translate}}</mat-label>
-                <input matInput #phoneNumber type="text" [(ngModel)]="userOTP.phone"
-                    (ngModelChange)="formatPhone($event)" pattern="^((\+)33)[1-9](\d{2}){4}$" required>
-                <mat-hint align="end">{{ 'lang.frFormatPhone' | translate }}</mat-hint>
+                <input matInput #phoneNumber type="text" [(ngModel)]="userOTP.phone" placeholder="Exemple: +33621235684"
+                    [pattern]="getRegexPhone()" required>
+                <mat-hint align="start">{{ 'lang.frFormatPhone' | translate }}</mat-hint>
             </mat-form-field>
             <mat-form-field appearance="fill">
                 <mat-label>{{'lang.email' | translate}}</mat-label>

src/frontend/app/visa/externalVisaWorkflow/createExternalUser/create-external-user.component.ts

@@ -232,4 +232,24 @@ export class CreateExternalUserComponent implements OnInit {
         this.userOTP.phone = item.phone;
     }
 
+    getRegexPhone() {
+        // map country calling code with national number length
+        const phonesMap = {
+            '32': [8, 10],  // Belgium
+            '33': 9,        // France
+            '1' : 10,       // United States
+            '27': 9         // South Africa
+        };
+        const regex = Object.keys(phonesMap).reduce((phoneFormats: any [], countryCode: any) => {
+            const numberLength = phonesMap[countryCode];
+            if (Array.isArray(numberLength)) {
+                phoneFormats.push('(\\+' + countryCode + `[0-9]\{${numberLength[0]},${numberLength[1]}\})`);
+            } else {
+                phoneFormats.push('(\\+' + countryCode + `[0-9]\{${numberLength}\})`);
+            }
+            return phoneFormats;
+        }, []).join('|');
+        return new RegExp(`^(${regex})$`);
+    };
+
 }

src/lang/lang-fr.json

@@ -2501,7 +2501,7 @@
     "securityMode": "Mode d'envoi du code de sécurité",
     "sms": "SMS",
     "securityModeInfo": "L'utilisateur sera notifié par <b>courriel</b> et recevra un <b>code de sécurité</b> par <b>{{mode}}</b> au moment de son tour dans le circuit.",
-    "frFormatPhone": "Format: +33XXXXXXXXX",
+    "frFormatPhone": "Le numéro de téléphone doit commencer par l'indicatif de votre pays.",
     "youSign": "Yousign",
     "otp_visa_yousign": "Viseur (yousign)",
     "otp_sign_yousign": "Signataire (yousign)",