Merge remote-tracking branch 'origin' into auth/pm-19877/notification-processing

.github/workflows/chromatic.yml

@@ -102,6 +102,9 @@ jobs:
           storybookBuildDir: ./storybook-static
           exitOnceUploaded: true
           onlyChanged: true
-          externals: "[\"libs/components/**/*.scss\", \"libs/components/**/*.css\", \"libs/components/tailwind.config*.js\"]"
+          externals: |
+            libs/components/**/*.scss
+            libs/components/**/*.css
+            libs/components/tailwind.config*.js
           # Rather than use an `if` check on the whole publish step, we need to tell Chromatic to skip so that any Chromatic-spawned actions are properly skipped
           skip: ${{ steps.get-changed-files-for-chromatic.outputs.storyFiles == 'false' }}

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

@@ -547,6 +547,9 @@
   "searchVault": {
     "message": "Search vault"
   },
+  "resetSearch": {
+    "message": "Reset search"
+  },
   "edit": {
     "message": "Edit"
   },

apps/browser/src/auth/popup/change-password/extension-change-password.service.spec.ts

@@ -0,0 +1,50 @@
+import { MockProxy, mock } from "jest-mock-extended";
+
+import { ChangePasswordService } from "@bitwarden/angular/auth/password-management/change-password";
+import { MasterPasswordApiService } from "@bitwarden/common/auth/abstractions/master-password-api.service.abstraction";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
+import { KeyService } from "@bitwarden/key-management";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../platform/browser/browser-popup-utils";
+
+import { ExtensionChangePasswordService } from "./extension-change-password.service";
+
+describe("ExtensionChangePasswordService", () => {
+  let keyService: MockProxy<KeyService>;
+  let masterPasswordApiService: MockProxy<MasterPasswordApiService>;
+  let masterPasswordService: MockProxy<InternalMasterPasswordServiceAbstraction>;
+  let window: MockProxy<Window>;
+
+  let changePasswordService: ChangePasswordService;
+
+  beforeEach(() => {
+    keyService = mock<KeyService>();
+    masterPasswordApiService = mock<MasterPasswordApiService>();
+    masterPasswordService = mock<InternalMasterPasswordServiceAbstraction>();
+    window = mock<Window>();
+
+    changePasswordService = new ExtensionChangePasswordService(
+      keyService,
+      masterPasswordApiService,
+      masterPasswordService,
+      window,
+    );
+  });
+
+  it("should instantiate the service", () => {
+    expect(changePasswordService).toBeDefined();
+  });
+
+  it("should close the browser extension popout", () => {
+    const closePopupSpy = jest.spyOn(BrowserApi, "closePopup");
+    const browserPopupUtilsInPopupSpy = jest
+      .spyOn(BrowserPopupUtils, "inPopout")
+      .mockReturnValue(true);
+
+    changePasswordService.closeBrowserExtensionPopout?.();
+
+    expect(closePopupSpy).toHaveBeenCalledWith(window);
+    expect(browserPopupUtilsInPopupSpy).toHaveBeenCalledWith(window);
+  });
+});

apps/browser/src/auth/popup/change-password/extension-change-password.service.ts

@@ -0,0 +1,29 @@
+import {
+  DefaultChangePasswordService,
+  ChangePasswordService,
+} from "@bitwarden/angular/auth/password-management/change-password";
+import { MasterPasswordApiService } from "@bitwarden/common/auth/abstractions/master-password-api.service.abstraction";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
+import { KeyService } from "@bitwarden/key-management";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../platform/browser/browser-popup-utils";
+
+export class ExtensionChangePasswordService
+  extends DefaultChangePasswordService
+  implements ChangePasswordService
+{
+  constructor(
+    protected keyService: KeyService,
+    protected masterPasswordApiService: MasterPasswordApiService,
+    protected masterPasswordService: InternalMasterPasswordServiceAbstraction,
+    private win: Window,
+  ) {
+    super(keyService, masterPasswordApiService, masterPasswordService);
+  }
+  closeBrowserExtensionPopout(): void {
+    if (BrowserPopupUtils.inPopout(this.win)) {
+      BrowserApi.closePopup(this.win);
+    }
+  }
+}

apps/browser/src/background/main.background.ts

