[PM-8335] Show autofill suggestion when no autofill login items present (#9521)
This commit is contained in:
parent
7d12d1a74f
commit
79968c2d32
|
@ -4,25 +4,6 @@
|
||||||
[title]="'autofillSuggestions' | i18n"
|
[title]="'autofillSuggestions' | i18n"
|
||||||
[showRefresh]="showRefresh"
|
[showRefresh]="showRefresh"
|
||||||
(onRefresh)="refreshCurrentTab()"
|
(onRefresh)="refreshCurrentTab()"
|
||||||
|
[description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : null"
|
||||||
showAutofillButton
|
showAutofillButton
|
||||||
></app-vault-list-items-container>
|
></app-vault-list-items-container>
|
||||||
<ng-container *ngIf="showEmptyAutofillTip$ | async">
|
|
||||||
<bit-section>
|
|
||||||
<bit-section-header>
|
|
||||||
<h2 bitTypography="h6">
|
|
||||||
{{ "autofillSuggestions" | i18n }}
|
|
||||||
</h2>
|
|
||||||
<button
|
|
||||||
*ngIf="showRefresh"
|
|
||||||
bitIconButton="bwi-refresh"
|
|
||||||
size="small"
|
|
||||||
type="button"
|
|
||||||
[appA11yTitle]="'refresh' | i18n"
|
|
||||||
(click)="refreshCurrentTab()"
|
|
||||||
></button>
|
|
||||||
</bit-section-header>
|
|
||||||
<span class="tw-text-muted tw-px-1" bitTypography="body2">{{
|
|
||||||
"autofillSuggestionsTip" | i18n
|
|
||||||
}}</span>
|
|
||||||
</bit-section>
|
|
||||||
</ng-container>
|
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { Component } from "@angular/core";
|
||||||
import { combineLatest, map, Observable } from "rxjs";
|
import { combineLatest, map, Observable } from "rxjs";
|
||||||
|
|
||||||
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||||
|
import { CipherType } from "@bitwarden/common/vault/enums";
|
||||||
import {
|
import {
|
||||||
IconButtonModule,
|
IconButtonModule,
|
||||||
SectionComponent,
|
SectionComponent,
|
||||||
|
@ -45,7 +46,7 @@ export class AutofillVaultListItemsComponent {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Observable that determines whether the empty autofill tip should be shown.
|
* Observable that determines whether the empty autofill tip should be shown.
|
||||||
* The tip is shown when there are no ciphers to autofill, no filter is applied, and autofill is allowed in
|
* The tip is shown when there are no login ciphers to autofill, no filter is applied, and autofill is allowed in
|
||||||
* the current context (e.g. not in a popout).
|
* the current context (e.g. not in a popout).
|
||||||
* @protected
|
* @protected
|
||||||
*/
|
*/
|
||||||
|
@ -54,7 +55,10 @@ export class AutofillVaultListItemsComponent {
|
||||||
this.autofillCiphers$,
|
this.autofillCiphers$,
|
||||||
this.vaultPopupItemsService.autofillAllowed$,
|
this.vaultPopupItemsService.autofillAllowed$,
|
||||||
]).pipe(
|
]).pipe(
|
||||||
map(([hasFilter, ciphers, canAutoFill]) => !hasFilter && canAutoFill && ciphers.length === 0),
|
map(
|
||||||
|
([hasFilter, ciphers, canAutoFill]) =>
|
||||||
|
!hasFilter && canAutoFill && ciphers.filter((c) => c.type == CipherType.Login).length === 0,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
constructor(private vaultPopupItemsService: VaultPopupItemsService) {
|
constructor(private vaultPopupItemsService: VaultPopupItemsService) {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<bit-section *ngIf="ciphers?.length > 0">
|
<bit-section *ngIf="ciphers?.length > 0 || description">
|
||||||
<bit-section-header>
|
<bit-section-header>
|
||||||
<h2 bitTypography="h6">
|
<h2 bitTypography="h6">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
|
@ -13,6 +13,9 @@
|
||||||
></button>
|
></button>
|
||||||
<span bitTypography="body2" slot="end">{{ ciphers.length }}</span>
|
<span bitTypography="body2" slot="end">{{ ciphers.length }}</span>
|
||||||
</bit-section-header>
|
</bit-section-header>
|
||||||
|
<div *ngIf="description" class="tw-text-muted tw-px-1 tw-mb-2" bitTypography="body2">
|
||||||
|
{{ description }}
|
||||||
|
</div>
|
||||||
<bit-item-group>
|
<bit-item-group>
|
||||||
<bit-item *ngFor="let cipher of ciphers">
|
<bit-item *ngFor="let cipher of ciphers">
|
||||||
<a
|
<a
|
||||||
|
|
|
@ -50,6 +50,13 @@ export class VaultListItemsContainerComponent {
|
||||||
@Input()
|
@Input()
|
||||||
title: string;
|
title: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Optional description for the vault list item section. Will be shown below the title even when
|
||||||
|
* no ciphers are available.
|
||||||
|
*/
|
||||||
|
@Input()
|
||||||
|
description: string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Option to show a refresh button in the section header.
|
* Option to show a refresh button in the section header.
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue