[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
This commit is contained in:
aj-rosado 2023-05-15 12:01:28 +01:00 committed by GitHub
parent e40c9902eb
commit 44fd063dc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 68 deletions

View File

@ -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() {

View File

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

View File

@ -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;