[PM-4420] Browser Settings Changes (#6902)

* update copy on /settings and /options (behind feature flag)

* update copy on /excluded-domains (behind feature flag)

* use && two check both conditions for presence of lock() button

* fix typos in messages

* add description on auto-fill page

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

@@ -619,6 +619,9 @@
   "addLoginNotificationDesc": {
     "message": "Ask to add an item if one isn't found in your vault."
   },
+  "addLoginNotificationDescAlt": {
+    "message": "Ask to add an item if one isn't found in your vault. Applies to all logged in accounts."
+  },
   "showCardsCurrentTab": {
     "message": "Show cards on Tab page"
   },
@@ -651,6 +654,9 @@
   "changedPasswordNotificationDesc": {
     "message": "Ask to update a login's password when a change is detected on a website."
   },
+  "changedPasswordNotificationDescAlt": {
+    "message": "Ask to update a login's password when a change is detected on a website. Applies to all logged in accounts."
+  },
   "notificationChangeDesc": {
     "message": "Do you want to update this password in Bitwarden?"
   },
@@ -667,7 +673,10 @@
     "message": "Show context menu options"
   },
   "contextMenuItemDesc": {
-    "message": "Use a secondary click to access password generation and matching logins for the website. "
+    "message": "Use a secondary click to access password generation and matching logins for the website."
+  },
+  "contextMenuItemDescAlt": {
+    "message": "Use a secondary click to access password generation and matching logins for the website. Applies to all logged in accounts."
   },
   "defaultUriMatchDetection": {
     "message": "Default URI match detection",
@@ -682,6 +691,9 @@
   "themeDesc": {
     "message": "Change the application's color theme."
   },
+  "themeDescAlt": {
+    "message": "Change the application's color theme. Applies to all logged in accounts."
+  },
   "dark": {
     "message": "Dark",
     "description": "Dark color"
@@ -1006,6 +1018,9 @@
     "message": "Show auto-fill menu on form fields",
     "description": "Represents the message for allowing the user to enable the auto-fill overlay"
   },
+  "showAutoFillMenuOnFormFieldsDescAlt": {
+    "message": "Applies to all logged in accounts."
+  },
   "autofillOverlayVisibilityOff": {
     "message": "Off",
     "description": "Overlay setting select option for disabling autofill overlay"
@@ -1678,6 +1693,9 @@
   "excludedDomainsDesc": {
     "message": "Bitwarden will not ask to save login details for these domains. You must refresh the page for changes to take effect."
   },
+  "excludedDomainsDescAlt": {
+    "message": "Bitwarden will not ask to save login details for these domains for all logged in accounts. You must refresh the page for changes to take effect."
+  },
   "excludedDomainsInvalidDomain": {
     "message": "$DOMAIN$ is not a valid domain",
     "placeholders": {

apps/browser/src/popup/settings/autofill.component.html

@@ -42,6 +42,9 @@
             </option>
           </select>
         </div>
+        <div class="box-footer" *ngIf="accountSwitcherEnabled">
+          {{ "showAutoFillMenuOnFormFieldsDescAlt" | i18n }}
+        </div>
       </div>
     </div>
   </ng-container>

apps/browser/src/popup/settings/autofill.component.ts

@@ -11,6 +11,7 @@ import { DialogService } from "@bitwarden/components";
 
 import { AutofillOverlayVisibility } from "../../autofill/utils/autofill-overlay.enum";
 import { BrowserApi } from "../../platform/browser/browser-api";
+import { flagEnabled } from "../../platform/flags";
 
 @Component({
   selector: "app-autofill",
@@ -28,6 +29,7 @@ export class AutofillComponent implements OnInit {
   defaultUriMatch = UriMatchType.Domain;
   uriMatchOptions: any[];
   autofillKeyboardHelperText: string;
+  accountSwitcherEnabled = false;
 
   constructor(
     private stateService: StateService,
@@ -63,6 +65,8 @@ export class AutofillComponent implements OnInit {
       { name: i18nService.t("exact"), value: UriMatchType.Exact },
       { name: i18nService.t("never"), value: UriMatchType.Never },
     ];
+
+    this.accountSwitcherEnabled = flagEnabled("accountSwitching");
   }
 
   async ngOnInit() {

apps/browser/src/popup/settings/excluded-domains.component.html

@@ -16,6 +16,13 @@
   <main tabindex="-1">
     <div class="box">
       <div class="box-content">
+        <div class="box-footer" [ngStyle]="{ marginTop: '10px' }">
+          {{
+            accountSwitcherEnabled
+              ? ("excludedDomainsDescAlt" | i18n)
+              : ("excludedDomainsDesc" | i18n)
+          }}
+        </div>
         <ng-container *ngIf="excludedDomains">
           <div
             class="box-content-row box-content-row-multi"
@@ -79,9 +86,6 @@
           <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
         </button>
       </div>
-      <div class="box-footer">
-        {{ "excludedDomainsDesc" | i18n }}
-      </div>
     </div>
   </main>
 </form>

apps/browser/src/popup/settings/excluded-domains.component.ts

@@ -8,6 +8,7 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
+import { flagEnabled } from "../../platform/flags";
 
 interface ExcludedDomain {
   uri: string;
@@ -25,6 +26,7 @@ export class ExcludedDomainsComponent implements OnInit, OnDestroy {
   existingExcludedDomains: ExcludedDomain[] = [];
   currentUris: string[];
   loadCurrentUrisTimeout: number;
+  accountSwitcherEnabled = false;
 
   constructor(
     private stateService: StateService,
@@ -33,7 +35,9 @@ export class ExcludedDomainsComponent implements OnInit, OnDestroy {
     private broadcasterService: BroadcasterService,
     private ngZone: NgZone,
     private platformUtilsService: PlatformUtilsService
-  ) {}
+  ) {
+    this.accountSwitcherEnabled = flagEnabled("accountSwitching");
+  }
 
   async ngOnInit() {
     const savedDomains = await this.stateService.getNeverDomains();

apps/browser/src/popup/settings/options.component.html

@@ -74,7 +74,11 @@
         </div>
       </div>
       <div id="addlogin-notification-barHelp" class="box-footer">
-        {{ "addLoginNotificationDesc" | i18n }}
+        {{
+          accountSwitcherEnabled
+            ? ("addLoginNotificationDescAlt" | i18n)
+            : ("addLoginNotificationDesc" | i18n)
+        }}
       </div>
     </div>
     <div class="box">
@@ -93,7 +97,11 @@
         </div>
       </div>
       <div id="changedpass-notification-barHelp" class="box-footer">
-        {{ "changedPasswordNotificationDesc" | i18n }}
+        {{
+          accountSwitcherEnabled
+            ? ("changedPasswordNotificationDescAlt" | i18n)
+            : ("changedPasswordNotificationDesc" | i18n)
+        }}
       </div>
     </div>
     <div class="box">
@@ -109,7 +117,13 @@
           />
         </div>
       </div>
-      <div id="context-menuHelp" class="box-footer">{{ "contextMenuItemDesc" | i18n }}</div>
+      <div id="context-menuHelp" class="box-footer">
+        {{
+          accountSwitcherEnabled
+            ? ("contextMenuItemDescAlt" | i18n)
+            : ("contextMenuItemDesc" | i18n)
+        }}
+      </div>
     </div>
   </ng-container>
   <div class="box box-section-divider">
@@ -206,7 +220,9 @@
           </select>
         </div>
       </div>
-      <div id="themeHelp" class="box-footer">{{ "themeDesc" | i18n }}</div>
+      <div id="themeHelp" class="box-footer">
+        {{ accountSwitcherEnabled ? ("themeDescAlt" | i18n) : ("themeDesc" | i18n) }}
+      </div>
     </div>
   </ng-container>
 </main>

apps/browser/src/popup/settings/options.component.ts

@@ -8,6 +8,8 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 
+import { flagEnabled } from "../../platform/flags";
+
 @Component({
   selector: "app-options",
   templateUrl: "options.component.html",
@@ -34,6 +36,7 @@ export class OptionsComponent implements OnInit {
   showGeneral = true;
   showAutofill = true;
   showDisplay = true;
+  accountSwitcherEnabled = false;
 
   constructor(
     private messagingService: MessagingService,
@@ -71,6 +74,8 @@ export class OptionsComponent implements OnInit {
       { name: i18nService.t("autoFillOnPageLoadYes"), value: true },
       { name: i18nService.t("autoFillOnPageLoadNo"), value: false },
     ];
+
+    this.accountSwitcherEnabled = flagEnabled("accountSwitching");
   }
 
   async ngOnInit() {

apps/browser/src/popup/settings/settings.component.html

@@ -109,7 +109,9 @@
         />
       </div>
       <button
-        *ngIf="availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)"
+        *ngIf="
+          !accountSwitcherEnabled && availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)
+        "
         type="button"
         class="box-content-row box-content-row-flex text-default"
         appStopClick
@@ -163,6 +165,7 @@
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
+        *ngIf="!accountSwitcherEnabled"
         type="button"
         class="box-content-row box-content-row-flex text-default"
         appStopClick

apps/browser/src/popup/settings/settings.component.ts

@@ -36,6 +36,7 @@ import { DialogService } from "@bitwarden/components";
 import { SetPinComponent } from "../../auth/popup/components/set-pin.component";
 import { BiometricErrors, BiometricErrorTypes } from "../../models/biometricErrors";
 import { BrowserApi } from "../../platform/browser/browser-api";
+import { flagEnabled } from "../../platform/flags";
 import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
 
 import { AboutComponent } from "./about.component";
@@ -71,6 +72,7 @@ export class SettingsComponent implements OnInit {
   }>;
   supportsBiometric: boolean;
   showChangeMasterPass = true;
+  accountSwitcherEnabled = false;
 
   form = this.formBuilder.group({
     vaultTimeout: [null as number | null],
@@ -99,7 +101,9 @@ export class SettingsComponent implements OnInit {
     private userVerificationService: UserVerificationService,
     private dialogService: DialogService,
     private changeDetectorRef: ChangeDetectorRef
-  ) {}
+  ) {
+    this.accountSwitcherEnabled = flagEnabled("accountSwitching");
+  }
 
   async ngOnInit() {
     const maximumVaultTimeoutPolicy = this.policyService.get$(PolicyType.MaximumVaultTimeout);