diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index a3ac0cda882..1d3edd1a5a9 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -1029,6 +1029,9 @@ "clickToAutofillOnVault": { "message": "Click items to autofill on Vault view" }, + "clickToAutofill": { + "message": "Click items in autofill suggestion to fill" + }, "clearClipboard": { "message": "Clear clipboard", "description": "Clipboard is the operating system thing where you copy/paste data to on your device." @@ -2085,6 +2088,9 @@ "message": "to create a strong unique password", "description": "This will be used as part of a larger sentence, broken up to include the generator icon. The full sentence will read 'Use the generator [GENERATOR_ICON] to create a strong unique password'" }, + "vaultCustomization": { + "message": "Vault customization" + }, "vaultTimeoutAction": { "message": "Vault timeout action" }, diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.html b/apps/browser/src/autofill/popup/settings/autofill.component.html index e8299f01166..340197f6bf3 100644 --- a/apps/browser/src/autofill/popup/settings/autofill.component.html +++ b/apps/browser/src/autofill/popup/settings/autofill.component.html @@ -120,7 +120,7 @@ /> {{ "showCardsInVaultViewV2" | i18n }} - + - - - - {{ "clickToAutofillOnVault" | i18n }} - - diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.ts b/apps/browser/src/autofill/popup/settings/autofill.component.ts index 884503fa360..f0b73838ba4 100644 --- a/apps/browser/src/autofill/popup/settings/autofill.component.ts +++ b/apps/browser/src/autofill/popup/settings/autofill.component.ts @@ -109,7 +109,6 @@ export class AutofillComponent implements OnInit { uriMatchOptions: { name: string; value: UriMatchStrategySetting }[]; showCardsCurrentTab: boolean = true; showIdentitiesCurrentTab: boolean = true; - clickItemsVaultView: boolean = false; autofillKeyboardHelperText: string; accountSwitcherEnabled: boolean = false; @@ -211,10 +210,6 @@ export class AutofillComponent implements OnInit { this.showIdentitiesCurrentTab = await firstValueFrom( this.vaultSettingsService.showIdentitiesCurrentTab$, ); - - this.clickItemsVaultView = await firstValueFrom( - this.vaultSettingsService.clickItemsToAutofillVaultView$, - ); } async updateInlineMenuVisibility() { @@ -421,8 +416,4 @@ export class AutofillComponent implements OnInit { async updateShowInlineMenuIdentities() { await this.autofillSettingsService.setShowInlineMenuIdentities(this.showInlineMenuIdentities); } - - async updateClickItemsVaultView() { - await this.vaultSettingsService.setClickItemsToAutofillVaultView(this.clickItemsVaultView); - } } diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.html b/apps/browser/src/vault/popup/settings/appearance-v2.component.html index 3a05d239592..4f7f2757e0e 100644 --- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html +++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html @@ -31,25 +31,32 @@ > - - - {{ "showQuickCopyActions" | i18n }} - - {{ "showNumberOfAutofillSuggestions" | i18n }} - - - {{ "enableFavicon" | i18n }} - - {{ "showAnimations" | i18n }} +

{{ "vaultCustomization" | i18n }}

+ + + + {{ "enableFavicon" | i18n }} + + + + {{ "showQuickCopyActions" | i18n }} + + + + + {{ "clickToAutofill" | i18n }} + + + diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts index bca83a2fba0..7d67a9458b2 100644 --- a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts +++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts @@ -12,6 +12,7 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { ThemeType } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service"; import { PopupCompactModeService } from "../../../platform/popup/layout/popup-compact-mode.service"; import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component"; @@ -36,7 +37,9 @@ class MockPopupHeaderComponent { selector: "popup-page", template: ``, }) -class MockPopupPageComponent {} +class MockPopupPageComponent { + @Input() loading: boolean; +} describe("AppearanceV2Component", () => { let component: AppearanceV2Component; @@ -48,12 +51,14 @@ describe("AppearanceV2Component", () => { const enableRoutingAnimation$ = new BehaviorSubject(true); const enableCompactMode$ = new BehaviorSubject(false); const showQuickCopyActions$ = new BehaviorSubject(false); + const clickItemsToAutofillVaultView$ = new BehaviorSubject(false); const setSelectedTheme = jest.fn().mockResolvedValue(undefined); const setShowFavicons = jest.fn().mockResolvedValue(undefined); const setEnableBadgeCounter = jest.fn().mockResolvedValue(undefined); const setEnableRoutingAnimation = jest.fn().mockResolvedValue(undefined); const setEnableCompactMode = jest.fn().mockResolvedValue(undefined); const setShowQuickCopyActions = jest.fn().mockResolvedValue(undefined); + const setClickItemsToAutofillVaultView = jest.fn().mockResolvedValue(undefined); const mockWidthService: Partial = { width$: new BehaviorSubject("default"), @@ -98,6 +103,13 @@ describe("AppearanceV2Component", () => { provide: PopupSizeService, useValue: mockWidthService, }, + { + provide: VaultSettingsService, + useValue: { + clickItemsToAutofillVaultView$, + setClickItemsToAutofillVaultView, + }, + }, ], }) .overrideComponent(AppearanceV2Component, { @@ -115,7 +127,10 @@ describe("AppearanceV2Component", () => { fixture.detectChanges(); }); - it("populates the form with the user's current settings", () => { + it("populates the form with the user's current settings", async () => { + fixture.detectChanges(); + await fixture.whenStable(); + fixture.detectChanges(); expect(component.appearanceForm.value).toEqual({ enableAnimations: true, enableFavicon: true, @@ -124,6 +139,7 @@ describe("AppearanceV2Component", () => { enableCompactMode: false, showQuickCopyActions: false, width: "default", + clickItemsToAutofillVaultView: false, }); }); @@ -151,5 +167,29 @@ describe("AppearanceV2Component", () => { expect(setEnableRoutingAnimation).toHaveBeenCalledWith(false); }); + + it("updates the compact mode setting", () => { + component.appearanceForm.controls.enableCompactMode.setValue(true); + + expect(setEnableCompactMode).toHaveBeenCalledWith(true); + }); + + it("updates the quick copy actions setting", () => { + component.appearanceForm.controls.showQuickCopyActions.setValue(true); + + expect(setShowQuickCopyActions).toHaveBeenCalledWith(true); + }); + + it("updates the width setting", () => { + component.appearanceForm.controls.width.setValue("wide"); + + expect(mockWidthService.setWidth).toHaveBeenCalledWith("wide"); + }); + + it("updates the click items to autofill vault view setting", () => { + component.appearanceForm.controls.clickItemsToAutofillVaultView.setValue(true); + + expect(setClickItemsToAutofillVaultView).toHaveBeenCalledWith(true); + }); }); }); diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts index deddbd444fc..d6fca96c08c 100644 --- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts +++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts @@ -14,6 +14,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service"; import { ThemeType } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service"; import { BadgeModule, CardComponent, @@ -64,6 +65,7 @@ export class AppearanceV2Component implements OnInit { enableCompactMode: false, showQuickCopyActions: false, width: "default" as PopupWidthOption, + clickItemsToAutofillVaultView: false, }); /** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */ @@ -88,6 +90,7 @@ export class AppearanceV2Component implements OnInit { private destroyRef: DestroyRef, private animationControlService: AnimationControlService, i18nService: I18nService, + private vaultSettingsService: VaultSettingsService, ) { this.themeOptions = [ { name: i18nService.t("systemDefault"), value: ThemeType.System }, @@ -108,6 +111,9 @@ export class AppearanceV2Component implements OnInit { this.copyButtonsService.showQuickCopyActions$, ); const width = await firstValueFrom(this.popupSizeService.width$); + const clickItemsToAutofillVaultView = await firstValueFrom( + this.vaultSettingsService.clickItemsToAutofillVaultView$, + ); // Set initial values for the form this.appearanceForm.setValue({ @@ -118,6 +124,7 @@ export class AppearanceV2Component implements OnInit { enableCompactMode, showQuickCopyActions, width, + clickItemsToAutofillVaultView, }); this.formLoading = false; @@ -163,6 +170,16 @@ export class AppearanceV2Component implements OnInit { .subscribe((width) => { void this.updateWidth(width); }); + + this.appearanceForm.controls.clickItemsToAutofillVaultView.valueChanges + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((clickItemsToAutofillVaultView) => { + void this.updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView); + }); + } + + async updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView: boolean) { + await this.vaultSettingsService.setClickItemsToAutofillVaultView(clickItemsToAutofillVaultView); } async updateFavicon(enableFavicon: boolean) {