[PM-11405] Account Management: Prevent a verified user from changing their email address

apps/web/src/app/auth/settings/account/account.component.html

@@ -3,7 +3,7 @@
 <bit-container>
   <app-profile></app-profile>
 
-  <div *ngIf="showChangeEmail" class="tw-mt-16">
+  <div *ngIf="showChangeEmail$ | async" class="tw-mt-16">
     <h1 bitTypography="h1">{{ "changeEmail" | i18n }}</h1>
     <app-change-email></app-change-email>
   </div>

apps/web/src/app/auth/settings/account/account.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { lastValueFrom, map, Observable, of, switchMap } from "rxjs";
+import { combineLatest, from, lastValueFrom, map, Observable } from "rxjs";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -21,7 +21,7 @@
   @ViewChild("deauthorizeSessionsTemplate", { read: ViewContainerRef, static: true })
   deauthModalRef: ViewContainerRef;
 
-  showChangeEmail = true;
+  showChangeEmail$: Observable<boolean>;
   showPurgeVault$: Observable<boolean>;
 
   constructor(
@@ -33,21 +33,36 @@
   ) {}
 
   async ngOnInit() {
-    this.showChangeEmail = await this.userVerificationService.hasMasterPassword();
-    this.showPurgeVault$ = this.configService
-      .getFeatureFlag$(FeatureFlag.AccountDeprovisioning)
-      .pipe(
-        switchMap((isAccountDeprovisioningEnabled) =>
-          isAccountDeprovisioningEnabled
-            ? this.organizationService.organizations$.pipe(
-                map(
-                  (organizations) =>
-                    !organizations.some((o) => o.userIsManagedByOrganization === true),
-                ),
-              )
-            : of(true),
-        ),
-      );
+    const isAccountDeprovisioningEnabled$ = this.configService.getFeatureFlag$(
+      FeatureFlag.AccountDeprovisioning,
+    );
+
+    const userIsManagedByOrganization$ = this.organizationService.organizations$.pipe(
+      map((organizations) => organizations.some((o) => o.userIsManagedByOrganization === true)),
+    );
+
+    const hasMasterPassword$ = from(this.userVerificationService.hasMasterPassword());
+
+    this.showChangeEmail$ = combineLatest([
+      hasMasterPassword$,
+      isAccountDeprovisioningEnabled$,
+      userIsManagedByOrganization$,
+    ]).pipe(
+      map(
+        ([hasMasterPassword, isAccountDeprovisioningEnabled, userIsManagedByOrganization]) =>
+          hasMasterPassword && (!isAccountDeprovisioningEnabled || !userIsManagedByOrganization),
+      ),
+    );
+
+    this.showPurgeVault$ = combineLatest([
+      isAccountDeprovisioningEnabled$,
+      userIsManagedByOrganization$,
+    ]).pipe(
+      map(
+        ([isAccountDeprovisioningEnabled, userIsManagedByOrganization]) =>
+          !isAccountDeprovisioningEnabled || !userIsManagedByOrganization,
+      ),
+    );
   }
 
   async deauthorizeSessions() {