Merge pull request #503 from PermanentOrg/PER-9943-cant-delete-sms-mfa

PER-9943-cant-delete-sms-mfa

Author: crisnicandrei

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {
   UntypedFormBuilder,
+  UntypedFormControl,
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
@@ -50,16 +51,38 @@ export class TwoFactorAuthComponent implements OnInit {
   async ngOnInit() {
     this.loading = true;
     this.methods = await this.api.idpuser.getTwoFactorMethods();
+
     this.loading = false;
   }
 
   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,13 +142,22 @@ export class TwoFactorAuthComponent implements OnInit {
     } else if (this.method === 'sms') {
       contactInfoControl.setValidators([
         Validators.required,
-        Validators.maxLength(17),
-        Validators.minLength(17),
+        this.smsLengthValidator(),
       ]);
     }
     contactInfoControl.updateValueAndValidity();
   }
 
+  private smsLengthValidator() {
+    return (control: UntypedFormControl) => {
+      const value = control.value || '';
+      if (value.length === 14 || value.length === 18 || value.length === 17) {
+        return null;
+      }
+      return { invalidSmsLength: true };
+    };
+  }
+
   hasMethod(method: string): boolean {
     return this.methods.some((m) => m.method === method);
   }