[PM-2054] Updated Password Generator History to use Component Library on Web (#5414)

* [PM-2054] Updated Password Generator History to use Component Library

* [PM-2054] Corrected paddings

* [PM-2054] Added missing type to buttons

* [PM-2054] Removed unused imports and run prettier

* [PM-2054] Swap list by bit-table

apps/web/src/app/tools/generator.component.ts

@@ -1,7 +1,7 @@
-import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
-import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { GeneratorComponent as BaseGeneratorComponent } from "@bitwarden/angular/tools/generator/components/generator.component";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -17,9 +17,6 @@ import { PasswordGeneratorHistoryComponent } from "./password-generator-history.
   templateUrl: "generator.component.html",
 })
 export class GeneratorComponent extends BaseGeneratorComponent {
-  @ViewChild("historyTemplate", { read: ViewContainerRef, static: true })
-  historyModalRef: ViewContainerRef;
-
   constructor(
     passwordGenerationService: PasswordGenerationServiceAbstraction,
     usernameGenerationService: UsernameGenerationServiceAbstraction,
@@ -28,7 +25,7 @@ export class GeneratorComponent extends BaseGeneratorComponent {
     i18nService: I18nService,
     logService: LogService,
     route: ActivatedRoute,
-    private modalService: ModalService
+    private dialogService: DialogServiceAbstraction
   ) {
     super(
       passwordGenerationService,
@@ -47,7 +44,7 @@ export class GeneratorComponent extends BaseGeneratorComponent {
   }
 
   async history() {
-    await this.modalService.openViewRef(PasswordGeneratorHistoryComponent, this.historyModalRef);
+    this.dialogService.open(PasswordGeneratorHistoryComponent);
   }
 
   lengthChanged() {

apps/web/src/app/tools/password-generator-history.component.html

@@ -1,59 +1,47 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="passHistoryTitle">
+<bit-dialog>
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
+  <span bitDialogTitle>
-    <div class="modal-content">
+    {{ "passwordHistory" | i18n }}
-      <div class="modal-header">
+  </span>
-        <h1 class="modal-title" id="passHistoryTitle">{{ "passwordHistory" | i18n }}</h1>
+  <span bitDialogContent>
-        <button
+    <bit-table *ngIf="history.length">
-          type="button"
+      <ng-template body>
-          class="close"
+        <tr bitRow *ngFor="let h of history">
-          data-dismiss="modal"
+          <td bitCell>
-          appA11yTitle="{{ 'close' | i18n }}"
+            <bit-color-password
-        >
+              [password]="h.password"
-          <span aria-hidden="true">&times;</span>
+              class="tw-block tw-font-mono"
-        </button>
+              appSelectCopy
-      </div>
+            ></bit-color-password>
-      <div class="modal-body" *ngIf="history.length">
+            <small bitTypography="body2" class="tw-text-muted">
-        <ul class="list-group list-group-flush">
+              {{ h.date | date : "medium" }}
-          <li class="list-group-item d-flex" *ngFor="let h of history">
+            </small>
-            <div class="tw-min-w-0">
+          </td>
-              <bit-color-password
+          <td bitCell class="tw-w-0">
-                [password]="h.password"
+            <button
-                class="tw-block tw-font-mono"
+              type="button"
-                appSelectCopy
+              bitIconButton="bwi-clone"
-              ></bit-color-password>
+              (click)="copy(h.password)"
-              <small class="text-muted">{{ h.date | date : "medium" }}</small>
+              [appA11yTitle]="'copyPassword' | i18n"
-            </div>
+            ></button>
-            <div class="ml-auto">
+          </td>
-              <button
+        </tr>
-                type="button"
+      </ng-template>
-                class="btn btn-link"
+    </bit-table>
-                appA11yTitle="{{ 'copyPassword' | i18n }}"
+    <div *ngIf="!history.length">
-                (click)="copy(h.password)"
+      {{ "noPasswordsInList" | i18n }}
-              >
-                <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="modal-body" *ngIf="!history.length">
-        {{ "noPasswordsInList" | i18n }}
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "close" | i18n }}
-        </button>
-        <div class="ml-auto">
-          <button
-            type="button"
-            (click)="clear()"
-            class="btn btn-outline-danger"
-            appA11yTitle="{{ 'clear' | i18n }}"
-          >
-            <i class="bwi bwi-trash bwi-lg bwi-fw" aria-hidden="true"></i>
-          </button>
-        </div>
-      </div>
     </div>
-  </div>
+  </span>
-</div>
+  <ng-container bitDialogFooter>
+    <button type="button" bitButton buttonType="secondary" bitDialogClose>
+      {{ "close" | i18n }}
+    </button>
+    <button
+      type="button"
+      class="tw-ml-auto"
+      bitIconButton="bwi-trash"
+      buttonType="danger"
+      title="{{ 'clear' | i18n }}"
+      [bitAction]="clear"
+    ></button>
+  </ng-container>
+</bit-dialog>

libs/angular/src/tools/generator/components/password-generator-history.component.ts

@@ -22,10 +22,10 @@ export class PasswordGeneratorHistoryComponent implements OnInit {
     this.history = await this.passwordGenerationService.getHistory();
   }
 
-  clear() {
+  clear = async () => {
     this.history = [];
-    this.passwordGenerationService.clear();
+    await this.passwordGenerationService.clear();
-  }
+  };
 
   copy(password: string) {
     const copyOptions = this.win != null ? { window: this.win } : null;