diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 39541aa2f8c..995b90ec661 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -4279,6 +4279,20 @@ } } }, + "viewItemTitleWithField": { + "message": "View item - $ITEMNAME$ - $FIELD$", + "description": "Title for a link that opens a view for an item.", + "placeholders": { + "itemname": { + "content": "$1", + "example": "Secret Item" + }, + "field": { + "content": "$2", + "example": "Username" + } + } + }, "autofillTitle": { "message": "Autofill - $ITEMNAME$", "description": "Title for a button that autofills a login item.", @@ -4289,6 +4303,20 @@ } } }, + "autofillTitleWithField": { + "message": "Autofill - $ITEMNAME$ - $FIELD$", + "description": "Title for a button that autofills a login item.", + "placeholders": { + "itemname": { + "content": "$1", + "example": "Secret Item" + }, + "field": { + "content": "$2", + "example": "Username" + } + } + }, "copyFieldValue": { "message": "Copy $FIELD$, $VALUE$", "description": "Title for a button that copies a field value to the clipboard.", diff --git 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 index 40f00ab4332..19f1668eba4 100644 --- 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 @@ -7,6 +7,6 @@ [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : null" showAutofillButton [disableDescriptionMargin]="showEmptyAutofillTip$ | async" - [primaryActionAutofill]="clickItemsToAutofillVaultView" + [primaryActionAutofill]="clickItemsToAutofillVaultView$ | async" [groupByType]="groupByType()" > diff --git 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 index 03d84120785..72d51776f7b 100644 --- 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 @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { toSignal } from "@angular/core/rxjs-interop"; -import { combineLatest, firstValueFrom, map, Observable } from "rxjs"; +import { combineLatest, map, Observable } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service"; @@ -33,7 +33,7 @@ import { VaultListItemsContainerComponent } from "../vault-list-items-container/ selector: "app-autofill-vault-list-items", templateUrl: "autofill-vault-list-items.component.html", }) -export class AutofillVaultListItemsComponent implements OnInit { +export class AutofillVaultListItemsComponent { /** * The list of ciphers that can be used to autofill the current page. * @protected @@ -47,7 +47,9 @@ export class AutofillVaultListItemsComponent implements OnInit { */ protected showRefresh: boolean = BrowserPopupUtils.inSidebar(window); - clickItemsToAutofillVaultView = false; + /** Flag indicating whether the login item should automatically autofill when clicked */ + protected clickItemsToAutofillVaultView$: Observable = + this.vaultSettingsService.clickItemsToAutofillVaultView$; protected groupByType = toSignal( this.vaultPopupItemsService.hasFilterApplied$.pipe(map((hasFilter) => !hasFilter)), @@ -84,12 +86,6 @@ export class AutofillVaultListItemsComponent implements OnInit { // TODO: Migrate logic to show Autofill policy toast PM-8144 } - async ngOnInit() { - this.clickItemsToAutofillVaultView = await firstValueFrom( - this.vaultSettingsService.clickItemsToAutofillVaultView$, - ); - } - /** * Refreshes the current tab to re-populate the autofill ciphers. * @protected diff --git 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 index cbce4bf2961..a55bba622e4 100644 --- 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 @@ -99,7 +99,9 @@ type="button" (click)="primaryActionOnSelect(cipher)" (dblclick)="launchCipher(cipher)" - [appA11yTitle]="cipherItemTitleKey | async | i18n: cipher.name" + [appA11yTitle]=" + cipherItemTitleKey(cipher) | async | i18n: cipher.name : cipher.login.username + " class="{{ itemHeightClass }}" >
diff --git 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 index 9d70c0ba236..6df1bdf8ae5 100644 --- 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 @@ -206,11 +206,14 @@ export class VaultListItemsContainerComponent implements OnInit, AfterViewInit { /** * Resolved i18n key to use for suggested cipher items */ - cipherItemTitleKey = this.currentURIIsBlocked$.pipe( - map((uriIsBlocked) => - this.primaryActionAutofill && !uriIsBlocked ? "autofillTitle" : "viewItemTitle", - ), - ); + cipherItemTitleKey = (cipher: CipherView) => + this.currentURIIsBlocked$.pipe( + map((uriIsBlocked) => { + const hasUsername = cipher.login?.username != null; + const key = this.primaryActionAutofill && !uriIsBlocked ? "autofillTitle" : "viewItemTitle"; + return hasUsername ? `${key}WithField` : key; + }), + ); /** * Option to show the autofill button for each item. diff --git a/libs/common/src/vault/services/vault-settings/vault-settings.service.ts b/libs/common/src/vault/services/vault-settings/vault-settings.service.ts index 85ab3914158..423acba8fff 100644 --- a/libs/common/src/vault/services/vault-settings/vault-settings.service.ts +++ b/libs/common/src/vault/services/vault-settings/vault-settings.service.ts @@ -1,4 +1,4 @@ -import { Observable, map } from "rxjs"; +import { Observable, map, shareReplay } from "rxjs"; import { ActiveUserState, GlobalState, StateProvider } from "../../../platform/state"; import { VaultSettingsService as VaultSettingsServiceAbstraction } from "../../abstractions/vault-settings/vault-settings.service"; @@ -46,7 +46,10 @@ export class VaultSettingsService implements VaultSettingsServiceAbstraction { * {@link VaultSettingsServiceAbstraction.clickItemsToAutofillVaultView$$} */ readonly clickItemsToAutofillVaultView$: Observable = - this.clickItemsToAutofillVaultViewState.state$.pipe(map((x) => x ?? false)); + this.clickItemsToAutofillVaultViewState.state$.pipe( + map((x) => x ?? false), + shareReplay({ bufferSize: 1, refCount: false }), + ); constructor(private stateProvider: StateProvider) {}