[SM-1292] Add secret view dialog (#9445)

* Add secret view dialog

* Use secret view dialog

apps/web/src/locales/en/messages.json

@@ -8354,5 +8354,8 @@
   },
   "verified": {
     "message": "Verified"
+  },
+  "viewSecret": {
+    "message": "View secret"
   }
 }

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html

@@ -65,6 +65,7 @@
         (deleteSecretsEvent)="openDeleteSecret($event)"
         (newSecretEvent)="openNewSecretDialog()"
         (editSecretEvent)="openEditSecret($event)"
+        (viewSecretEvent)="openViewSecret($event)"
         (copySecretNameEvent)="copySecretName($event)"
         (copySecretValueEvent)="copySecretValue($event)"
         (copySecretUuidEvent)="copySecretUuid($event)"

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.ts

@@ -41,6 +41,10 @@ import {
   SecretDialogComponent,
   SecretOperation,
 } from "../secrets/dialog/secret-dialog.component";
+import {
+  SecretViewDialogComponent,
+  SecretViewDialogParams,
+} from "../secrets/dialog/secret-view-dialog.component";
 import { SecretService } from "../secrets/secret.service";
 import {
   ServiceAccountDialogComponent,
@@ -277,6 +281,15 @@ export class OverviewComponent implements OnInit, OnDestroy {
     });
   }
 
