consolidate verification flow state into currentVerifyFlow

- Removed verifyingEmail, verifyingPhone, and formTitle properties
- Refactored component logic and template to use currentVerifyFlow exclusively
- Updated unit tests to align with new flow-based state model
- Improved maintainability and reduced risk of inconsistent state

Author: crisnicandrei

src/app/auth/components/verify/verify.component.html

@@ -1,6 +1,8 @@
 <ng-container
   *ngIf="
-    (verifyingPhone || showCaptchaForEmail) && captchaEnabled && !captchaPassed;
+    (currentVerifyFlow === 'phone' || showCaptchaForEmail) &&
+      captchaEnabled &&
+      !captchaPassed;
     else verifyFormElement
   "
 >
@@ -19,25 +21,27 @@
 <ng-template #verifyFormElement>
   <form [formGroup]="verifyForm" (ngSubmit)="onSubmit(verifyForm.value)">
     <h1 class="page-title">
-      {{ formTitle }}
+      {{
+        currentVerifyFlow === 'email' ? 'Verify Email' : 'Verify Phone Number'
+      }}
     </h1>
     <p class="verify-text">
       A verification code has been sent to your
-      {{ verifyingEmail ? 'email address' : 'mobile device' }}.
-      <span *ngIf="!verifyingEmail"
-        >Permanent only supports US and Canada numbers.</span
-      >
+      {{ currentVerifyFlow === 'email' ? 'email address' : 'mobile device' }}.
+      <span *ngIf="currentVerifyFlow === 'phone'">
+        Permanent only supports US and Canada numbers.
+      </span>
     </p>
     <p class="verify-text">Enter it below to continue.</p>
     <div class="input-container">
       <pr-form-input-glam
-        type="{{ verifyingEmail ? 'email' : 'tel' }}"
+        type="{{ currentVerifyFlow === 'email' ? 'email' : 'tel' }}"
         fieldName="token"
         [variant]="'dark'"
         placeholder="Code"
         [control]="verifyForm.controls['token']"
         [config]="{
-          autocomplete: verifyingEmail ? 'email' : 'tel',
+          autocomplete: currentVerifyFlow === 'email' ? 'email' : 'tel',
           autocorrect: 'off',
           autocapitalize: 'off',
           spellcheck: 'off'

src/app/auth/components/verify/verify.component.spec.ts

