[PM-18801] - account security nudge (#14771)

* account security nudge * fix messages.json * fix tests * fix logic for account security item * fix tests * adjust account security nudge work to updated nudge service * fix account security nudge * remove unused code. do not show account security badge * include ff and safari in link html * fix import * Revert "include ff and safari in link html" This reverts commit cd12a36274.
2025-12-06 00:13:28 +00:00 · 2025-05-20 12:19:34 -07:00
parent 4474aa8c96
commit 7641dab0f0
10 changed files with 121 additions and 2 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -5019,6 +5019,15 @@
  "biometricsStatusHelptextUnavailableReasonUnknown": {
    "message": "Biometric unlock is currently unavailable for an unknown reason."
  },
+  "unlockVault": {
+    "message": "Unlock your vault in seconds"
+  },
+  "unlockVaultDesc": {
+    "message": "You can customize your unlock and timeout settings to more quickly access your vault."
+  },
+  "unlockPinSet": {
+    "message": "Unlock PIN set"
+  },
  "authenticating": {
    "message": "Authenticating"
  },
--- a/apps/browser/src/auth/popup/settings/account-security.component.html
+++ b/apps/browser/src/auth/popup/settings/account-security.component.html
@@ -5,6 +5,13 @@
    </ng-container>
  </popup-header>

+  <bit-spotlight
+    *ngIf="showAccountSecurityNudge$ | async"
+    [title]="'unlockVault' | i18n"
+    [subtitle]="'unlockVaultDesc' | i18n"
+    (onDismiss)="dismissAccountSecurityNudge()"
+    class="tw-mb-6"
+  ></bit-spotlight>
  <div [formGroup]="form">
    <bit-section>
      <bit-section-header>
--- a/apps/browser/src/auth/popup/settings/account-security.component.spec.ts
+++ b/apps/browser/src/auth/popup/settings/account-security.component.spec.ts
@@ -4,7 +4,10 @@ import { By } from "@angular/platform-browser";
 import { mock } from "jest-mock-extended";
 import { firstValueFrom, of } from "rxjs";

+import { CollectionService } from "@bitwarden/admin-console/common";
 import { PinServiceAbstraction } from "@bitwarden/auth/common";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
@@ -16,14 +19,18 @@ import {
  VaultTimeoutStringType,
  VaultTimeoutAction,
 } from "@bitwarden/common/key-management/vault-timeout";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { MessageSender } from "@bitwarden/common/platform/messaging";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { StateProvider } from "@bitwarden/common/platform/state";
 import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 import { BiometricStateService, BiometricsService, KeyService } from "@bitwarden/key-management";

@@ -71,6 +78,13 @@ describe("AccountSecurityComponent", () => {
        { provide: UserVerificationService, useValue: mock<UserVerificationService>() },
        { provide: VaultTimeoutService, useValue: mock<VaultTimeoutService>() },
        { provide: VaultTimeoutSettingsService, useValue: vaultTimeoutSettingsService },
+        { provide: StateProvider, useValue: mock<StateProvider>() },
+        { provide: CipherService, useValue: mock<CipherService>() },
+        { provide: ApiService, useValue: mock<ApiService>() },
+        { provide: LogService, useValue: mock<LogService>() },
+        { provide: OrganizationService, useValue: mock<OrganizationService>() },
+        { provide: CollectionService, useValue: mock<CollectionService>() },
+        { provide: ConfigService, useValue: mock<ConfigService>() },
      ],
    })
      .overrideComponent(AccountSecurityComponent, {
--- a/apps/browser/src/auth/popup/settings/account-security.component.ts
+++ b/apps/browser/src/auth/popup/settings/account-security.component.ts
@@ -22,6 +22,7 @@ import {
 } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
 import { FingerprintDialogComponent, VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PinServiceAbstraction } from "@bitwarden/auth/common";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@@ -64,6 +65,7 @@ import {
  BiometricStateService,
  BiometricsStatus,
 } from "@bitwarden/key-management";
+import { SpotlightComponent } from "@bitwarden/vault";

 import { BiometricErrors, BiometricErrorTypes } from "../../../models/biometricErrors";
 import { BrowserApi } from "../../../platform/browser/browser-api";
@@ -96,6 +98,7 @@ import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";
    SectionComponent,
    SectionHeaderComponent,
    SelectModule,
+    SpotlightComponent,
    TypographyModule,
    VaultTimeoutInputComponent,
  ],
@@ -120,6 +123,14 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
    enableAutoBiometricsPrompt: true,
  });