+  openViewSecret(secretId: string) {
+    this.dialogService.open<unknown, SecretViewDialogParams>(SecretViewDialogComponent, {
+      data: {
+        organizationId: this.organizationId,
+        secretId: secretId,
+      },
+    });
+  }
+
   openDeleteSecret(event: SecretListView[]) {
     this.dialogService.open<unknown, SecretDeleteOperation>(SecretDeleteDialogComponent, {
       data: {

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project-secrets.component.html

@@ -14,6 +14,7 @@
       (deleteSecretsEvent)="openDeleteSecret($event)"
       (newSecretEvent)="openNewSecretDialog()"
       (editSecretEvent)="openEditSecret($event)"
+      (viewSecretEvent)="openViewSecret($event)"
       (copySecretNameEvent)="copySecretName($event)"
       (copySecretValueEvent)="copySecretValue($event)"
       (copySecretUuidEvent)="copySecretUuid($event)"

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project-secrets.component.ts

@@ -19,6 +19,10 @@ import {
   SecretDialogComponent,
   SecretOperation,
 } from "../../secrets/dialog/secret-dialog.component";
+import {
+  SecretViewDialogComponent,
+  SecretViewDialogParams,
+} from "../../secrets/dialog/secret-view-dialog.component";
 import { SecretService } from "../../secrets/secret.service";
 import { SecretsListComponent } from "../../shared/secrets-list.component";
 import { ProjectService } from "../project.service";
@@ -88,6 +92,15 @@ export class ProjectSecretsComponent {
     });
   }
 
+  openViewSecret(secretId: string) {
+    this.dialogService.open<unknown, SecretViewDialogParams>(SecretViewDialogComponent, {
+      data: {
+        organizationId: this.organizationId,
+        secretId: secretId,
+      },
+    });
+  }
+
   openDeleteSecret(event: SecretListView[]) {
     this.dialogService.open<unknown, SecretDeleteOperation>(SecretDeleteDialogComponent, {
       data: {

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-view-dialog.component.html

@@ -0,0 +1,30 @@
+<form [formGroup]="formGroup">
+  <bit-dialog
+    dialogSize="large"
+    [loading]="loading"
+    [title]="'viewSecret' | i18n"
+    [subtitle]="formGroup.get('name').value"
+  >
+    <ng-container bitDialogContent class="tw-relative">
+      <div class="tw-flex tw-gap-4 tw-pt-4">
+        <bit-form-field class="tw-w-1/3">
+          <bit-label>{{ "name" | i18n }}</bit-label>
+          <input appAutofocus formControlName="name" bitInput />
+        </bit-form-field>
+        <bit-form-field class="tw-w-full">
+          <bit-label>{{ "value" | i18n }}</bit-label>
+          <textarea bitInput rows="4" formControlName="value"></textarea>
+        </bit-form-field>
+      </div>
+      <bit-form-field>
+        <bit-label>{{ "notes" | i18n }}</bit-label>
+        <textarea bitInput rows="4" formControlName="notes"></textarea>
+      </bit-form-field>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button type="button" bitButton buttonType="primary" bitFormButton bitDialogClose>
+        {{ "close" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-view-dialog.component.ts

@@ -0,0 +1,39 @@
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject, OnInit } from "@angular/core";
+import { FormControl, FormGroup } from "@angular/forms";
+
+import { SecretService } from "../secret.service";
+
+export interface SecretViewDialogParams {
+  organizationId: string;
+  secretId: string;
+}
+
+@Component({
+  templateUrl: "./secret-view-dialog.component.html",
+})
+export class SecretViewDialogComponent implements OnInit {
+  protected loading = true;
+  protected formGroup = new FormGroup({
+    name: new FormControl(""),
+    value: new FormControl(""),
+    notes: new FormControl(""),
+  });
+
+  constructor(
+    private secretService: SecretService,
+    @Inject(DIALOG_DATA) private params: SecretViewDialogParams,
+  ) {}
+
+  async ngOnInit() {
+    this.loading = true;
+    const secret = await this.secretService.getBySecretId(this.params.secretId);
+    this.formGroup.setValue({
+      name: secret.name,
+      value: secret.value,
+      notes: secret.note,
+    });
+    this.formGroup.disable();
+    this.loading = false;
+  }
+}

bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.component.html

@@ -10,6 +10,7 @@
   (deleteSecretsEvent)="openDeleteSecret($event)"
   (newSecretEvent)="openNewSecretDialog()"
   (editSecretEvent)="openEditSecret($event)"
+  (viewSecretEvent)="openViewSecret($event)"
   (copySecretNameEvent)="copySecretName($event)"
   (copySecretValueEvent)="copySecretValue($event)"
   (copySecretUuidEvent)="copySecretUuid($event)"

bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.component.ts

@@ -20,6 +20,10 @@ import {
   SecretDialogComponent,
   SecretOperation,
 } from "./dialog/secret-dialog.component";
+import {
+  SecretViewDialogComponent,
+  SecretViewDialogParams,
+} from "./dialog/secret-view-dialog.component";
 import { SecretService } from "./secret.service";
 
 @Component({
@@ -77,6 +81,15 @@ export class SecretsComponent implements OnInit {
     });
   }
 
+  openViewSecret(secretId: string) {
+    this.dialogService.open<unknown, SecretViewDialogParams>(SecretViewDialogComponent, {
+      data: {
+        organizationId: this.organizationId,
+        secretId: secretId,
+      },
+    });
+  }
+
   openDeleteSecret(event: SecretListView[]) {
     this.dialogService.open<unknown, SecretDeleteOperation>(SecretDeleteDialogComponent, {
       data: {

bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.module.ts

@@ -4,12 +4,18 @@ import { SecretsManagerSharedModule } from "../shared/sm-shared.module";
 
 import { SecretDeleteDialogComponent } from "./dialog/secret-delete.component";
 import { SecretDialogComponent } from "./dialog/secret-dialog.component";
+import { SecretViewDialogComponent } from "./dialog/secret-view-dialog.component";
 import { SecretsRoutingModule } from "./secrets-routing.module";
 import { SecretsComponent } from "./secrets.component";
 
 @NgModule({
   imports: [SecretsManagerSharedModule, SecretsRoutingModule],
-  declarations: [SecretDeleteDialogComponent, SecretDialogComponent, SecretsComponent],
+  declarations: [
+    SecretDeleteDialogComponent,
+    SecretDialogComponent,
+    SecretViewDialogComponent,
+    SecretsComponent,
+  ],
   providers: [],
 })
 export class SecretsModule {}

bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html

@@ -66,7 +66,7 @@
           <i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
           <div>
             <div *ngIf="!trash">
-              <button type="button" bitLink (click)="editSecretEvent.emit(secret.id)">
+              <button type="button" bitLink (click)="editSecret(secret)">
                 {{ secret.name }}
               </button>
             </div>
@@ -118,7 +118,7 @@
         <button
           type="button"
           bitMenuItem
-          (click)="editSecretEvent.emit(secret.id)"
+          (click)="editSecret(secret)"
           *ngIf="secret.write && !trash"
         >
           <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>

bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.ts

@@ -37,6 +37,7 @@ export class SecretsListComponent implements OnDestroy {
   @Input() trash: boolean;
 
   @Output() editSecretEvent = new EventEmitter<string>();
+  @Output() viewSecretEvent = new EventEmitter<string>();
   @Output() copySecretNameEvent = new EventEmitter<string>();
   @Output() copySecretValueEvent = new EventEmitter<string>();
   @Output() copySecretUuidEvent = new EventEmitter<string>();
@@ -116,6 +117,14 @@ export class SecretsListComponent implements OnDestroy {
     return aProjects[0]?.name.localeCompare(bProjects[0].name);
   };
 
+  protected editSecret(secret: SecretListView) {
+    if (secret.write) {
+      this.editSecretEvent.emit(secret.id);
+    } else {
+      this.viewSecretEvent.emit(secret.id);
+    }
+  }
+
   /**
    * TODO: Refactor to smart component and remove
    */