Merge branch 'autofill/pm-8518-autofill-scripts-do-not-inject-into-sub-frames-on-install' into autofill/pm-5189-fix-issues-present-with-inline-menu-rendering-in-iframes

2025-12-16 00:03:56 +00:00 · 2024-06-04 17:48:22 -05:00
parent 4ecbfb3d49 a47e108533
commit 02bbb41148
79 changed files with 2009 additions and 1319 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -185,7 +185,7 @@
    "message": "Continue to browser extension store?"
  },
  "continueToBrowserExtensionStoreDesc": {
-    "message": "Help others find out if Bitwarden is right for them. Visit your browser's extension store and leave a rating now."    
+    "message": "Help others find out if Bitwarden is right for them. Visit your browser's extension store and leave a rating now."
  },
  "changeMasterPasswordOnWebConfirmation": {
    "message": "You can change your master password on the Bitwarden web app."
@@ -389,6 +389,9 @@
  "favorite": {
    "message": "Favorite"
  },
+  "unfavorite": {
+    "message": "Unfavorite"
+  },
  "notes": {
    "message": "Notes"
  },
@@ -410,6 +413,9 @@
  "launch": {
    "message": "Launch"
  },
+  "launchWebsite": {
+    "message": "Launch website"
+  },
  "website": {
    "message": "Website"
  },
@@ -822,7 +828,7 @@
  },
  "exportPasswordDescription": {
    "message": "This password will be used to export and import this file"
-  },  
+  },
  "accountRestrictedOptionDescription": {
    "message": "Use your account encryption key, derived from your account's username and Master Password, to encrypt the export and restrict import to only the current Bitwarden account."
  },
@@ -1431,6 +1437,15 @@
  "collections": {
    "message": "Collections"
  },
+  "nCollections": {
+    "message": "$COUNT$ collections",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "2"
+      }
+    }
+  },
  "favorites": {
    "message": "Favorites"
  },
@@ -1660,6 +1675,9 @@
  "autoFillAndSave": {
    "message": "Auto-fill and save"
  },
+  "fillAndSave": {
+    "message": "Fill and save"
+  },
  "autoFillSuccessAndSavedUri": {
    "message": "Item auto-filled and URI saved"
  },
@@ -3281,7 +3299,7 @@
  "clearFiltersOrTryAnother": {
    "message": "Clear filters or try another search term"
  },
-  "copyInfo": {
+  "copyInfoLabel": {
    "message": "Copy info, $ITEMNAME$",
    "description": "Aria label for a button that opens a menu with options to copy information from an item.",
    "placeholders": {
@@ -3291,7 +3309,37 @@
      }
    }
  },
-  "moreOptions": {
+  "copyInfoTitle": {
+    "message": "Copy info - $ITEMNAME$",
+    "description": "Title for a button that opens a menu with options to copy information from an item.",
+    "placeholders": {
+      "itemname": {
+        "content": "$1",
+        "example": "Secret Item"
+      }
+    }
+  },
+  "copyNoteLabel": {
+    "message": "Copy Note, $ITEMNAME$",
+    "description": "Aria label for a button copies a note to the clipboard.",
+    "placeholders": {
+      "itemname": {
+        "content": "$1",
+        "example": "Secret Note Item"
+      }
+    }
+  },
+  "copyNoteTitle": {
+    "message": "Copy Note - $ITEMNAME$",
+    "description": "Title for a button copies a note to the clipboard.",
+    "placeholders": {
+      "itemname": {
+        "content": "$1",
+        "example": "Secret Note Item"
+      }
+    }
+  },
+  "moreOptionsLabel": {
    "message": "More options, $ITEMNAME$",
    "description": "Aria label for a button that opens a menu with more options for an item.",
    "placeholders": {
@@ -3301,6 +3349,38 @@
      }
    }
  },
+  "moreOptionsTitle": {
+    "message": "More options - $ITEMNAME$",
+    "description": "Title for a button that opens a menu with more options for an item.",
+    "placeholders": {
+      "itemname": {
+        "content": "$1",
+        "example": "Secret Item"
+      }
+    }
+  },
+  "viewItemTitle": {
+    "message": "View item - $ITEMNAME$",
+    "description": "Title for a link that opens a view for an item.",
+    "placeholders": {
+      "itemname": {
+        "content": "$1",
+        "example": "Secret Item"
+      }
+    }
+  },
+  "assignCollections": {
+    "message": "Assign collections"
+  },
+  "copyEmail": {
+    "message": "Copy email"
+  },
+  "copyPhone": {
+    "message": "Copy phone"
+  },
+  "copyAddress": {
+    "message": "Copy address"
+  },
  "adminConsole": {
    "message": "Admin Console"
  },
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
@@ -4,7 +4,7 @@
  [title]="'autofillSuggestions' | i18n"
  [showRefresh]="showRefresh"
  (onRefresh)="refreshCurrentTab()"
-  showAutoFill
+  showAutofillButton
 ></app-vault-list-items-container>
 <ng-container *ngIf="showEmptyAutofillTip$ | async">
  <bit-section>
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
@@ -3,12 +3,12 @@ import { Component } from "@angular/core";
 import { combineLatest, map, Observable } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { IconButtonModule, SectionComponent, TypographyModule } from "@bitwarden/components";

 import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
 import { PopupSectionHeaderComponent } from "../../../../../platform/popup/popup-section-header/popup-section-header.component";
 import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
+import { PopupCipherView } from "../../../views/popup-cipher.view";
 import { VaultListItemsContainerComponent } from "../vault-list-items-container/vault-list-items-container.component";

