Add show secret functionality to vault

tabby-settings/src/components/showSecretModal.component.pug

@@ -0,0 +1,15 @@
+h4.modal-header.m-0.pb-0 {{title}}
+.modal-body
+    .input-group.w-100
+        input.form-control(
+            type='text',
+            [(ngModel)]='secret.value',
+            disabled
+        )
+        button.btn.btn-secondary(
+            (click)='copySecret()'
+        )
+            i.fas.fa-copy
+
+.modal-footer
+    button.btn.btn-primary((click)='close()', translate) Close

tabby-settings/src/components/showSecretModal.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NotificationsService, VaultFileSecret } from 'tabby-core'
+
+/** @hidden */
+@Component({
+    templateUrl: './showSecretModal.component.pug',
+})
+export class ShowSecretModalComponent {
+    @Input() title: string
+    @Input() secret: VaultFileSecret
+
+    constructor (
+        public modalInstance: NgbActiveModal,
+        private notifications: NotificationsService,
+    ) { }
+
+    close (): void {
+        this.modalInstance.dismiss()
+    }
+
+    copySecret (): void {
+        navigator.clipboard.writeText(this.secret.value)
+        // Show a notification
+        this.notifications.info('Copied to clipboard')
+    }
+}

tabby-settings/src/components/vaultSettingsTab.component.pug

@@ -32,6 +32,9 @@ div(*ngIf='vault.isEnabled()')
                     button.btn.btn-link(ngbDropdownToggle)
                         i.fas.fa-ellipsis-v
                     div(ngbDropdownMenu)
+                        button(ngbDropdownItem, (click)='showSecret(secret)')
+                            i.fas.fa-fw.fa-eye
+                            span(translate) Show
                         button(
                             ngbDropdownItem,
                             *ngIf='secret.type === VAULT_SECRET_TYPE_FILE',

tabby-settings/src/components/vaultSettingsTab.component.ts

@@ -3,6 +3,7 @@ import { Component, HostBinding } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { BaseComponent, VaultService, VaultSecret, Vault, PlatformService, ConfigService, VAULT_SECRET_TYPE_FILE, PromptModalComponent, VaultFileSecret, TranslateService } from 'tabby-core'
 import { SetVaultPassphraseModalComponent } from './setVaultPassphraseModal.component'
+import { ShowSecretModalComponent } from './showSecretModal.component'
 
 
 /** @hidden */
@@ -97,6 +98,16 @@ export class VaultSettingsTabComponent extends BaseComponent {
         return this.translate.instant('Unknown secret of type {type} for {key}', { type: secret.type, key: JSON.stringify(secret.key) })
     }
 
+    showSecret (secret: VaultSecret) {
+        if (!this.vaultContents) {
+            return
+        }
+        const modal = this.ngbModal.open(ShowSecretModalComponent)
+        modal.componentInstance.title = this.getSecretLabel(secret)
+        modal.componentInstance.secret = secret
+
+    }
+
     removeSecret (secret: VaultSecret) {
         if (!this.vaultContents) {
             return

tabby-settings/src/index.ts

@@ -19,6 +19,7 @@ import { SetVaultPassphraseModalComponent } from './components/setVaultPassphras
 import { ProfilesSettingsTabComponent } from './components/profilesSettingsTab.component'
 import { ReleaseNotesComponent } from './components/releaseNotesTab.component'
 import { ConfigSyncSettingsTabComponent } from './components/configSyncSettingsTab.component'
+import { ShowSecretModalComponent } from './components/showSecretModal.component'
 
 import { ConfigSyncService } from './services/configSync.service'
 
@@ -61,6 +62,7 @@ import { HotkeySettingsTabProvider, WindowSettingsTabProvider, VaultSettingsTabP
         WindowSettingsTabComponent,
         ConfigSyncSettingsTabComponent,
         ReleaseNotesComponent,
+        ShowSecretModalComponent,
     ],
 })
 export default class SettingsModule {