+  protected showAccountSecurityNudge$: Observable<boolean> =
+    this.accountService.activeAccount$.pipe(
+      getUserId,
+      switchMap((userId) =>
+        this.vaultNudgesService.showNudgeSpotlight$(NudgeType.AccountSecurity, userId),
+      ),
+    );
+
  private refreshTimeoutSettings$ = new BehaviorSubject<void>(undefined);
  private destroy$ = new Subject<void>();

@@ -142,6 +153,7 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
    private biometricStateService: BiometricStateService,
    private toastService: ToastService,
    private biometricsService: BiometricsService,
+    private vaultNudgesService: NudgesService,
  ) {}

  async ngOnInit() {
@@ -402,6 +414,14 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
    }
  }

+  protected async dismissAccountSecurityNudge() {
+    const activeAccount = await firstValueFrom(this.accountService.activeAccount$);
+    if (!activeAccount) {
+      return;
+    }
+    await this.vaultNudgesService.dismissNudge(NudgeType.AccountSecurity, activeAccount.id);
+  }
+
  async saveVaultTimeoutAction(value: VaultTimeoutAction) {
    if (value === VaultTimeoutAction.LogOut) {
      const confirmed = await this.dialogService.openSimpleDialog({
@@ -453,6 +473,12 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
      this.form.controls.pin.setValue(userHasPinSet, { emitEvent: false });
      const requireReprompt = (await this.pinService.getPinLockType(userId)) == "EPHEMERAL";
      this.form.controls.pinLockWithMasterPassword.setValue(requireReprompt, { emitEvent: false });
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("unlockPinSet"),
+      });
+      await this.vaultNudgesService.dismissNudge(NudgeType.AccountSecurity, userId);
    } else {
      await this.vaultTimeoutSettingsService.clear();
    }
--- a/apps/browser/src/tools/popup/settings/settings-v2.component.html
+++ b/apps/browser/src/tools/popup/settings/settings-v2.component.html
@@ -82,7 +82,7 @@
        <div class="tw-flex tw-items-center tw-justify-center">
          <p class="tw-pr-2">{{ "downloadBitwardenOnAllDevices" | i18n }}</p>
          <span
-            *ngIf="downloadBitwardenNudgeStatus$ | async"
+            *ngIf="showDownloadBitwardenNudge$ | async"
            bitBadge
            variant="notification"
            [attr.aria-label]="'nudgeBadgeAria' | i18n"
--- a/apps/browser/src/tools/popup/settings/settings-v2.component.ts
+++ b/apps/browser/src/tools/popup/settings/settings-v2.component.ts
@@ -51,7 +51,7 @@ export class SettingsV2Component implements OnInit {
    shareReplay({ bufferSize: 1, refCount: true }),
  );

-  downloadBitwardenNudgeStatus$: Observable<boolean> = this.authenticatedAccount$.pipe(
+  showDownloadBitwardenNudge$: Observable<boolean> = this.authenticatedAccount$.pipe(
    switchMap((account) =>
      this.nudgesService.showNudgeBadge$(NudgeType.DownloadBitwarden, account.id),
    ),
--- a/libs/angular/src/vault/services/custom-nudges-services/account-security-nudge.service.ts
+++ b/libs/angular/src/vault/services/custom-nudges-services/account-security-nudge.service.ts
@@ -0,0 +1,49 @@
+import { Injectable, inject } from "@angular/core";
+import { Observable, combineLatest, from, of } from "rxjs";
+import { catchError, map } from "rxjs/operators";
+
+import { VaultProfileService } from "@bitwarden/angular/vault/services/vault-profile.service";
+import { PinServiceAbstraction } from "@bitwarden/auth/common";
+import { VaultTimeoutSettingsService } from "@bitwarden/common/key-management/vault-timeout";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { UserId } from "@bitwarden/common/types/guid";
+
+import { DefaultSingleNudgeService } from "../default-single-nudge.service";
+import { NudgeStatus, NudgeType } from "../nudges.service";
+
+const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;
+
+@Injectable({ providedIn: "root" })
+export class AccountSecurityNudgeService extends DefaultSingleNudgeService {
+  private vaultProfileService = inject(VaultProfileService);
+  private logService = inject(LogService);
+  private pinService = inject(PinServiceAbstraction);
+  private vaultTimeoutSettingsService = inject(VaultTimeoutSettingsService);
+
+  nudgeStatus$(nudgeType: NudgeType, userId: UserId): Observable<NudgeStatus> {
+    const profileDate$ = from(this.vaultProfileService.getProfileCreationDate(userId)).pipe(
+      catchError(() => {
+        this.logService.error("Failed to load profile date:");
+        // Default to today to ensure the nudge is shown in case of an error
+        return of(new Date());
+      }),
+    );
+
+    return combineLatest([
+      profileDate$,
+      this.getNudgeStatus$(nudgeType, userId),
+      of(Date.now() - THIRTY_DAYS_MS),
+      from(this.pinService.isPinSet(userId)),
+      from(this.vaultTimeoutSettingsService.isBiometricLockSet(userId)),
+    ]).pipe(
+      map(([profileCreationDate, status, profileCutoff, isPinSet, isBiometricLockSet]) => {
+        const profileOlderThanCutoff = profileCreationDate.getTime() < profileCutoff;
+        const hideNudge = profileOlderThanCutoff || isPinSet || isBiometricLockSet;
+        return {
+          hasBadgeDismissed: status.hasBadgeDismissed || hideNudge,
+          hasSpotlightDismissed: status.hasSpotlightDismissed || hideNudge,
+        };
+      }),
+    );
+  }
+}
--- a/libs/angular/src/vault/services/custom-nudges-services/index.ts
+++ b/libs/angular/src/vault/services/custom-nudges-services/index.ts
@@ -1,4 +1,5 @@
 export * from "./autofill-nudge.service";
+export * from "./account-security-nudge.service";
 export * from "./has-items-nudge.service";
 export * from "./download-bitwarden-nudge.service";
 export * from "./empty-vault-nudge.service";
--- a/libs/angular/src/vault/services/nudges.service.spec.ts
+++ b/libs/angular/src/vault/services/nudges.service.spec.ts
@@ -2,8 +2,10 @@ import { TestBed } from "@angular/core/testing";
 import { mock } from "jest-mock-extended";
 import { firstValueFrom, of } from "rxjs";

+import { PinServiceAbstraction } from "@bitwarden/auth/common";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { VaultTimeoutSettingsService } from "@bitwarden/common/key-management/vault-timeout";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { StateProvider } from "@bitwarden/common/platform/state";
@@ -74,6 +76,14 @@ describe("Vault Nudges Service", () => {
          provide: LogService,
          useValue: mock<LogService>(),
        },
+        {
+          provide: PinServiceAbstraction,
+          useValue: mock<PinServiceAbstraction>(),
+        },
+        {
+          provide: VaultTimeoutSettingsService,
+          useValue: mock<VaultTimeoutSettingsService>(),
+        },
      ],
    });
  });
