PER-9943-cant-delete-sms-mfa

src/app/core/components/two-factor-auth/two-factor-auth.component.html

@@ -80,7 +80,7 @@
         *ngIf="form.get('contactInfo').errors?.maxlength"
         class="text-danger"
       >
-        The number exceeds the maximum length of 10 characters.
+        The number exceeds the maximum length of 11 characters.
       </small>
     </div>
     <div class="send-code-button button-container">

src/app/core/components/two-factor-auth/two-factor-auth.component.spec.ts

@@ -61,7 +61,31 @@ describe('TwoFactorAuthComponent', () => {
     instance.method = 'sms';
     instance.formatPhoneNumber('1234567890');
 
-    expect(instance.form.get('contactInfo').value).toBe('(123)  456 - 7890');
+    expect(instance.form.get('contactInfo').value).toBe('(123) 456-7890');
+  });
+
+  it('should format phone number with country code correctly', async () => {
+    const { instance } = await shallow.render();
+    instance.method = 'sms';
+    instance.formatPhoneNumber('+12345678900');
+
+    expect(instance.form.get('contactInfo').value).toBe('+1 (234) 567-8900');
+  });
+
+  it('should format international phone numbers correctly', async () => {
+    const { instance } = await shallow.render();
+    instance.method = 'sms';
+    instance.formatPhoneNumber('0040123456789');
+
+    expect(instance.form.get('contactInfo').value).toBe('+401 (234) 567-89');
+  });
+
+  it('should handle international phone numbers with country code correctly', async () => {
+    const { instance } = await shallow.render();
+    instance.method = 'sms';
+    instance.formatPhoneNumber('+40123456789');
+
+    expect(instance.form.get('contactInfo').value).toBe('+401 (234) 567-89');
   });
 
   it('should set codeSent to true when sendCode is called', async () => {

src/app/core/components/two-factor-auth/two-factor-auth.component.ts

@@ -55,11 +55,32 @@ export class TwoFactorAuthComponent implements OnInit {
 
   formatPhoneNumber(value: string) {
     let numbers = value.replace(/\D/g, '');
-    let char = { 0: '(', 3: ')  ', 6: ' - ' };
-    let formatted = '';
+    let countryCode = '';
+
+    if (numbers.startsWith('00')) {
+      const match = numbers.match(/^00(\d{1,3})/);
+      if (match) {
+        countryCode = `+${match[1]}`;
+        numbers = numbers.substring(match[0].length);
+      }
+    } else if (numbers.startsWith('1') && value.startsWith('+')) {
+      countryCode = '+1';
+      numbers = numbers.substring(1);
+    } else if (value.startsWith('+')) {
+      const match = numbers.match(/^(\d{1,3})/);
+      if (match) {
+        countryCode = `+${match[1]}`;
+        numbers = numbers.substring(match[1].length);
+      }
+    }
+
+    const char = { 0: '(', 3: ') ', 6: '-' };
+    let formatted = countryCode ? `${countryCode} ` : '';
     for (let i = 0; i < numbers.length; i++) {
       formatted += (char[i] || '') + numbers[i];
     }
+
+    // Update the form control without emitting events
     this.form.get('contactInfo').setValue(formatted, { emitEvent: false });
   }
 
@@ -119,7 +140,7 @@ export class TwoFactorAuthComponent implements OnInit {
     } else if (this.method === 'sms') {
       contactInfoControl.setValidators([
         Validators.required,
-        Validators.maxLength(17),
+        Validators.maxLength(18),
         Validators.minLength(17),
       ]);
     }