@Component({
@@ -30,7 +30,7 @@ export class AutofillVaultListItemsComponent {
   * The list of ciphers that can be used to autofill the current page.
   * @protected
   */
-  protected autofillCiphers$: Observable<CipherView[]> =
+  protected autofillCiphers$: Observable<PopupCipherView[]> =
    this.vaultPopupItemsService.autoFillCiphers$;

  /**
--- a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
@@ -0,0 +1,77 @@
+<bit-item-action *ngIf="cipher.type === CipherType.Login">
+  <button
+    type="button"
+    bitIconButton="bwi-clone"
+    size="small"
+    [attr.aria-label]="'copyInfoLabel' | i18n: cipher.name"
+    [title]="'copyInfoTitle' | i18n: cipher.name"
+    [bitMenuTriggerFor]="loginOptions"
+  ></button>
+  <bit-menu #loginOptions>
+    <button type="button" bitMenuItem appCopyField="username" [cipher]="cipher">
+      {{ "copyUsername" | i18n }}
+    </button>
+    <button type="button" bitMenuItem appCopyField="password" [cipher]="cipher">
+      {{ "copyPassword" | i18n }}
+    </button>
+    <button type="button" bitMenuItem appCopyField="totp" [cipher]="cipher">
+      {{ "copyVerificationCode" | i18n }}
+    </button>
+  </bit-menu>
+</bit-item-action>
+
+<bit-item-action *ngIf="cipher.type === CipherType.Card">
+  <button
+    type="button"
+    bitIconButton="bwi-clone"
+    size="small"
+    [attr.aria-label]="'copyInfoLabel' | i18n: cipher.name"
+    [title]="'copyInfoTitle' | i18n: cipher.name"
+    [bitMenuTriggerFor]="cardOptions"
+  ></button>
+  <bit-menu #cardOptions>
+    <button type="button" bitMenuItem appCopyField="cardNumber" [cipher]="cipher">
+      {{ "copyNumber" | i18n }}
+    </button>
+    <button type="button" bitMenuItem appCopyField="securityCode" [cipher]="cipher">
+      {{ "copySecurityCode" | i18n }}
+    </button>
+  </bit-menu>
+</bit-item-action>
+
+<bit-item-action *ngIf="cipher.type === CipherType.Identity">
+  <button
+    type="button"
+    bitIconButton="bwi-clone"
+    size="small"
+    [attr.aria-label]="'copyInfoLabel' | i18n: cipher.name"
+    [title]="'copyInfoTitle' | i18n: cipher.name"
+    [bitMenuTriggerFor]="identityOptions"
+  ></button>
+  <bit-menu #identityOptions>
+    <button type="button" bitMenuItem appCopyField="username" [cipher]="cipher">
+      {{ "copyUsername" | i18n }}
+    </button>
+    <button type="button" bitMenuItem appCopyField="email" [cipher]="cipher">
+      {{ "copyEmail" | i18n }}
+    </button>
+    <button type="button" bitMenuItem appCopyField="phone" [cipher]="cipher">
+      {{ "copyPhone" | i18n }}
+    </button>
+    <button type="button" bitMenuItem appCopyField="address" [cipher]="cipher">
+      {{ "copyAddress" | i18n }}
+    </button>
+  </bit-menu>
+</bit-item-action>
+
+<bit-item-action *ngIf="cipher.type === CipherType.SecureNote">
+  <button
+    type="button"
+    bitIconButton="bwi-clone"
+    size="small"
+    [attr.aria-label]="'copyNoteLabel' | i18n: cipher.name"
+    [title]="'copyNoteTitle' | i18n: cipher.name"
+    appCopyField="secureNote"
+    [cipher]="cipher"
+  ></button>
+</bit-item-action>
--- a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { IconButtonModule, ItemModule, MenuModule } from "@bitwarden/components";
+import { CopyCipherFieldDirective } from "@bitwarden/vault";
+
+@Component({
+  standalone: true,
+  selector: "app-item-copy-actions",
+  templateUrl: "item-copy-actions.component.html",
+  imports: [
+    ItemModule,
+    IconButtonModule,
+    JslibModule,
+    MenuModule,
+    CommonModule,
+    CopyCipherFieldDirective,
+  ],
+})
+export class ItemCopyActionsComponent {
+  @Input() cipher: CipherView;
+
+  protected CipherType = CipherType;
+
+  constructor() {}
+}
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
@@ -0,0 +1,36 @@
+<bit-item-action>
+  <button
+    type="button"
+    bitIconButton="bwi-ellipsis-v"
+    size="small"
+    [attr.aria-label]="'moreOptionsLabel' | i18n: cipher.name"
+    [title]="'moreOptionsTitle' | i18n: cipher.name"
+    [bitMenuTriggerFor]="moreOptions"
+  ></button>
+  <bit-menu #moreOptions>
+    <ng-container *ngIf="isLogin && !hideLoginOptions">
+      <ng-container *ngIf="autofillAllowed$ | async">
+        <button type="button" bitMenuItem>
+          {{ "autofill" | i18n }}
+        </button>
+        <button type="button" bitMenuItem *ngIf="canEdit">
+          {{ "fillAndSave" | i18n }}
+        </button>
+      </ng-container>
+      <button type="button" bitMenuItem *ngIf="this.canLaunch" (click)="launchCipher()">
+        {{ "launchWebsite" | i18n }}
+      </button>
+    </ng-container>
+    <button type="button" bitMenuItem (click)="toggleFavorite()">
+      {{ favoriteText | i18n }}
+    </button>
+    <ng-container *ngIf="canEdit">
+      <a routerLink="" bitMenuItem (click)="clone()">
+        {{ "clone" | i18n }}
+      </a>
+      <button type="button" bitMenuItem>
+        {{ "assignCollections" | i18n }}
+      </button>
+    </ng-container>
+  </bit-menu>
+</bit-item-action>
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
@@ -0,0 +1,122 @@
+import { CommonModule } from "@angular/common";
+import { booleanAttribute, Component, Input } from "@angular/core";
+import { Router, RouterModule } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CipherRepromptType, CipherType } from "@bitwarden/common/vault/enums";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { DialogService, IconButtonModule, ItemModule, MenuModule } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
+
+import { BrowserApi } from "../../../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
+import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
+
+@Component({
+  standalone: true,
+  selector: "app-item-more-options",
+  templateUrl: "./item-more-options.component.html",
+  imports: [ItemModule, IconButtonModule, MenuModule, CommonModule, JslibModule, RouterModule],
+})
+export class ItemMoreOptionsComponent {
+  @Input({
+    required: true,
+  })
+  cipher: CipherView;
+
+  /**
+   * Flag to hide the login specific menu options. Used for login items that are
+   * already in the autofill list suggestion.
+   */
+  @Input({ transform: booleanAttribute })
+  hideLoginOptions: boolean;
+
+  protected autofillAllowed$ = this.vaultPopupItemsService.autofillAllowed$;
+
+  constructor(
+    private cipherService: CipherService,
+    private vaultPopupItemsService: VaultPopupItemsService,
+    private passwordRepromptService: PasswordRepromptService,
+    private dialogService: DialogService,
+    private router: Router,
+  ) {}
+
+  get canEdit() {
+    return this.cipher.edit;
+  }
+
+  get isLogin() {
+    return this.cipher.type === CipherType.Login;
+  }
+
+  get favoriteText() {
+    return this.cipher.favorite ? "unfavorite" : "favorite";
+  }
+
+  /**
+   * Determines if the login cipher can be launched in a new browser tab.
+   */
+  get canLaunch() {
+    return this.isLogin && this.cipher.login.canLaunch;
+  }
+
+  /**
+   * Launches the login cipher in a new browser tab.
+   */
+  async launchCipher() {
+    if (!this.canLaunch) {
+      return;
+    }
+
+    await this.cipherService.updateLastLaunchedDate(this.cipher.id);
+
+    await BrowserApi.createNewTab(this.cipher.login.launchUri);
+
+    if (BrowserPopupUtils.inPopup(window)) {
+      BrowserApi.closePopup(window);
+    }
+  }
+
+  /**
+   * Toggles the favorite status of the cipher and updates it on the server.
+   */
+  async toggleFavorite() {
+    this.cipher.favorite = !this.cipher.favorite;
+    const encryptedCipher = await this.cipherService.encrypt(this.cipher);
+    await this.cipherService.updateWithServer(encryptedCipher);
+  }
+
+  /**
+   * Navigate to the clone cipher page with the current cipher as the source.
+   * A password reprompt is attempted if the cipher requires it.
+   * A confirmation dialog is shown if the cipher has FIDO2 credentials.
+   */
+  async clone() {
+    if (
+      this.cipher.reprompt === CipherRepromptType.Password &&
+      !(await this.passwordRepromptService.showPasswordPrompt())
+    ) {
+      return;
+    }
+
+    if (this.cipher.login?.hasFido2Credentials) {
+      const confirmed = await this.dialogService.openSimpleDialog({
+        title: { key: "passkeyNotCopied" },
+        content: { key: "passkeyNotCopiedAlert" },
+        type: "info",
+      });
+
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    await this.router.navigate(["/clone-cipher"], {
+      queryParams: {
+        cloneMode: true,
+        cipherId: this.cipher.id,
+      },
+    });
+  }
+}
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -13,31 +13,31 @@
  </popup-section-header>
  <bit-item-group>
    <bit-item *ngFor="let cipher of ciphers">
-      <a bit-item-content [routerLink]="['/view-cipher']" [queryParams]="{ cipherId: cipher.id }">
+      <a
+        bit-item-content
+        [routerLink]="['/view-cipher']"
+        [queryParams]="{ cipherId: cipher.id }"
+        [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
+      >
        <app-vault-icon slot="start" [cipher]="cipher"></app-vault-icon>
        {{ cipher.name }}
+        <i
+          class="bwi bwi-sm"
+          *ngIf="cipher.organizationId"
+          [ngClass]="cipher.orgIcon"
+          [appA11yTitle]="orgIconTooltip(cipher)"
+        ></i>
        <span slot="secondary">{{ cipher.subTitle }}</span>
      </a>
      <ng-container slot="end">
-        <bit-item-action *ngIf="showAutoFill">
+        <bit-item-action *ngIf="showAutofillButton">
          <button type="button" bitBadge variant="primary">{{ "autoFill" | i18n }}</button>
        </bit-item-action>
-        <bit-item-action>
-          <button
-            type="button"
-            bitIconButton="bwi-clone"
-            size="small"
-            [attr.aria-label]="'copyInfo' | i18n: cipher.name"
-          ></button>
-        </bit-item-action>
-        <bit-item-action>
-          <button
-            type="button"
-            bitIconButton="bwi-ellipsis-v"
-            size="small"
-            [attr.aria-label]="'moreOptions' | i18n: cipher.name"
-          ></button>
-        </bit-item-action>
+        <app-item-copy-actions [cipher]="cipher"></app-item-copy-actions>
+        <app-item-more-options
+          [cipher]="cipher"
+          [hideLoginOptions]="showAutofillButton"
+        ></app-item-more-options>
      </ng-container>
    </bit-item>
  </bit-item-group>
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
@@ -3,7 +3,7 @@ import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angul
 import { RouterLink } from "@angular/router";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
  BadgeModule,
  ButtonModule,
@@ -14,6 +14,9 @@ import {
 } from "@bitwarden/components";

 import { PopupSectionHeaderComponent } from "../../../../../platform/popup/popup-section-header/popup-section-header.component";
+import { PopupCipherView } from "../../../views/popup-cipher.view";
+import { ItemCopyActionsComponent } from "../item-copy-action/item-copy-actions.component";
+import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options.component";

@Component({
  imports: [
@@ -27,6 +30,8 @@ import { PopupSectionHeaderComponent } from "../../../../../platform/popup/popup
    JslibModule,
    PopupSectionHeaderComponent,
    RouterLink,
+    ItemCopyActionsComponent,
+    ItemMoreOptionsComponent,
  ],
  selector: "app-vault-list-items-container",
  templateUrl: "vault-list-items-container.component.html",
@@ -37,7 +42,7 @@ export class VaultListItemsContainerComponent {
   * The list of ciphers to display.
   */
  @Input()
-  ciphers: CipherView[];
+  ciphers: PopupCipherView[] = [];

  /**
   * Title for the vault list item section.
@@ -61,5 +66,19 @@ export class VaultListItemsContainerComponent {
   * Option to show the autofill button for each item.
   */
  @Input({ transform: booleanAttribute })
-  showAutoFill: boolean;
+  showAutofillButton: boolean;
+
+  /**
+   * The tooltip text for the organization icon for ciphers that belong to an organization.
+   * @param cipher
+   */
+  orgIconTooltip(cipher: PopupCipherView) {
+    if (cipher.collectionIds.length > 1) {
+      return this.i18nService.t("nCollections", cipher.collectionIds.length);
+    }
+
+    return cipher.collections[0]?.name;
+  }
+
+  constructor(private i18nService: I18nService) {}
 }
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -22,10 +22,12 @@
  </div>

  <ng-container *ngIf="!(showEmptyState$ | async)">
-    <app-vault-v2-search (searchTextChanged)="handleSearchTextChange($event)">
-    </app-vault-v2-search>
+    <div class="tw-fixed">
+      <app-vault-v2-search (searchTextChanged)="handleSearchTextChange($event)">
+      </app-vault-v2-search>

-    <app-vault-list-filters></app-vault-list-filters>
+      <app-vault-list-filters></app-vault-list-filters>
+    </div>

    <div
      *ngIf="(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)"
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
@@ -1,13 +1,18 @@
+import { TestBed } from "@angular/core/testing";
 import { mock } from "jest-mock-extended";
 import { BehaviorSubject } from "rxjs";

 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { ProductType } from "@bitwarden/common/enums";
 import { CipherId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";

 import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
@@ -16,15 +21,20 @@ import { VaultPopupItemsService } from "./vault-popup-items.service";
 import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";

 describe("VaultPopupItemsService", () => {
+  let testBed: TestBed;
  let service: VaultPopupItemsService;
  let allCiphers: Record<CipherId, CipherView>;
  let autoFillCiphers: CipherView[];

+  let mockOrg: Organization;
+  let mockCollections: CollectionView[];
+
  const cipherServiceMock = mock<CipherService>();
  const vaultSettingsServiceMock = mock<VaultSettingsService>();
  const organizationServiceMock = mock<OrganizationService>();
  const vaultPopupListFiltersServiceMock = mock<VaultPopupListFiltersService>();
  const searchService = mock<SearchService>();
+  const collectionService = mock<CollectionService>();

  beforeEach(() => {
    allCiphers = cipherFactory(10);
@@ -39,11 +49,14 @@ describe("VaultPopupItemsService", () => {
    cipherList[2].favorite = true;
    cipherList[3].favorite = true;

-    cipherServiceMock.cipherViews$ = new BehaviorSubject(allCiphers).asObservable();
-    searchService.searchCiphers.mockImplementation(async () => cipherList);
-    cipherServiceMock.filterCiphersForUrl.mockImplementation(async () => autoFillCiphers);
-    vaultSettingsServiceMock.showCardsCurrentTab$ = new BehaviorSubject(false).asObservable();
-    vaultSettingsServiceMock.showIdentitiesCurrentTab$ = new BehaviorSubject(false).asObservable();
+    cipherServiceMock.getAllDecrypted.mockResolvedValue(cipherList);
+    cipherServiceMock.ciphers$ = new BehaviorSubject(null).asObservable();
+    searchService.searchCiphers.mockImplementation(async (_, __, ciphers) => ciphers);
+    cipherServiceMock.filterCiphersForUrl.mockImplementation(async (ciphers) =>
+      ciphers.filter((c) => ["0", "1"].includes(c.id)),
+    );
+    vaultSettingsServiceMock.showCardsCurrentTab$ = new BehaviorSubject(false);
+    vaultSettingsServiceMock.showIdentitiesCurrentTab$ = new BehaviorSubject(false);

    vaultPopupListFiltersServiceMock.filters$ = new BehaviorSubject({
      organization: null,
@@ -55,31 +68,61 @@ describe("VaultPopupItemsService", () => {
    vaultPopupListFiltersServiceMock.filterFunction$ = new BehaviorSubject(
      (ciphers: CipherView[]) => ciphers,
    );
-
    jest.spyOn(BrowserPopupUtils, "inPopout").mockReturnValue(false);
    jest
      .spyOn(BrowserApi, "getTabFromCurrentWindow")
      .mockResolvedValue({ url: "https://example.com" } as chrome.tabs.Tab);
-    service = new VaultPopupItemsService(
-      cipherServiceMock,
-      vaultSettingsServiceMock,
-      vaultPopupListFiltersServiceMock,
-      organizationServiceMock,
-      searchService,
-    );
+
+    mockOrg = {
+      id: "org1",
+      name: "Organization 1",
+      planProductType: ProductType.Enterprise,
+    } as Organization;
+
+    mockCollections = [
+      { id: "col1", name: "Collection 1" } as CollectionView,
+      { id: "col2", name: "Collection 2" } as CollectionView,
+    ];
+
+    organizationServiceMock.organizations$ = new BehaviorSubject([mockOrg]);
+    collectionService.decryptedCollections$ = new BehaviorSubject(mockCollections);
+
+    testBed = TestBed.configureTestingModule({
+      providers: [
+        { provide: CipherService, useValue: cipherServiceMock },
+        { provide: VaultSettingsService, useValue: vaultSettingsServiceMock },
+        { provide: SearchService, useValue: searchService },
+        { provide: OrganizationService, useValue: organizationServiceMock },
+        { provide: VaultPopupListFiltersService, useValue: vaultPopupListFiltersServiceMock },
+        { provide: CollectionService, useValue: collectionService },
+      ],
+    });
+
+    service = testBed.inject(VaultPopupItemsService);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
  });

  it("should be created", () => {
-    service = new VaultPopupItemsService(
-      cipherServiceMock,
-      vaultSettingsServiceMock,
-      vaultPopupListFiltersServiceMock,
-      organizationServiceMock,
-      searchService,
-    );
+    service = testBed.inject(VaultPopupItemsService);
    expect(service).toBeTruthy();
  });

+  it("should merge cipher views with collections and organization", (done) => {
+    const cipherList = Object.values(allCiphers);
+    cipherList[0].organizationId = "org1";
+    cipherList[0].collectionIds = ["col1", "col2"];
+
+    service.autoFillCiphers$.subscribe((ciphers) => {
+      expect(ciphers[0].organization).toEqual(mockOrg);
+      expect(ciphers[0].collections).toContain(mockCollections[0]);
+      expect(ciphers[0].collections).toContain(mockCollections[1]);
+      done();
+    });
+  });
+
  describe("autoFillCiphers$", () => {
    it("should return empty array if there is no current tab", (done) => {
      jest.spyOn(BrowserApi, "getTabFromCurrentWindow").mockResolvedValue(null);
@@ -100,18 +143,10 @@ describe("VaultPopupItemsService", () => {
    it("should filter ciphers for the current tab and types", (done) => {
      const currentTab = { url: "https://example.com" } as chrome.tabs.Tab;

-      vaultSettingsServiceMock.showCardsCurrentTab$ = new BehaviorSubject(true).asObservable();
-      vaultSettingsServiceMock.showIdentitiesCurrentTab$ = new BehaviorSubject(true).asObservable();
+      (vaultSettingsServiceMock.showCardsCurrentTab$ as BehaviorSubject<boolean>).next(true);
+      (vaultSettingsServiceMock.showIdentitiesCurrentTab$ as BehaviorSubject<boolean>).next(true);
      jest.spyOn(BrowserApi, "getTabFromCurrentWindow").mockResolvedValue(currentTab);

-      service = new VaultPopupItemsService(
-        cipherServiceMock,
-        vaultSettingsServiceMock,
-        vaultPopupListFiltersServiceMock,
-        organizationServiceMock,
-        searchService,
-      );
-
      service.autoFillCiphers$.subscribe((ciphers) => {
        expect(cipherServiceMock.filterCiphersForUrl.mock.calls.length).toBe(1);
        expect(cipherServiceMock.filterCiphersForUrl).toHaveBeenCalledWith(
@@ -136,14 +171,6 @@ describe("VaultPopupItemsService", () => {
        Object.values(allCiphers),
      );

-      service = new VaultPopupItemsService(
-        cipherServiceMock,
-        vaultSettingsServiceMock,
-        vaultPopupListFiltersServiceMock,
-        organizationServiceMock,
-        searchService,
-      );
-
      service.autoFillCiphers$.subscribe((ciphers) => {
        expect(ciphers.length).toBe(10);

@@ -159,19 +186,18 @@ describe("VaultPopupItemsService", () => {
    });

    it("should filter autoFillCiphers$ down to search term", (done) => {
-      const cipherList = Object.values(allCiphers);
      const searchText = "Login";

-      searchService.searchCiphers.mockImplementation(async () => {
-        return cipherList.filter((cipher) => {
+      searchService.searchCiphers.mockImplementation(async (q, _, ciphers) => {
+        return ciphers.filter((cipher) => {
          return cipher.name.includes(searchText);
        });
      });

-      // there is only 1 Login returned for filteredCiphers. but two results expected because of other autofill types
+      // there is only 1 Login returned for filteredCiphers.
      service.autoFillCiphers$.subscribe((ciphers) => {
        expect(ciphers[0].name.includes(searchText)).toBe(true);
-        expect(ciphers.length).toBe(2);
+        expect(ciphers.length).toBe(1);
        done();
      });
    });
@@ -248,14 +274,7 @@ describe("VaultPopupItemsService", () => {

  describe("emptyVault$", () => {
    it("should return true if there are no ciphers", (done) => {
-      cipherServiceMock.cipherViews$ = new BehaviorSubject({}).asObservable();
-      service = new VaultPopupItemsService(
-        cipherServiceMock,
-        vaultSettingsServiceMock,
-        vaultPopupListFiltersServiceMock,
-        organizationServiceMock,
-        searchService,
-      );
+      cipherServiceMock.getAllDecrypted.mockResolvedValue([]);
      service.emptyVault$.subscribe((empty) => {
        expect(empty).toBe(true);
        done();
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { inject, Injectable, NgZone } from "@angular/core";
 import {
  BehaviorSubject,
  combineLatest,
@@ -15,13 +15,18 @@ import {

 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";

 import { BrowserApi } from "../../../platform/browser/browser-api";
+import { runInsideAngular } from "../../../platform/browser/run-inside-angular.operator";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
+import { PopupCipherView } from "../views/popup-cipher.view";

 import { MY_VAULT_ID, VaultPopupListFiltersService } from "./vault-popup-list-filters.service";

@@ -72,12 +77,33 @@ export class VaultPopupItemsService {
   * Observable that contains the list of all decrypted ciphers.
   * @private
   */
-  private _cipherList$: Observable<CipherView[]> = this.cipherService.cipherViews$.pipe(
+  private _cipherList$: Observable<PopupCipherView[]> = this.cipherService.ciphers$.pipe(
+    runInsideAngular(inject(NgZone)), // Workaround to ensure cipher$ state provider emissions are run inside Angular
+    switchMap(() => Utils.asyncToObservable(() => this.cipherService.getAllDecrypted())),
    map((ciphers) => Object.values(ciphers)),
-    shareReplay({ refCount: false, bufferSize: 1 }),
+    switchMap((ciphers) =>
+      combineLatest([
+        this.organizationService.organizations$,
+        this.collectionService.decryptedCollections$,
+      ]).pipe(
+        map(([organizations, collections]) => {
+          const orgMap = Object.fromEntries(organizations.map((org) => [org.id, org]));
+          const collectionMap = Object.fromEntries(collections.map((col) => [col.id, col]));
+          return ciphers.map(
+            (cipher) =>
+              new PopupCipherView(
+                cipher,
+                cipher.collectionIds?.map((colId) => collectionMap[colId as CollectionId]),
+                orgMap[cipher.organizationId as OrganizationId],
+              ),
+          );
+        }),
+      ),
+    ),
+    shareReplay({ refCount: true, bufferSize: 1 }),
  );

-  private _filteredCipherList$: Observable<CipherView[]> = combineLatest([
+  private _filteredCipherList$: Observable<PopupCipherView[]> = combineLatest([
    this._cipherList$,
    this.searchText$,
    this.vaultPopupListFiltersService.filterFunction$,
@@ -86,8 +112,9 @@ export class VaultPopupItemsService {
      filterFunction(ciphers),
      searchText,
    ]),
-    switchMap(([ciphers, searchText]) =>
-      this.searchService.searchCiphers(searchText, null, ciphers),
+    switchMap(
+      ([ciphers, searchText]) =>
+        this.searchService.searchCiphers(searchText, null, ciphers) as Promise<PopupCipherView[]>,
    ),
    shareReplay({ refCount: true, bufferSize: 1 }),
  );
@@ -98,7 +125,7 @@ export class VaultPopupItemsService {
   *
   * See {@link refreshCurrentTab} to trigger re-evaluation of the current tab.
   */
-  autoFillCiphers$: Observable<CipherView[]> = combineLatest([
+  autoFillCiphers$: Observable<PopupCipherView[]> = combineLatest([
    this._filteredCipherList$,
    this._otherAutoFillTypes$,
    this._currentAutofillTab$,
@@ -117,7 +144,7 @@ export class VaultPopupItemsService {
   * List of favorite ciphers that are not currently suggested for autofill.
   * Ciphers are sorted by last used date, then by name.
   */
-  favoriteCiphers$: Observable<CipherView[]> = combineLatest([
+  favoriteCiphers$: Observable<PopupCipherView[]> = combineLatest([
    this.autoFillCiphers$,
    this._filteredCipherList$,
  ]).pipe(
@@ -134,7 +161,7 @@ export class VaultPopupItemsService {
   * List of all remaining ciphers that are not currently suggested for autofill or marked as favorite.
   * Ciphers are sorted by name.
   */
-  remainingCiphers$: Observable<CipherView[]> = combineLatest([
+  remainingCiphers$: Observable<PopupCipherView[]> = combineLatest([
    this.autoFillCiphers$,
    this.favoriteCiphers$,
    this._filteredCipherList$,
@@ -204,6 +231,7 @@ export class VaultPopupItemsService {
    private vaultPopupListFiltersService: VaultPopupListFiltersService,
    private organizationService: OrganizationService,
    private searchService: SearchService,
+    private collectionService: CollectionService,
  ) {}

  /**
--- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts
@@ -169,6 +169,13 @@ describe("VaultPopupListFiltersService", () => {
        expect(collections.map((c) => c.label)).toEqual(["Test collection 2"]);
      });
    });
+
+    it("sets collection icon", (done) => {
+      service.collections$.subscribe((collections) => {
+        expect(collections.every(({ icon }) => icon === "bwi-collection")).toBeTruthy();
+        done();
+      });
+    });
  });

  describe("folders$", () => {
@@ -210,6 +217,22 @@ describe("VaultPopupListFiltersService", () => {
      });
    });

+    it("sets folder icon", (done) => {
+      service.filterForm.patchValue({
+        organization: { id: MY_VAULT_ID } as Organization,
+      });
+
+      folderViews$.next([
+        { id: "1234", name: "Folder 1" },
+        { id: "2345", name: "Folder 2" },
+      ]);
+
+      service.folders$.subscribe((folders) => {
+        expect(folders.every(({ icon }) => icon === "bwi-folder")).toBeTruthy();
+        done();
+      });
+    });
+
    it("returns folders that have ciphers within the selected organization", (done) => {
      service.folders$.pipe(skipWhile((folders) => folders.length === 2)).subscribe((folders) => {
        expect(folders.map((f) => f.label)).toEqual(["Folder 1"]);
--- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
@@ -206,7 +206,7 @@ export class VaultPopupListFiltersService {
  /**
   * Folder array structured to be directly passed to `ChipSelectComponent`
   */
-  folders$: Observable<ChipSelectOption<string>[]> = combineLatest([
+  folders$: Observable<ChipSelectOption<FolderView>[]> = combineLatest([
    this.filters$.pipe(
      distinctUntilChanged(
        (previousFilter, currentFilter) =>
@@ -258,13 +258,15 @@ export class VaultPopupListFiltersService {
        nestedList: nestedFolders,
      });
    }),
-    map((folders) => folders.nestedList.map(this.convertToChipSelectOption.bind(this))),
+    map((folders) =>
+      folders.nestedList.map((f) => this.convertToChipSelectOption(f, "bwi-folder")),
+    ),
  );

  /**
   * Collection array structured to be directly passed to `ChipSelectComponent`
   */
-  collections$: Observable<ChipSelectOption<string>[]> = combineLatest([
+  collections$: Observable<ChipSelectOption<CollectionView>[]> = combineLatest([
    this.filters$.pipe(
      distinctUntilChanged(
        (previousFilter, currentFilter) =>
@@ -292,7 +294,9 @@ export class VaultPopupListFiltersService {
        nestedList: nestedCollections,
      });
    }),
-    map((collections) => collections.nestedList.map(this.convertToChipSelectOption.bind(this))),
+    map((collections) =>
+      collections.nestedList.map((c) => this.convertToChipSelectOption(c, "bwi-collection")),
+    ),
  );

  /**
@@ -300,13 +304,14 @@ export class VaultPopupListFiltersService {
   */
  private convertToChipSelectOption<T extends ITreeNodeObject>(
    item: TreeNode<T>,
+    icon: string,
  ): ChipSelectOption<T> {
    return {
      value: item.node,
      label: item.node.name,
-      icon: "bwi-folder", // Organization & Folder icons are the same
+      icon,
      children: item.children
-        ? item.children.map(this.convertToChipSelectOption.bind(this))
+        ? item.children.map((i) => this.convertToChipSelectOption(i, icon))
        : undefined,
    };
  }
--- a/apps/browser/src/vault/popup/views/popup-cipher.view.ts
+++ b/apps/browser/src/vault/popup/views/popup-cipher.view.ts
@@ -0,0 +1,41 @@
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { ProductType } from "@bitwarden/common/enums";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
+
+/**
+ * Extended cipher view for the popup. Includes the associated collections and organization
+ * if applicable.
+ */
+export class PopupCipherView extends CipherView {
+  collections?: CollectionView[];
+  organization?: Organization;
+
+  constructor(
+    cipher: CipherView,
+    collections: CollectionView[] = null,
+    organization: Organization = null,
+  ) {
+    super();
+    Object.assign(this, cipher);
+    this.collections = collections;
+    this.organization = organization;
+  }
+
+  /**
+   * Get the bwi icon for the cipher according to the organization type.
+   */
+  get orgIcon(): "bwi-family" | "bwi-business" | null {
+    switch (this.organization?.planProductType) {
+      case ProductType.Free:
+      case ProductType.Families:
+        return "bwi-family";
+      case ProductType.Teams:
+      case ProductType.Enterprise:
+      case ProductType.TeamsStarter:
+        return "bwi-business";
+      default:
+        return null;
+    }
+  }
+}
--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
@@ -144,6 +144,7 @@
                    </bit-form-control>
                    <bit-form-control>
                      <input
+                        id="manageUsers"
                        type="checkbox"
                        bitCheckbox
                        formControlName="manageUsers"
@@ -203,6 +204,7 @@
                    </bit-form-control>
                    <bit-form-control>
                      <input
+                        id="manageUsers"
                        type="checkbox"
                        bitCheckbox
                        formControlName="manageUsers"
--- a/apps/web/src/app/billing/individual/user-subscription.component.ts
+++ b/apps/web/src/app/billing/individual/user-subscription.component.ts
@@ -146,19 +146,17 @@ export class UserSubscriptionComponent implements OnInit {
    }
  };

-  adjustStorage = (add: boolean) => {
-    return async () => {
-      const dialogRef = openAdjustStorageDialog(this.dialogService, {
-        data: {
-          storageGbPrice: 4,
-          add: add,
-        },
-      });
-      const result = await lastValueFrom(dialogRef.closed);
-      if (result === AdjustStorageDialogResult.Adjusted) {
-        await this.load();
-      }
-    };
+  adjustStorage = async (add: boolean) => {
+    const dialogRef = openAdjustStorageDialog(this.dialogService, {
+      data: {
+        storageGbPrice: 4,
+        add: add,
+      },
+    });
+    const result = await lastValueFrom(dialogRef.closed);
+    if (result === AdjustStorageDialogResult.Adjusted) {
+      await this.load();
+    }
  };

  get subscriptionMarkedForCancel() {
--- a/apps/web/src/app/core/router.service.ts
+++ b/apps/web/src/app/core/router.service.ts
@@ -12,6 +12,14 @@ import {
  GlobalState,
 } from "@bitwarden/common/platform/state";

+/**
+ * Data properties acceptable for use in route objects (see usage in oss-routing.module.ts for example)
+ */
+export interface DataProperties {
+  titleId?: string; // sets the title of the current HTML document (shows in browser tab)
+  doNotSaveUrl?: boolean; // choose to not keep track of the previous URL in memory
+}
+
 const DEEP_LINK_REDIRECT_URL = new KeyDefinition(ROUTER_DISK, "deepLinkRedirectUrl", {
  deserializer: (value: string) => value,
 });
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -40,6 +40,7 @@ import { UpdatePasswordComponent } from "./auth/update-password.component";
 import { UpdateTempPasswordComponent } from "./auth/update-temp-password.component";
 import { VerifyEmailTokenComponent } from "./auth/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "./auth/verify-recover-delete.component";
+import { DataProperties } from "./core";
 import { FrontendLayoutComponent } from "./layouts/frontend-layout.component";
 import { UserLayoutComponent } from "./layouts/user-layout.component";
 import { DomainRulesComponent } from "./settings/domain-rules.component";
@@ -54,7 +55,7 @@ const routes: Routes = [
  {
    path: "",
    component: FrontendLayoutComponent,
-    data: { doNotSaveUrl: true },
+    data: { doNotSaveUrl: true } satisfies DataProperties,
    children: [
      {
        path: "",
@@ -66,17 +67,17 @@ const routes: Routes = [
      {
        path: "login-with-device",
        component: LoginViaAuthRequestComponent,
-        data: { titleId: "loginWithDevice" },
+        data: { titleId: "loginWithDevice" } satisfies DataProperties,
      },
      {
        path: "login-with-passkey",
        component: LoginViaWebAuthnComponent,
-        data: { titleId: "loginWithPasskey" },
+        data: { titleId: "loginWithPasskey" } satisfies DataProperties,
      },
      {
        path: "admin-approval-requested",
        component: LoginViaAuthRequestComponent,
-        data: { titleId: "adminApprovalRequested" },
+        data: { titleId: "adminApprovalRequested" } satisfies DataProperties,
      },
      { path: "2fa", component: TwoFactorComponent, canActivate: [UnauthGuard] },
      {
@@ -88,7 +89,7 @@ const routes: Routes = [
        path: "register",
        component: TrialInitiationComponent,
        canActivate: [UnauthGuard],
-        data: { titleId: "createAccount" },
+        data: { titleId: "createAccount" } satisfies DataProperties,
      },
      {
        path: "trial",
@@ -99,18 +100,18 @@ const routes: Routes = [
        path: "sso",
        component: SsoComponent,
        canActivate: [UnauthGuard],
-        data: { titleId: "enterpriseSingleSignOn" },
+        data: { titleId: "enterpriseSingleSignOn" } satisfies DataProperties,
      },
      {
        path: "set-password",
        component: SetPasswordComponent,
-        data: { titleId: "setMasterPassword" },
+        data: { titleId: "setMasterPassword" } satisfies DataProperties,
      },
      {
        path: "hint",
        component: HintComponent,
        canActivate: [UnauthGuard],
-        data: { titleId: "passwordHint" },
+        data: { titleId: "passwordHint" } satisfies DataProperties,
      },
      {
        path: "lock",
@@ -122,12 +123,12 @@ const routes: Routes = [
        path: "accept-organization",
        canActivate: [deepLinkGuard()],
        component: AcceptOrganizationComponent,
-        data: { titleId: "joinOrganization", doNotSaveUrl: false },
+        data: { titleId: "joinOrganization", doNotSaveUrl: false } satisfies DataProperties,
      },
      {
        path: "accept-emergency",
        canActivate: [deepLinkGuard()],
-        data: { titleId: "acceptEmergency", doNotSaveUrl: false },
+        data: { titleId: "acceptEmergency", doNotSaveUrl: false } satisfies DataProperties,
        loadComponent: () =>
          import("./auth/emergency-access/accept/accept-emergency.component").then(
            (mod) => mod.AcceptEmergencyComponent,
@@ -137,26 +138,26 @@ const routes: Routes = [
        path: "accept-families-for-enterprise",
        component: AcceptFamilySponsorshipComponent,
        canActivate: [deepLinkGuard()],
-        data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false },
+        data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false } satisfies DataProperties,
      },
      { path: "recover", pathMatch: "full", redirectTo: "recover-2fa" },
      {
        path: "recover-2fa",
        component: RecoverTwoFactorComponent,
        canActivate: [UnauthGuard],
-        data: { titleId: "recoverAccountTwoStep" },
+        data: { titleId: "recoverAccountTwoStep" } satisfies DataProperties,
      },
      {
        path: "recover-delete",
        component: RecoverDeleteComponent,
        canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" },
+        data: { titleId: "deleteAccount" } satisfies DataProperties,
      },
      {
        path: "verify-recover-delete",
        component: VerifyRecoverDeleteComponent,
        canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" },
+        data: { titleId: "deleteAccount" } satisfies DataProperties,
      },
      {
        path: "verify-recover-delete-org",
@@ -168,30 +169,30 @@ const routes: Routes = [
        path: "verify-recover-delete-provider",
        component: VerifyRecoverDeleteProviderComponent,
        canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" },
+        data: { titleId: "deleteAccount" } satisfies DataProperties,
      },
      {
        path: "send/:sendId/:key",
        component: AccessComponent,
-        data: { title: "Bitwarden Send" },
+        data: { titleId: "Bitwarden Send" } satisfies DataProperties,
      },
      {
        path: "update-temp-password",
        component: UpdateTempPasswordComponent,
        canActivate: [AuthGuard],
-        data: { titleId: "updateTempPassword" },
+        data: { titleId: "updateTempPassword" } satisfies DataProperties,
      },
      {
        path: "update-password",
        component: UpdatePasswordComponent,
        canActivate: [AuthGuard],
-        data: { titleId: "updatePassword" },
+        data: { titleId: "updatePassword" } satisfies DataProperties,
      },
      {
        path: "remove-password",
        component: RemovePasswordComponent,
        canActivate: [AuthGuard],
-        data: { titleId: "removeMasterPassword" },
+        data: { titleId: "removeMasterPassword" } satisfies DataProperties,
      },
      {
        path: "migrate-legacy-encryption",
@@ -211,21 +212,29 @@ const routes: Routes = [
        path: "vault",
        loadChildren: () => VaultModule,
      },
-      { path: "sends", component: SendComponent, data: { titleId: "send" } },
+      {
+        path: "sends",
+        component: SendComponent,
+        data: { titleId: "send" } satisfies DataProperties,
+      },
      {
        path: "create-organization",
        component: CreateOrganizationComponent,
-        data: { titleId: "newOrganization" },
+        data: { titleId: "newOrganization" } satisfies DataProperties,
      },
      {
        path: "settings",
        children: [
          { path: "", pathMatch: "full", redirectTo: "account" },
-          { path: "account", component: AccountComponent, data: { titleId: "myAccount" } },
+          {
+            path: "account",
+            component: AccountComponent,
+            data: { titleId: "myAccount" } satisfies DataProperties,
+          },
          {
            path: "preferences",
            component: PreferencesComponent,
-            data: { titleId: "preferences" },
+            data: { titleId: "preferences" } satisfies DataProperties,
          },
          {
            path: "security",
@@ -234,7 +243,7 @@ const routes: Routes = [
          {
            path: "domain-rules",
            component: DomainRulesComponent,
-            data: { titleId: "domainRules" },
+            data: { titleId: "domainRules" } satisfies DataProperties,
          },
          {
            path: "subscription",
@@ -249,19 +258,19 @@ const routes: Routes = [
              {
                path: "",
                component: EmergencyAccessComponent,
-                data: { titleId: "emergencyAccess" },
+                data: { titleId: "emergencyAccess" } satisfies DataProperties,
              },
              {
                path: ":id",
                component: EmergencyAccessViewComponent,
-                data: { titleId: "emergencyAccess" },
+                data: { titleId: "emergencyAccess" } satisfies DataProperties,
              },
            ],
          },
          {
            path: "sponsored-families",
            component: SponsoredFamiliesComponent,
-            data: { titleId: "sponsoredFamilies" },
+            data: { titleId: "sponsoredFamilies" } satisfies DataProperties,
          },
        ],
      },
@@ -276,7 +285,7 @@ const routes: Routes = [
              import("./tools/import/import-web.component").then((mod) => mod.ImportWebComponent),
            data: {
              titleId: "importData",
-            },
+            } satisfies DataProperties,
          },
          {
            path: "export",
@@ -286,7 +295,7 @@ const routes: Routes = [
          {
            path: "generator",
            component: GeneratorComponent,
-            data: { titleId: "generator" },
+            data: { titleId: "generator" } satisfies DataProperties,
          },
        ],
      },