@@ -1076,6 +1076,7 @@ export default class MainBackground {
       this.pinService,
       this.accountService,
       this.sdkService,
+      this.restrictedItemTypesService,
     );
 
     this.individualVaultExportService = new IndividualVaultExportService(

apps/browser/src/popup/services/services.module.ts

@@ -5,6 +5,7 @@ import { merge, of, Subject } from "rxjs";
 
 import { CollectionService } from "@bitwarden/admin-console/common";
 import { DeviceManagementComponentServiceAbstraction } from "@bitwarden/angular/auth/device-management/device-management-component.service.abstraction";
+import { ChangePasswordService } from "@bitwarden/angular/auth/password-management/change-password";
 import { AngularThemingService } from "@bitwarden/angular/platform/services/theming/angular-theming.service";
 import { SafeProvider, safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
 import { ViewCacheService } from "@bitwarden/angular/platform/view-cache";
@@ -45,6 +46,7 @@ import {
   AccountService as AccountServiceAbstraction,
 } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
+import { MasterPasswordApiService } from "@bitwarden/common/auth/abstractions/master-password-api.service.abstraction";
 import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import {
@@ -148,6 +150,7 @@ import {
 
 import { AccountSwitcherService } from "../../auth/popup/account-switching/services/account-switcher.service";
 import { ForegroundLockService } from "../../auth/popup/accounts/foreground-lock.service";
+import { ExtensionChangePasswordService } from "../../auth/popup/change-password/extension-change-password.service";
 import { ExtensionLoginComponentService } from "../../auth/popup/login/extension-login-component.service";
 import { ExtensionSsoComponentService } from "../../auth/popup/login/extension-sso-component.service";
 import { ExtensionLogoutService } from "../../auth/popup/logout/extension-logout.service";
@@ -681,6 +684,11 @@ const safeProviders: SafeProvider[] = [
     useClass: DefaultSshImportPromptService,
     deps: [DialogService, ToastService, PlatformUtilsService, I18nServiceAbstraction],
   }),
+  safeProvider({
+    provide: ChangePasswordService,
+    useClass: ExtensionChangePasswordService,
+    deps: [KeyService, MasterPasswordApiService, InternalMasterPasswordServiceAbstraction, WINDOW],
+  }),
   safeProvider({
     provide: ServerNotificationsService,
     useClass: ForegroundServerNotificationsService,

apps/browser/src/tools/popup/settings/settings-v2.component.html

@@ -10,16 +10,7 @@
     <bit-item>
       <a bit-item-content routerLink="/account-security">
         <i slot="start" class="bwi bwi-lock" aria-hidden="true"></i>
-        <div class="tw-flex tw-items-center tw-justify-center">
-          <p class="tw-pr-2">{{ "accountSecurity" | i18n }}</p>
-          <span
-            *ngIf="showAcctSecurityNudge$ | async"
-            bitBadge
-            variant="notification"
-            [attr.aria-label]="'nudgeBadgeAria' | i18n"
-            >1</span
-          >
-        </div>
+        {{ "accountSecurity" | i18n }}
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
       </a>
     </bit-item>

apps/browser/src/tools/popup/settings/settings-v2.component.ts

@@ -50,12 +50,6 @@ export class SettingsV2Component implements OnInit {
     shareReplay({ bufferSize: 1, refCount: true }),
   );
 
-  protected showAcctSecurityNudge$: Observable<boolean> = this.authenticatedAccount$.pipe(
-    switchMap((account) =>
-      this.nudgesService.showNudgeBadge$(NudgeType.AccountSecurity, account.id),
-    ),
-  );
-
   showDownloadBitwardenNudge$: Observable<boolean> = this.authenticatedAccount$.pipe(
     switchMap((account) =>
       this.nudgesService.showNudgeBadge$(NudgeType.DownloadBitwarden, account.id),

apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts

@@ -3,8 +3,7 @@
 import { CommonModule } from "@angular/common";
 import { booleanAttribute, Component, Input } from "@angular/core";
 import { Router, RouterModule } from "@angular/router";
-import { BehaviorSubject, combineLatest, firstValueFrom, map, switchMap } from "rxjs";
-import { filter } from "rxjs/operators";
+import { BehaviorSubject, combineLatest, filter, firstValueFrom, map, switchMap } from "rxjs";
 
 import { CollectionService } from "@bitwarden/admin-console/common";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -15,6 +14,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherRepromptType, CipherType } from "@bitwarden/common/vault/enums";
 import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import {
   CipherViewLike,
   CipherViewLikeUtils,
@@ -70,9 +70,21 @@ export class ItemMoreOptionsComponent {
    * Observable that emits a boolean value indicating if the user is authorized to clone the cipher.
    * @protected
    */
-  protected canClone$ = this._cipher$.pipe(
-    filter((c) => c != null),
-    switchMap((c) => this.cipherAuthorizationService.canCloneCipher$(c)),
+  protected canClone$ = combineLatest([
+    this._cipher$,
+    this.restrictedItemTypesService.restricted$,
+  ]).pipe(
+    filter(([c]) => c != null),
+    switchMap(([c, restrictedTypes]) => {
+      // This will check for restrictions from org policies before allowing cloning.
+      const isItemRestricted = restrictedTypes.some(
+        (restrictType) => restrictType.cipherType === c.type,
+      );
+      if (!isItemRestricted) {
+        return this.cipherAuthorizationService.canCloneCipher$(c);
+      }
+      return new BehaviorSubject(false);
+    }),
   );
 
   /** Observable Boolean dependent on the current user having access to an organization and editable collections */
@@ -103,6 +115,7 @@ export class ItemMoreOptionsComponent {
     private organizationService: OrganizationService,
     private cipherAuthorizationService: CipherAuthorizationService,
     private collectionService: CollectionService,
+    private restrictedItemTypesService: RestrictedItemTypesService,
   ) {}
 
   get canEdit() {

apps/cli/src/service-container/service-container.ts

@@ -821,6 +821,7 @@ export class ServiceContainer {
       this.pinService,
       this.accountService,
       this.sdkService,
+      this.restrictedItemTypesService,
     );
 
     this.individualExportService = new IndividualVaultExportService(

apps/desktop/src/app/app.component.ts

@@ -68,6 +68,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { InternalFolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { DialogRef, DialogService, ToastOptions, ToastService } from "@bitwarden/components";
 import { CredentialGeneratorHistoryDialogComponent } from "@bitwarden/generator-components";
 import { KeyService, BiometricStateService } from "@bitwarden/key-management";
@@ -172,6 +173,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
     private readonly destroyRef: DestroyRef,
     private readonly documentLangSetter: DocumentLangSetter,
+    private restrictedItemTypesService: RestrictedItemTypesService,
   ) {
     this.deviceTrustToastService.setupListeners$.pipe(takeUntilDestroyed()).subscribe();
 
@@ -523,10 +525,12 @@ export class AppComponent implements OnInit, OnDestroy {
   private async updateAppMenu() {
     let updateRequest: MenuUpdateRequest;
     const stateAccounts = await firstValueFrom(this.accountService.accounts$);
+
     if (stateAccounts == null || Object.keys(stateAccounts).length < 1) {
       updateRequest = {
         accounts: null,
         activeUserId: null,
+        restrictedCipherTypes: null,
       };
     } else {
       const accounts: { [userId: string]: MenuAccount } = {};
@@ -557,6 +561,9 @@ export class AppComponent implements OnInit, OnDestroy {
         activeUserId: await firstValueFrom(
           this.accountService.activeAccount$.pipe(map((a) => a?.id)),
         ),
+        restrictedCipherTypes: (
+          await firstValueFrom(this.restrictedItemTypesService.restricted$)
+        ).map((restrictedItems) => restrictedItems.cipherType),
       };
     }
 

apps/desktop/src/locales/en/messages.json

@@ -41,6 +41,9 @@
   "searchVault": {
     "message": "Search vault"
   },
+  "resetSearch": {
+    "message": "Reset search"
+  },
   "addItem": {
     "message": "Add item"
   },

apps/desktop/src/main/menu/menu.file.ts

@@ -2,6 +2,7 @@ import { BrowserWindow, MenuItemConstructorOptions } from "electron";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { CipherType } from "@bitwarden/sdk-internal";
 
 import { isMac, isMacAppStore } from "../../utils";
 import { UpdaterMain } from "../updater.main";
@@ -54,6 +55,7 @@ export class FileMenu extends FirstMenu implements IMenubarMenu {
     accounts: { [userId: string]: MenuAccount },
     isLocked: boolean,
     isLockable: boolean,
+    private restrictedCipherTypes: CipherType[],
   ) {
     super(i18nService, messagingService, updater, window, accounts, isLocked, isLockable);
   }
@@ -77,6 +79,23 @@ export class FileMenu extends FirstMenu implements IMenubarMenu {
     };
   }
 
+  private mapMenuItemToCipherType(itemId: string): CipherType {
+    switch (itemId) {
+      case "typeLogin":
+        return CipherType.Login;
+      case "typeCard":
+        return CipherType.Card;
+      case "typeIdentity":
+        return CipherType.Identity;
+      case "typeSecureNote":
+        return CipherType.SecureNote;
+      case "typeSshKey":
+        return CipherType.SshKey;
+      default:
+        throw new Error(`Unknown menu item id: ${itemId}`);
+    }
+  }
+
   private get addNewItemSubmenu(): MenuItemConstructorOptions[] {
     return [
       {
@@ -109,7 +128,11 @@ export class FileMenu extends FirstMenu implements IMenubarMenu {
         click: () => this.sendMessage("newSshKey"),
         accelerator: "CmdOrCtrl+Shift+K",
       },
-    ];
+    ].filter((item) => {
+      return !this.restrictedCipherTypes?.some(
+        (restrictedType) => restrictedType === this.mapMenuItemToCipherType(item.id),
+      );
+    });
   }
 
   private get addNewFolder(): MenuItemConstructorOptions {

apps/desktop/src/main/menu/menu.updater.ts

@@ -1,8 +1,10 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { CipherType } from "@bitwarden/common/vault/enums";
 export class MenuUpdateRequest {
-  activeUserId: string;
-  accounts: { [userId: string]: MenuAccount };
+  activeUserId: string | null;
+  accounts: { [userId: string]: MenuAccount } | null;
+  restrictedCipherTypes: CipherType[] | null;
 }
 
 export class MenuAccount {

apps/desktop/src/main/menu/menubar.ts

@@ -83,6 +83,7 @@ export class Menubar {
         updateRequest?.accounts,
         isLocked,
         isLockable,
+        updateRequest?.restrictedCipherTypes,
       ),
       new EditMenu(i18nService, messagingService, isLocked),
       new ViewMenu(i18nService, messagingService, isLocked),

apps/web/src/app/admin-console/organizations/collections/utils/collection-utils.ts

@@ -82,5 +82,7 @@ function cloneCollection(
   cloned.organizationId = collection.organizationId;
   cloned.readOnly = collection.readOnly;
   cloned.manage = collection.manage;
+  cloned.type = collection.type;
+
   return cloned;
 }

apps/web/src/app/admin-console/organizations/collections/vault-filter/vault-filter.component.ts

@@ -10,6 +10,7 @@ import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstract
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { DialogService, ToastService } from "@bitwarden/components";
@@ -53,6 +54,7 @@ export class VaultFilterComponent
     protected configService: ConfigService,
     protected accountService: AccountService,
     protected restrictedItemTypesService: RestrictedItemTypesService,
+    protected cipherService: CipherService,
   ) {
     super(
       vaultFilterService,
@@ -65,6 +67,7 @@ export class VaultFilterComponent
       configService,
       accountService,
       restrictedItemTypesService,
+      cipherService,
     );
   }
 
@@ -131,7 +134,7 @@ export class VaultFilterComponent
 
   async buildAllFilters(): Promise<VaultFilterList> {
     const builderFilter = {} as VaultFilterList;
-    builderFilter.typeFilter = await this.addTypeFilter(["favorites"]);
+    builderFilter.typeFilter = await this.addTypeFilter(["favorites"], this._organization?.id);
     builderFilter.collectionFilter = await this.addCollectionFilter();
     builderFilter.trashFilter = await this.addTrashFilter();
     return builderFilter;

apps/web/src/app/vault/components/vault-items/vault-items.component.ts

@@ -2,7 +2,7 @@
 // @ts-strict-ignore
 import { SelectionModel } from "@angular/cdk/collections";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { toSignal, takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Observable, combineLatest, map, of, startWith, switchMap } from "rxjs";
 
 import { CollectionView, Unassigned, CollectionAdminView } from "@bitwarden/admin-console/common";
@@ -64,6 +64,8 @@ export class VaultItemsComponent<C extends CipherViewLike> {
   @Input() addAccessToggle: boolean;
   @Input() activeCollection: CollectionView | undefined;
 
+  private restrictedPolicies = toSignal(this.restrictedItemTypesService.restricted$);
+
   private _ciphers?: C[] = [];
   @Input() get ciphers(): C[] {
     return this._ciphers;
@@ -94,7 +96,7 @@ export class VaultItemsComponent<C extends CipherViewLike> {
 
   constructor(
     protected cipherAuthorizationService: CipherAuthorizationService,
-    private restrictedItemTypesService: RestrictedItemTypesService,
+    protected restrictedItemTypesService: RestrictedItemTypesService,
   ) {
     this.canDeleteSelected$ = this.selection.changed.pipe(
       startWith(null),
@@ -281,6 +283,14 @@ export class VaultItemsComponent<C extends CipherViewLike> {
 
   // TODO: PM-13944 Refactor to use cipherAuthorizationService.canClone$ instead
   protected canClone(vaultItem: VaultItem<C>) {
+    // This will check for restrictions from org policies before allowing cloning.
+    const isItemRestricted = this.restrictedPolicies().some(
+      (rt) => rt.cipherType === vaultItem.cipher.type,
+    );
+    if (isItemRestricted) {
+      return false;
+    }
+
     if (vaultItem.cipher.organizationId == null) {
       return true;
     }

apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from "@angular/core";
 import { Router } from "@angular/router";
 import {
+  combineLatest,
   distinctUntilChanged,
   firstValueFrom,
   map,
@@ -20,6 +21,7 @@ import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstract
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
@@ -155,6 +157,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     protected configService: ConfigService,
     protected accountService: AccountService,
     protected restrictedItemTypesService: RestrictedItemTypesService,
+    protected cipherService: CipherService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -292,16 +295,47 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     return orgFilterSection;
   }
 
-  protected async addTypeFilter(excludeTypes: CipherStatus[] = []): Promise<VaultFilterSection> {
+  protected async addTypeFilter(
+    excludeTypes: CipherStatus[] = [],
+    organizationId?: string,
+  ): Promise<VaultFilterSection> {
     const allFilter: CipherTypeFilter = { id: "AllItems", name: "allItems", type: "all", icon: "" };
 
-    const data$ = this.restrictedItemTypesService.restricted$.pipe(
-      map((restricted) => {
-        // List of types restricted by all orgs
-        const restrictedByAll = restricted
-          .filter((r) => r.allowViewOrgIds.length === 0)
+    const userId = await firstValueFrom(this.activeUserId$);
+
+    const data$ = combineLatest([
+      this.restrictedItemTypesService.restricted$,
+      this.cipherService.cipherViews$(userId),
+    ]).pipe(
+      map(([restrictedTypes, ciphers]) => {
+        const restrictedForUser = restrictedTypes
+          .filter((r) => {
+            // - All orgs restrict the type
+            if (r.allowViewOrgIds.length === 0) {
+              return true;
+            }
+            // - Admin console: user has no ciphers of that type in the selected org
+            // - Individual vault view: user has no ciphers of that type in any allowed org
+            return !ciphers?.some((c) => {
+              if (c.deletedDate || c.type !== r.cipherType) {
+                return false;
+              }
+              // If the cipher doesn't belong to an org it is automatically restricted
+              if (!c.organizationId) {
+                return false;
+              }
+              if (organizationId) {
+                return (
+                  c.organizationId === organizationId &&
+                  r.allowViewOrgIds.includes(c.organizationId)
+                );
+              }
+              return r.allowViewOrgIds.includes(c.organizationId);
+            });
+          })
           .map((r) => r.cipherType);
-        const toExclude = [...excludeTypes, ...restrictedByAll];
+
+        const toExclude = [...excludeTypes, ...restrictedForUser];
         return this.allTypeFilters.filter(
           (f) => typeof f.type === "string" || !toExclude.includes(f.type),
         );

apps/web/src/locales/en/messages.json

@@ -629,6 +629,9 @@
   "searchGroups": {
     "message": "Search groups"
   },
+  "resetSearch": {
+    "message": "Reset search"
+  },
   "allItems": {
     "message": "All items"
   },

libs/angular/src/auth/password-management/change-password/change-password.component.ts

@@ -178,6 +178,9 @@ export class ChangePasswordComponent implements OnInit {
 
         // TODO: PM-23515 eventually use the logout service instead of messaging service once it is available without circular dependencies
         this.messagingService.send("logout");
+
+        // Close the popout if we are in a browser extension popout.
+        this.changePasswordService.closeBrowserExtensionPopout?.();
       }
     } catch (error) {
       this.logService.error(error);

libs/angular/src/auth/password-management/change-password/change-password.service.abstraction.ts

@@ -59,4 +59,10 @@ export abstract class ChangePasswordService {
    * - Currently only used on the web change password service.
    */
   clearDeeplinkState?: () => Promise<void>;
+
+  /**
+   * Optional method that closes the browser extension popout if in a popout
+   * If not in a popout, does nothing.
+   */
+  abstract closeBrowserExtensionPopout?(): void;
 }

libs/angular/src/vault/services/nudges.service.ts

@@ -160,7 +160,6 @@ export class NudgesService {
   hasActiveBadges$(userId: UserId): Observable<boolean> {
     // Add more nudge types here if they have the settings badge feature
     const nudgeTypes = [
-      NudgeType.AccountSecurity,
       NudgeType.EmptyVaultNudge,
       NudgeType.DownloadBitwarden,
       NudgeType.AutofillNudge,

libs/components/src/search/search.component.css

@@ -1,19 +1,17 @@
 /**
  * Tailwind doesn't have a good way to style search-cancel-button.
+ * Hide the default reset button that only appears in some browsers.
  */
 bit-search input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
-  height: 21px;
-  width: 21px;
-  margin: 0;
-  cursor: pointer;
-  background-repeat: no-repeat;
-  mask-image: url("./close-button.svg");
-  -webkit-mask-image: url("./close-button.svg");
-  background-color: rgba(var(--color-text-muted));
 }
 
-bit-search input[type="search"]::-webkit-search-cancel-button:hover {
-  background-color: rgba(var(--color-text-main));
+/**
+ * Style our custom reset button that works in all common browsers.
+ * Tailwind CSS does not natively support mask-image or -webkit-mask-image utilities (but can be extended if needed).
+ */
+.bw-reset-btn {
+  mask-image: url("./close-button.svg");
+  -webkit-mask-image: url("./close-button.svg");
 }

libs/components/src/search/search.component.html

@@ -1,9 +1,14 @@
-<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
-<div class="tw-relative tw-flex tw-items-center">
+<form
+  role="search"
+  (mouseenter)="isFormHovered.set(true)"
+  (mouseleave)="isFormHovered.set(false)"
+  class="tw-relative tw-flex tw-items-center tw-w-full"
+>
+  <label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
   <label
     [for]="id"
     aria-hidden="true"
-    class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
+    class="tw-absolute tw-start-2 tw-z-20 !tw-mb-0 tw-cursor-text"
   >
     <i class="bwi bwi-search bwi-fw tw-text-muted"></i>
   </label>
@@ -14,10 +19,23 @@
     [id]="id"
     [placeholder]="placeholder() ?? ('search' | i18n)"
     class="tw-ps-9"
+    name="searchText"
     [ngModel]="searchText"
     (ngModelChange)="onChange($event)"
-    (blur)="onTouch()"
+    (focus)="isInputFocused.set(true)"
+    (blur)="isInputFocused.set(false); onTouch()"
     [disabled]="disabled()"
     [attr.autocomplete]="autocomplete()"
   />
-</div>
+  <button
+    *ngIf="searchText && showResetButton()"
+    [ngClass]="{
+      'tw-opacity-0': !showResetButton(),
+      'tw-bg-text-muted': showResetButton(),
+    }"
+    class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-end-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
+    type="reset"
+    [attr.aria-label]="'resetSearch' | i18n"
+    (click)="clearSearch()"
+  ></button>
+</form>

libs/components/src/search/search.component.ts

@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Component, ElementRef, ViewChild, input, model } from "@angular/core";
+import { NgIf, NgClass } from "@angular/common";
+import { Component, ElementRef, ViewChild, input, model, signal, computed } from "@angular/core";
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -16,6 +17,9 @@ import { FocusableElement } from "../shared/focusable-element";
 
 let nextId = 0;
 
+/**
+ * Do not nest Search components inside another `<form>`, as they already contain their own standalone `<form>` element for searching.
+ */
 @Component({
   selector: "bit-search",
   templateUrl: "./search.component.html",
@@ -30,7 +34,7 @@ let nextId = 0;
       useExisting: SearchComponent,
     },
   ],
-  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe],
+  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe, NgIf, NgClass],
 })
 export class SearchComponent implements ControlValueAccessor, FocusableElement {
   private notifyOnChange: (v: string) => void;
@@ -43,6 +47,11 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement {
   // Use `type="text"` for Safari to improve rendering performance
   protected inputType = isBrowserSafariApi() ? ("text" as const) : ("search" as const);
 
+  protected isInputFocused = signal(false);
+  protected isFormHovered = signal(false);
+
+  protected showResetButton = computed(() => this.isInputFocused() || this.isFormHovered());
+
   readonly disabled = model<boolean>();
   readonly placeholder = input<string>();
   readonly autocomplete = input<string>();
@@ -52,11 +61,20 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement {
   }
 
   onChange(searchText: string) {
+    this.searchText = searchText; // update the model when the input changes (so we can use it with *ngIf in the template)
     if (this.notifyOnChange != undefined) {
       this.notifyOnChange(searchText);
     }
   }
 
+  // Handle the reset button click
+  clearSearch() {
+    this.searchText = "";
+    if (this.notifyOnChange) {
+      this.notifyOnChange("");
+    }
+  }
+
   onTouch() {
     if (this.notifyOnTouch != undefined) {
       this.notifyOnTouch();

libs/components/src/search/search.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Primary, Controls, Title } from "@storybook/addon-docs";
+import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
 
 import * as stories from "./search.stories";
 
@@ -9,6 +9,7 @@ import { SearchModule } from "@bitwarden/components";
 ```
 
 <Title>Search field</Title>
+<Description />
 
 <Primary />
 <Controls />

libs/importer/src/components/import.component.ts

@@ -100,6 +100,7 @@ const safeProviders: SafeProvider[] = [
       PinServiceAbstraction,
       AccountService,
       SdkService,
+      RestrictedItemTypesService,
     ],
   }),
 ];

libs/importer/src/services/import.service.spec.ts

@@ -13,6 +13,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { KeyService } from "@bitwarden/key-management";
 
 import { BitwardenPasswordProtectedImporter } from "../importers/bitwarden/bitwarden-password-protected-importer";
@@ -34,6 +35,7 @@ describe("ImportService", () => {
   let pinService: MockProxy<PinServiceAbstraction>;
   let accountService: MockProxy<AccountService>;
   let sdkService: MockSdkService;
+  let restrictedItemTypesService: MockProxy<RestrictedItemTypesService>;
 
   beforeEach(() => {
     cipherService = mock<CipherService>();
@@ -45,6 +47,7 @@ describe("ImportService", () => {
     encryptService = mock<EncryptService>();
     pinService = mock<PinServiceAbstraction>();
     sdkService = new MockSdkService();
+    restrictedItemTypesService = mock<RestrictedItemTypesService>();
 
     importService = new ImportService(
       cipherService,
@@ -57,6 +60,7 @@ describe("ImportService", () => {
       pinService,
       accountService,
       sdkService,
+      restrictedItemTypesService,
     );
   });
 

libs/importer/src/services/import.service.ts

@@ -26,6 +26,7 @@ import { CipherRequest } from "@bitwarden/common/vault/models/request/cipher.req
 import { FolderWithIdRequest } from "@bitwarden/common/vault/models/request/folder-with-id.request";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { KeyService } from "@bitwarden/key-management";
 
 import {
@@ -119,6 +120,7 @@ export class ImportService implements ImportServiceAbstraction {
     private pinService: PinServiceAbstraction,
     private accountService: AccountService,
     private sdkService: SdkService,
+    private restrictedItemTypesService: RestrictedItemTypesService,
   ) {}
 
   getImportOptions(): ImportOption[] {
@@ -166,6 +168,17 @@ export class ImportService implements ImportServiceAbstraction {
       }
     }
 
+    const restrictedItemTypes = await firstValueFrom(
+      this.restrictedItemTypesService.restricted$.pipe(
+        map((restrictedItemTypes) => restrictedItemTypes.map((r) => r.cipherType)),
+      ),
+    );
+
+    // Filter out restricted item types from the import result
+    importResult.ciphers = importResult.ciphers.filter(
+      (cipher) => !restrictedItemTypes.includes(cipher.type),
+    );
+
     if (organizationId && !selectedImportTarget && !canAccessImportExport) {
       const hasUnassignedCollections =
         importResult.collectionRelationships.length < importResult.ciphers.length;