--- a/libs/angular/src/vault/services/nudges.service.ts
+++ b/libs/angular/src/vault/services/nudges.service.ts
@@ -12,6 +12,7 @@ import {
  AutofillNudgeService,
  DownloadBitwardenNudgeService,
  NewItemNudgeService,
+  AccountSecurityNudgeService,
 } from "./custom-nudges-services";
 import { DefaultSingleNudgeService, SingleNudgeService } from "./default-single-nudge.service";

@@ -32,6 +33,7 @@ export enum NudgeType {
  EmptyVaultNudge = "empty-vault-nudge",
  HasVaultItems = "has-vault-items",
  AutofillNudge = "autofill-nudge",
+  AccountSecurity = "account-security",
  DownloadBitwarden = "download-bitwarden",
  NewLoginItemStatus = "new-login-item-status",
  NewCardItemStatus = "new-card-item-status",
@@ -61,6 +63,7 @@ export class NudgesService {
  private customNudgeServices: Partial<Record<NudgeType, SingleNudgeService>> = {
    [NudgeType.HasVaultItems]: inject(HasItemsNudgeService),
    [NudgeType.EmptyVaultNudge]: inject(EmptyVaultNudgeService),
+    [NudgeType.AccountSecurity]: inject(AccountSecurityNudgeService),
    [NudgeType.AutofillNudge]: inject(AutofillNudgeService),
    [NudgeType.DownloadBitwarden]: inject(DownloadBitwardenNudgeService),
    [NudgeType.NewLoginItemStatus]: this.newItemNudgeService,