[PM-9839] Extension - Safari - Disable Account Switching (#10364)

* only show account switching when enableAccountSwitching is true

* update the title of the account switcher component

* only show "Lock All" when more than one account is present

* implement account switching restrictions on non-extension refresh page

apps/browser/src/_locales/en/messages.json

@@ -4093,5 +4093,8 @@
   },
   "bitwardenNewLookDesc": {
     "message": "It's easier and more intuitive than ever to autofill and search from the Vault tab. Take a look around!"
+  },
+  "accountActions": {
+    "message": "Account actions"
   }
 }

apps/browser/src/auth/popup/account-switching/account-switcher.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="extensionRefreshFlag">
   <popup-page [loading]="loading">
-    <popup-header slot="header" pageTitle="{{ 'switchAccounts' | i18n }}" showBackButton>
+    <popup-header slot="header" pageTitle="{{ 'accountActions' | i18n }}" showBackButton>
       <ng-container slot="end">
         <app-pop-out></app-pop-out>
         <app-current-account></app-current-account>
@@ -8,9 +8,9 @@
     </popup-header>
 
     <ng-container *ngIf="availableAccounts$ | async as availableAccounts">
-      <bit-section>
+      <bit-section [disableMargin]="!enableAccountSwitching">
         <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
-          <div *ngIf="availableAccount.isActive" class="tw-mb-6">
+          <div *ngIf="availableAccount.isActive" [ngClass]="{ 'tw-mb-6': enableAccountSwitching }">
             <auth-account
               [account]="availableAccount"
               [extensionRefreshFlag]="extensionRefreshFlag"
@@ -18,17 +18,19 @@
             ></auth-account>
           </div>
 
-          <bit-section-header *ngIf="isFirst">
+          <ng-container *ngIf="enableAccountSwitching">
-            <h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2>
+            <bit-section-header *ngIf="isFirst">
-          </bit-section-header>
+              <h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2>
+            </bit-section-header>
 
-          <div *ngIf="!availableAccount.isActive">
+            <div *ngIf="!availableAccount.isActive">
-            <auth-account
+              <auth-account
-              [account]="availableAccount"
+                [account]="availableAccount"
-              [extensionRefreshFlag]="extensionRefreshFlag"
+                [extensionRefreshFlag]="extensionRefreshFlag"
-              (loading)="loading = $event"
+                (loading)="loading = $event"
-            ></auth-account>
+              ></auth-account>
-          </div>
+            </div>
+          </ng-container>
         </ng-container>
 
         <!--
@@ -78,7 +80,7 @@
             {{ "logOut" | i18n }}
           </button>
         </bit-item>
-        <bit-item>
+        <bit-item *ngIf="showLockAll$ | async">
           <button type="button" bit-item-content (click)="lockAll()">
             <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i>
             {{ "lockAll" | i18n }}
@@ -114,15 +116,17 @@
                 (loading)="loading = $event"
               ></auth-account>
             </li>
-            <div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
+            <ng-container *ngIf="enableAccountSwitching">
-              {{ "availableAccounts" | i18n }}
+              <div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
-            </div>
+                {{ "availableAccounts" | i18n }}
-            <li *ngIf="!availableAccount.isActive" role="option">
+              </div>
-              <auth-account
+              <li *ngIf="!availableAccount.isActive" role="option">
-                [account]="availableAccount"
+                <auth-account
-                (loading)="loading = $event"
+                  [account]="availableAccount"
-              ></auth-account>
+                  (loading)="loading = $event"
-            </li>
+                ></auth-account>
+              </li>
+            </ng-container>
           </ng-container>
         </ul>
         <!--
@@ -166,6 +170,7 @@
             type="button"
             class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
             (click)="lockAll()"
+            *ngIf="showLockAll$ | async"
           >
             <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>
             {{ "lockAll" | i18n }}

apps/browser/src/auth/popup/account-switching/account-switcher.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule, Location } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
-import { Subject, firstValueFrom, map, of, switchMap, takeUntil } from "rxjs";
+import { Subject, firstValueFrom, map, of, startWith, switchMap, takeUntil } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
@@ -22,6 +22,7 @@ import {
   SectionHeaderComponent,
 } from "@bitwarden/components";
 
+import { enableAccountSwitching } from "../../../platform/flags";
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
 import { HeaderComponent } from "../../../platform/popup/header.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -57,6 +58,7 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
   loading = false;
   activeUserCanLock = false;
   extensionRefreshFlag = false;
+  enableAccountSwitching = true;
 
   constructor(
     private accountSwitcherService: AccountSwitcherService,
@@ -87,7 +89,24 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
     ),
   );
 
+  readonly showLockAll$ = this.availableAccounts$.pipe(
+    startWith([]),
+    map((accounts) => accounts.filter((a) => !a.isActive)),
+    switchMap((accounts) => {
+      // If account switching is disabled, don't show the lock all button
+      // as only one account should be shown.
+      if (!enableAccountSwitching()) {
+        return of(false);
+      }
+
+      // When there are an inactive accounts provide the option to lock all accounts
+      // Note: "Add account" is counted as an inactive account, so check for more than one account
+      return of(accounts.length > 1);
+    }),
+  );
+
   async ngOnInit() {
+    this.enableAccountSwitching = enableAccountSwitching();
     this.extensionRefreshFlag = await this.configService.getFeatureFlag(
       FeatureFlag.ExtensionRefresh,
     );