From a7efd2158ebd2032eea0dce8a1f5bc47c43e2165 Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Fri, 9 May 2025 08:52:54 -0700
Subject: [PATCH 01/35] [PM-18802] - Autofill Settings Nudges and Settings
Badge (#14439)
* autofill nudge
* remove undismiss logic
* revert change to popup view cache service
* move browser autofill logic to platform. cleanup
* fix test
* adjustments to autofill nudges
* add missing provider
* updates to autofill nudges
* fix date logic
* change autofillBrowserSettingsService isBrowserAutofillSettingOverridden to function
* fix up browser autofill overridden settings logic
* remove check for privacy in isBrowserAutofillSettingOverridden
---
apps/browser/src/_locales/en/messages.json | 18 ++++
.../popup/settings/autofill.component.html | 10 +++
.../popup/settings/autofill.component.ts | 84 +++++++++++--------
.../autofill-browser-settings.service.ts | 31 +++++++
.../src/platform/browser/browser-api.ts | 23 +++++
.../view-cache/popup-view-cache.service.ts | 2 +-
.../popup/settings/settings-v2.component.html | 10 ++-
.../popup/settings/settings-v2.component.ts | 39 ++++++++-
.../spotlight/spotlight.component.html | 5 +-
.../spotlight/spotlight.component.ts | 8 +-
.../components/spotlight/spotlight.stories.ts | 20 ++---
.../autofill-nudge.service.ts | 47 +++++++++++
.../services/custom-nudges-services/index.ts | 1 +
.../src/services/vault-nudges.service.spec.ts | 1 +
.../src/services/vault-nudges.service.ts | 3 +
15 files changed, 240 insertions(+), 62 deletions(-)
create mode 100644 apps/browser/src/autofill/services/autofill-browser-settings.service.ts
create mode 100644 libs/vault/src/services/custom-nudges-services/autofill-nudge.service.ts
diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 1df0bf96616..1c3214a6ef7 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -1589,6 +1589,24 @@
"autofillSuggestionsSectionTitle": {
"message": "Autofill suggestions"
},
+ "autofillSpotlightTitle": {
+ "message": "Easily find autofill suggestions"
+ },
+ "autofillSpotlightDesc": {
+ "message": "Turn off your browser's autofill settings, so they don't conflict with Bitwarden."
+ },
+ "turnOffBrowserAutofill": {
+ "message": "Turn off $BROWSER$ autofill",
+ "placeholders": {
+ "browser": {
+ "content": "$1",
+ "example": "Chrome"
+ }
+ }
+ },
+ "turnOffAutofill": {
+ "message": "Turn off autofill"
+ },
"showInlineMenuLabel": {
"message": "Show autofill suggestions on form fields"
},
diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.html b/apps/browser/src/autofill/popup/settings/autofill.component.html
index 4fd85ddce33..264b04b039b 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.html
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.html
@@ -6,6 +6,16 @@
+
+
+
{{ "autofillSuggestionsSectionTitle" | i18n }}
diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.ts b/apps/browser/src/autofill/popup/settings/autofill.component.ts
index c30f150e71d..d63f9a4589d 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.ts
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.ts
@@ -11,9 +11,11 @@ import {
FormControl,
} from "@angular/forms";
import { RouterModule } from "@angular/router";
-import { firstValueFrom } from "rxjs";
+import { Observable, filter, firstValueFrom, map, switchMap } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { getUserId } from "@bitwarden/common/auth/services/account.service";
import {
AutofillOverlayVisibility,
BrowserClientVendors,
@@ -53,7 +55,9 @@ import {
SelectModule,
TypographyModule,
} from "@bitwarden/components";
+import { SpotlightComponent, VaultNudgesService, VaultNudgeType } from "@bitwarden/vault";
+import { AutofillBrowserSettingsService } from "../../../autofill/services/autofill-browser-settings.service";
import { BrowserApi } from "../../../platform/browser/browser-api";
import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -81,6 +85,7 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
SelectModule,
TypographyModule,
ReactiveFormsModule,
+ SpotlightComponent,
],
})
export class AutofillComponent implements OnInit {
@@ -100,6 +105,14 @@ export class AutofillComponent implements OnInit {
protected browserClientIsUnknown: boolean;
protected autofillOnPageLoadFromPolicy$ =
this.autofillSettingsService.activateAutofillOnPageLoadFromPolicy$;
+ protected showSpotlightNudge$: Observable = this.accountService.activeAccount$.pipe(
+ filter((account): account is Account => account !== null),
+ switchMap((account) =>
+ this.vaultNudgesService
+ .showNudge$(VaultNudgeType.AutofillNudge, account.id)
+ .pipe(map((nudgeStatus) => !nudgeStatus.hasSpotlightDismissed)),
+ ),
+ );
protected autofillOnPageLoadForm = new FormGroup({
autofillOnPageLoad: new FormControl(),
@@ -142,6 +155,9 @@ export class AutofillComponent implements OnInit {
private configService: ConfigService,
private formBuilder: FormBuilder,
private destroyRef: DestroyRef,
+ private vaultNudgesService: VaultNudgesService,
+ private accountService: AccountService,
+ private autofillBrowserSettingsService: AutofillBrowserSettingsService,
) {
this.autofillOnPageLoadOptions = [
{ name: this.i18nService.t("autoFillOnPageLoadYes"), value: true },
@@ -165,7 +181,7 @@ export class AutofillComponent implements OnInit {
{ name: i18nService.t("never"), value: UriMatchStrategy.Never },
];
- this.browserClientVendor = this.getBrowserClientVendor();
+ this.browserClientVendor = BrowserApi.getBrowserClientVendor(window);
this.disablePasswordManagerURI = DisablePasswordManagerUris[this.browserClientVendor];
this.browserShortcutsURI = BrowserShortcutsUris[this.browserClientVendor];
this.browserClientIsUnknown = this.browserClientVendor === BrowserClientVendors.Unknown;
@@ -173,7 +189,11 @@ export class AutofillComponent implements OnInit {
async ngOnInit() {
this.canOverrideBrowserAutofillSetting = !this.browserClientIsUnknown;
- this.defaultBrowserAutofillDisabled = await this.browserAutofillSettingCurrentlyOverridden();
+
+ this.defaultBrowserAutofillDisabled =
+ await this.autofillBrowserSettingsService.isBrowserAutofillSettingOverridden(
+ this.browserClientVendor,
+ );
this.inlineMenuVisibility = await firstValueFrom(
this.autofillSettingsService.inlineMenuVisibility$,
@@ -308,6 +328,27 @@ export class AutofillComponent implements OnInit {
);
}
+ get spotlightButtonIcon() {
+ if (this.browserClientVendor === BrowserClientVendors.Unknown) {
+ return "bwi-external-link";
+ }
+ return null;
+ }
+
+ get spotlightButtonText() {
+ if (this.browserClientVendor === BrowserClientVendors.Unknown) {
+ return this.i18nService.t("turnOffAutofill");
+ }
+ return this.i18nService.t("turnOffBrowserAutofill", this.browserClientVendor);
+ }
+
+ async dismissSpotlight() {
+ await this.vaultNudgesService.dismissNudge(
+ VaultNudgeType.AutofillNudge,
+ await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId)),
+ );
+ }
+
async updateInlineMenuVisibility() {
if (!this.enableInlineMenu) {
this.enableInlineMenuOnIconSelect = false;
@@ -346,26 +387,6 @@ export class AutofillComponent implements OnInit {
}
}
- private getBrowserClientVendor(): BrowserClientVendor {
- if (this.platformUtilsService.isChrome()) {
- return BrowserClientVendors.Chrome;
- }
-
- if (this.platformUtilsService.isOpera()) {
- return BrowserClientVendors.Opera;
- }
-
- if (this.platformUtilsService.isEdge()) {
- return BrowserClientVendors.Edge;
- }
-
- if (this.platformUtilsService.isVivaldi()) {
- return BrowserClientVendors.Vivaldi;
- }
-
- return BrowserClientVendors.Unknown;
- }
-
protected async openURI(event: Event, uri: BrowserShortcutsUri | DisablePasswordManagerUri) {
event.preventDefault();
@@ -422,7 +443,7 @@ export class AutofillComponent implements OnInit {
if (
this.inlineMenuVisibility === AutofillOverlayVisibility.Off ||
!this.canOverrideBrowserAutofillSetting ||
- (await this.browserAutofillSettingCurrentlyOverridden())
+ this.defaultBrowserAutofillDisabled
) {
return;
}
@@ -460,6 +481,9 @@ export class AutofillComponent implements OnInit {
}
await BrowserApi.updateDefaultBrowserAutofillSettings(!this.defaultBrowserAutofillDisabled);
+ this.autofillBrowserSettingsService.setDefaultBrowserAutofillDisabled(
+ this.defaultBrowserAutofillDisabled,
+ );
}
private handleOverrideDialogAccept = async () => {
@@ -467,18 +491,6 @@ export class AutofillComponent implements OnInit {
await this.updateDefaultBrowserAutofillDisabled();
};
- async browserAutofillSettingCurrentlyOverridden() {
- if (!this.canOverrideBrowserAutofillSetting) {
- return false;
- }
-
- if (!(await this.privacyPermissionGranted())) {
- return false;
- }
-
- return await BrowserApi.browserAutofillSettingsOverridden();
- }
-
async privacyPermissionGranted(): Promise {
return await BrowserApi.permissionsGranted(["privacy"]);
}
diff --git a/apps/browser/src/autofill/services/autofill-browser-settings.service.ts b/apps/browser/src/autofill/services/autofill-browser-settings.service.ts
new file mode 100644
index 00000000000..ba59a655b77
--- /dev/null
+++ b/apps/browser/src/autofill/services/autofill-browser-settings.service.ts
@@ -0,0 +1,31 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+
+import { BrowserClientVendors } from "@bitwarden/common/autofill/constants";
+import { BrowserClientVendor } from "@bitwarden/common/autofill/types";
+
+import { BrowserApi } from "../../platform/browser/browser-api";
+
+/**
+ * Service class for various Autofill-related browser API operations.
+ */
+@Injectable({
+ providedIn: "root",
+})
+export class AutofillBrowserSettingsService {
+ async isBrowserAutofillSettingOverridden(browserClient: BrowserClientVendor) {
+ return (
+ browserClient !== BrowserClientVendors.Unknown &&
+ (await BrowserApi.browserAutofillSettingsOverridden())
+ );
+ }
+
+ private _defaultBrowserAutofillDisabled$ = new BehaviorSubject(false);
+
+ defaultBrowserAutofillDisabled$: Observable =
+ this._defaultBrowserAutofillDisabled$.asObservable();
+
+ setDefaultBrowserAutofillDisabled(value: boolean) {
+ this._defaultBrowserAutofillDisabled$.next(value);
+ }
+}
diff --git a/apps/browser/src/platform/browser/browser-api.ts b/apps/browser/src/platform/browser/browser-api.ts
index 4b4cec7e7da..b27e8ca7c96 100644
--- a/apps/browser/src/platform/browser/browser-api.ts
+++ b/apps/browser/src/platform/browser/browser-api.ts
@@ -2,6 +2,8 @@
// @ts-strict-ignore
import { Observable } from "rxjs";
+import { BrowserClientVendors } from "@bitwarden/common/autofill/constants";
+import { BrowserClientVendor } from "@bitwarden/common/autofill/types";
import { DeviceType } from "@bitwarden/common/enums";
import { isBrowserSafariApi } from "@bitwarden/platform";
@@ -131,6 +133,27 @@ export class BrowserApi {
});
}
+ static getBrowserClientVendor(clientWindow: Window): BrowserClientVendor {
+ const device = BrowserPlatformUtilsService.getDevice(clientWindow);
+
+ switch (device) {
+ case DeviceType.ChromeExtension:
+ case DeviceType.ChromeBrowser:
+ return BrowserClientVendors.Chrome;
+ case DeviceType.OperaExtension:
+ case DeviceType.OperaBrowser:
+ return BrowserClientVendors.Opera;
+ case DeviceType.EdgeExtension:
+ case DeviceType.EdgeBrowser:
+ return BrowserClientVendors.Edge;
+ case DeviceType.VivaldiExtension:
+ case DeviceType.VivaldiBrowser:
+ return BrowserClientVendors.Vivaldi;
+ default:
+ return BrowserClientVendors.Unknown;
+ }
+ }
+
/**
* Gets the tab with the given id.
*
diff --git a/apps/browser/src/platform/popup/view-cache/popup-view-cache.service.ts b/apps/browser/src/platform/popup/view-cache/popup-view-cache.service.ts
index 6fc3e11493c..ff63b52ab3f 100644
--- a/apps/browser/src/platform/popup/view-cache/popup-view-cache.service.ts
+++ b/apps/browser/src/platform/popup/view-cache/popup-view-cache.service.ts
@@ -82,7 +82,7 @@ export class PopupViewCacheService implements ViewCacheService {
initialValue,
persistNavigation,
} = options;
- const cachedValue = this.cache[key]
+ const cachedValue = this.cache[key]?.value
? deserializer(JSON.parse(this.cache[key].value))
: initialValue;
const _signal = signal(cachedValue);
diff --git a/apps/browser/src/tools/popup/settings/settings-v2.component.html b/apps/browser/src/tools/popup/settings/settings-v2.component.html
index b9f4176b927..22e2d9a28d0 100644
--- a/apps/browser/src/tools/popup/settings/settings-v2.component.html
+++ b/apps/browser/src/tools/popup/settings/settings-v2.component.html
@@ -17,7 +17,15 @@
- {{ "autofill" | i18n }}
+
+
{{ "autofill" | i18n }}
+
1
+
- 
-