diff --git a/tabby-settings/src/components/vaultSettingsTab.component.pug b/tabby-settings/src/components/vaultSettingsTab.component.pug index cce4d9ff1f..a14cce9d14 100644 --- a/tabby-settings/src/components/vaultSettingsTab.component.pug +++ b/tabby-settings/src/components/vaultSettingsTab.component.pug @@ -4,7 +4,6 @@ .m-3(translate) Vault is an always-encrypted container for secrets such as SSH passwords and private key passphrases. button.btn.btn-primary.m-2((click)='enableVault()', translate) Set master passphrase - div(*ngIf='vault.isEnabled()') .d-flex.align-items-center.mb-3 h3.m-0(translate) Vault @@ -19,12 +18,22 @@ div(*ngIf='vault.isEnabled()') span(translate) Erase the Vault div(*ngIf='vaultContents') + .input-group.mb-4 + .input-group-text + i.fas.fa-fw.fa-search + input.form-control( + type='search', + [placeholder]='"Filter"|translate', + [(ngModel)]='searchTerm', + (ngModelChange)='updateFilteredSecrets()' + ) + .text-center(*ngIf='!vaultContents.secrets.length') i.fas.fa-empty-set.fa-3x h3.m-3(translate) Vault is empty .list-group - .list-group-item.d-flex.align-items-center.p-1.ps-3(*ngFor='let secret of vaultContents.secrets') + .list-group-item.d-flex.align-items-center.p-1.ps-3(*ngFor='let secret of filteredSecrets') i.fas.fa-key .me-auto {{getSecretLabel(secret)}} diff --git a/tabby-settings/src/components/vaultSettingsTab.component.ts b/tabby-settings/src/components/vaultSettingsTab.component.ts index 1bb2c51ff8..bd0beb7679 100644 --- a/tabby-settings/src/components/vaultSettingsTab.component.ts +++ b/tabby-settings/src/components/vaultSettingsTab.component.ts @@ -14,7 +14,8 @@ import { ShowSecretModalComponent } from './showSecretModal.component' export class VaultSettingsTabComponent extends BaseComponent { vaultContents: Vault|null = null VAULT_SECRET_TYPE_FILE = VAULT_SECRET_TYPE_FILE - + searchTerm = '' + filteredSecrets: any[] = [] @HostBinding('class.content-box') true constructor ( @@ -32,6 +33,18 @@ export class VaultSettingsTabComponent extends BaseComponent { async loadVault (): Promise { this.vaultContents = await this.vault.load() + this.filteredSecrets = this.vaultContents?.secrets ?? [] + } + + updateFilteredSecrets () { + if (!this.vaultContents?.secrets) { + this.filteredSecrets = [] + return + } + const term = this.searchTerm.toLowerCase() + this.filteredSecrets = this.vaultContents.secrets.filter((secret) => + this.getSecretLabel(secret).toLowerCase().includes(term), + ) } async enableVault () {