@@ -32,9 +32,7 @@ describe('VerifyComponent', () => {
     const config: TestModuleMetadata = cloneDeep(Testing.BASE_TEST_CONFIG);
 
     config.declarations.push(VerifyComponent);
-
     config.imports.push(SharedModule);
-
     config.providers.push(HttpService);
     config.providers.push(ApiService);
     config.providers.push(AccountService);
@@ -57,18 +55,14 @@ describe('VerifyComponent', () => {
     });
 
     config.providers.push(EventService);
-
-    // Define the re-captcha element as a custom element so it's only mocked out
     config.schemas = [CUSTOM_ELEMENTS_SCHEMA];
 
     await TestBed.configureTestingModule(config).compileComponents();
 
     httpMock = TestBed.get(HttpTestingController);
-
     accountService = TestBed.get(AccountService);
 
     const authResponse = new AuthResponse(authResponseData);
-
     accountService.setAccount(authResponse.getAccountVO());
     accountService.setArchive(authResponse.getArchiveVO());
 
@@ -79,89 +73,52 @@ describe('VerifyComponent', () => {
 
   afterEach(() => {
     accountService.clear();
-    // httpMock.verify();
   });
 
   it('should create', async () => {
     await init();
-
     expect(component).toBeTruthy();
   });
 
-  // it('should send email verification if sendEmail flag set', async () => {
-  //   await init(defaultAuthData, {sendEmail: true});
-  //   const req = httpMock.expectOne(`${environment.apiUrl}/auth/resendMailCreatedAccount`);
-  // });
-
-  // it('should send sms verification if sendSms flag set', async () => {
-  //   await init(defaultAuthData, {sendSms: true});
-  //   const req = httpMock.expectOne(`${environment.apiUrl}/auth/resendTextCreatedAccount`);
-  // });
-
   it('should require only email verification if only email unverified', async () => {
     await init(defaultAuthData, { sendEmail: true });
 
-    expect(component.verifyingEmail).toBeTruthy();
-    expect(component.needsEmail).toBeTruthy();
-    expect(component.needsPhone).toBeFalsy();
-
-    const account = accountService.getAccount();
-
-    expect(account.emailNeedsVerification()).toBeTrue();
-    expect(account.phoneNeedsVerification()).toBeFalse();
+    expect(component.currentVerifyFlow).toBe('email');
+    expect(component.needsEmail).toBeTrue();
+    expect(component.needsPhone).toBeFalse();
   });
 
   it('should require only phone verification if only phone unverified', async () => {
     const unverifiedPhoneData = require('@root/test/responses/auth.verify.unverifiedPhone.success.json');
     await init(unverifiedPhoneData, { sendSms: true });
 
-    expect(component.verifyingPhone).toBeTruthy();
-    expect(component.needsPhone).toBeTruthy();
-    expect(component.needsEmail).toBeFalsy();
+    expect(component.currentVerifyFlow).toBe('phone');
+    expect(component.needsPhone).toBeTrue();
+    expect(component.needsEmail).toBeFalse();
   });
 
   it('should require verification of both if both unverified, and verify email first', async () => {
     const unverifiedBothData = require('@root/test/responses/auth.verify.unverifiedBoth.success.json');
     await init(unverifiedBothData);
 
-    expect(component.verifyingEmail).toBeTrue();
-    expect(component.verifyingPhone).toBeFalse();
-
+    expect(component.currentVerifyFlow).toBe('email');
     expect(component.needsEmail).toBeTrue();
     expect(component.needsPhone).toBeTrue();
-
-    const account = accountService.getAccount();
-
-    expect(account.emailNeedsVerification()).toBeTrue();
-    expect(account.phoneNeedsVerification()).toBeTrue();
   });
 
   it('should verify email and then switch to phone verification if needed', async () => {
     const unverifiedBothData = require('@root/test/responses/auth.verify.unverifiedBoth.success.json');
-
-    // Remove query params -- let accountService drive both verifications
     await init(unverifiedBothData);
 
-    expect(component.verifyingEmail).toBeTrue();
-    expect(component.needsPhone).toBeTrue();
-    expect(component.needsEmail).toBeTrue();
-
     const account = accountService.getAccount();
-
     expect(account.emailNeedsVerification()).toBeTrue();
     expect(account.phoneNeedsVerification()).toBeTrue();
 
     component.onSubmit(component.verifyForm.value).then(() => {
       expect(component.waiting).toBeFalse();
-      expect(component.verifyingEmail).toBeFalse();
+      expect(component.currentVerifyFlow).toBe('phone');
       expect(component.needsEmail).toBeFalse();
       expect(component.needsPhone).toBeTrue();
-      expect(component.verifyingPhone).toBeTrue();
-
-      const updatedAccount = accountService.getAccount();
-
-      expect(updatedAccount.emailNeedsVerification()).toBeFalse();
-      expect(updatedAccount.phoneNeedsVerification()).toBeTrue();
     });
 
     expect(component.waiting).toBeTrue();
@@ -176,11 +133,6 @@ describe('VerifyComponent', () => {
     await init(unverifiedEmailData, { sendEmail: true });
 
     const finishSpy = spyOn(component, 'finish');
-
-    expect(component.verifyingEmail).toBeTruthy();
-    expect(component.needsPhone).toBeFalsy();
-    expect(component.needsEmail).toBeTruthy();
-
     component.onSubmit(component.verifyForm.value).then(() => {
       expect(component.waiting).toBeFalsy();
       expect(component.needsEmail).toBeFalsy();
@@ -200,12 +152,6 @@ describe('VerifyComponent', () => {
     await init(unverifiedPhoneData, { sendSms: true });
 
     const finishSpy = spyOn(component, 'finish');
-
-    expect(component.verifyingPhone).toBeTruthy();
-    expect(component.verifyingEmail).toBeFalsy();
-    expect(component.needsPhone).toBeTruthy();
-    expect(component.needsEmail).toBeFalsy();
-
     component.onSubmit(component.verifyForm.value).then(() => {
       expect(component.waiting).toBeFalsy();
       expect(component.needsEmail).toBeFalsy();
@@ -224,8 +170,6 @@ describe('VerifyComponent', () => {
     const unverifiedPhoneData = require('@root/test/responses/auth.verify.unverifiedPhone.success.json');
     await init(unverifiedPhoneData, { sendSms: true });
 
-    // Testing environments might not have the site key enabled,
-    // so force captchaEnabled to be true.
     component.captchaEnabled = true;
 
     expect(component.captchaPassed).toBeFalsy();
@@ -236,19 +180,4 @@ describe('VerifyComponent', () => {
     expect(component.captchaPassed).toBeTruthy();
     expect(component.canSendCodes('phone')).toBeTruthy();
   });
-
-  it('should set flow to email when only email is unverified', async () => {
-    await init(defaultAuthData, { sendEmail: true });
-
-    expect(component.currentVerifyFlow).toBe('email');
-    expect(component.formTitle).toBe('Verify Email');
-  });
-
-  it('should set flow to phone when only phone is unverified', async () => {
-    const unverifiedPhoneData = require('@root/test/responses/auth.verify.unverifiedPhone.success.json');
-    await init(unverifiedPhoneData, { sendSms: true });
-
-    expect(component.currentVerifyFlow).toBe('phone');
-    expect(component.formTitle).toBe('Verify Phone Number');
-  });
 });

src/app/auth/components/verify/verify.component.ts

@@ -24,12 +24,8 @@ import { C } from '@angular/cdk/keycodes';
 export class VerifyComponent implements OnInit {
   @HostBinding('class.pr-auth-form') classBinding = true;
   verifyForm: UntypedFormGroup;
-  formTitle = 'Verify Email';
   waiting: boolean;
 
-  verifyingEmail = true;
-  verifyingPhone = false;
-
   currentVerifyFlow: 'none' | 'email' | 'phone' = 'none';
 
   needsEmail: boolean;
@@ -110,15 +106,8 @@ export class VerifyComponent implements OnInit {
       }
     }
 
-    switch (this.currentVerifyFlow) {
-      case 'phone':
-        this.verifyingEmail = false;
-        this.verifyingPhone = true;
-        this.formTitle = 'Verify Phone Number';
-        break;
-      case 'none':
-        this.router.navigate(['/private'], { queryParamsHandling: 'preserve' });
-        break;
+    if (this.currentVerifyFlow === 'none') {
+      this.router.navigate(['/private'], { queryParamsHandling: 'preserve' });
     }
   }
 
@@ -135,12 +124,15 @@ export class VerifyComponent implements OnInit {
 
     let verifyPromise: Promise<AuthResponse>;
 
-    if (this.verifyingEmail) {
-      verifyPromise = this.accountService.verifyEmail(formValue.token);
-    } else if (this.verifyingPhone) {
-      verifyPromise = this.accountService.verifyPhone(formValue.token);
-    } else {
-      return;
+    switch (this.currentVerifyFlow) {
+      case 'email':
+        verifyPromise = this.accountService.verifyEmail(formValue.token);
+        break;
+      case 'phone':
+        verifyPromise = this.accountService.verifyPhone(formValue.token);
+        break;
+      default:
+        return;
     }
 
     return verifyPromise
@@ -163,9 +155,6 @@ export class VerifyComponent implements OnInit {
 
         if (this.needsPhone) {
           this.verifyForm.controls['token'].setValue('');
-          this.verifyingEmail = false;
-          this.verifyingPhone = true;
-          this.formTitle = 'Verify Phone Number';
         } else {
           this.finish();
         }
@@ -183,14 +172,19 @@ export class VerifyComponent implements OnInit {
     this.waiting = true;
 
     let resendPromise: Promise<AuthResponse>;
-    if (this.verifyingEmail) {
-      if (this.canSendCodes('email')) {
-        resendPromise = this.accountService.resendEmailVerification();
-      }
-    } else {
-      if (this.canSendCodes('phone')) {
-        resendPromise = this.accountService.resendPhoneVerification();
-      }
+    switch (this.currentVerifyFlow) {
+      case 'email':
+        if (this.canSendCodes('email')) {
+          resendPromise = this.accountService.resendEmailVerification();
+        }
+        break;
+      case 'phone':
+        if (this.canSendCodes('phone')) {
+          resendPromise = this.accountService.resendPhoneVerification();
+        }
+        break;
+      default:
+        return;
     }
 
     resendPromise
@@ -219,9 +213,8 @@ export class VerifyComponent implements OnInit {
       .then((response: ArchiveResponse) => {
         this.message.showMessage({
           message: `${
-            this.verifyingEmail ? 'Email' : 'Phone number'
+            this.currentVerifyFlow === 'email' ? 'Email' : 'Phone number'
           } verified.`,
-          style: 'success',
         });
         if (this.route.snapshot.queryParams.shareByUrl) {
           this.router