From 73cffbcc6bc4635968bbc355369ad3ce21753d2e Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Fri, 31 Jan 2025 11:18:34 -0800 Subject: [PATCH] add event handling for username generator --- .../vault-generator-dialog.component.html | 4 +++- .../vault-generator-dialog.component.spec.ts | 4 ++-- .../vault-generator-dialog.component.ts | 21 +++++++++++++----- .../web-generator-dialog.component.html | 6 +++-- .../web-generator-dialog.component.ts | 22 +++++++++++++------ 5 files changed, 39 insertions(+), 18 deletions(-) diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.html index 72aaeea493d..46c7e428369 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.html +++ b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.html @@ -3,12 +3,13 @@ slot="header" [backAction]="close" showBackButton - [pageTitle]="title" + [pageTitle]="titleKey | i18n" > @@ -18,6 +19,7 @@ buttonType="primary" (click)="selectValue()" data-testid="select-button" + [disabled]="!(selectButtonText && generatedValue)" > {{ selectButtonText }} diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts index d37bc367110..b44843a8319 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts +++ b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts @@ -60,7 +60,7 @@ describe("VaultGeneratorDialogComponent", () => { }); it("should use the appropriate text based on generator type", () => { - expect(component["title"]).toBe("passwordGenerator"); + expect(component["titleKey"]).toBe("passwordGenerator"); expect(component["selectButtonText"]).toBe("useThisPassword"); dialogData.type = "username"; @@ -68,7 +68,7 @@ describe("VaultGeneratorDialogComponent", () => { fixture = TestBed.createComponent(VaultGeneratorDialogComponent); component = fixture.componentInstance; - expect(component["title"]).toBe("usernameGenerator"); + expect(component["titleKey"]).toBe("usernameGenerator"); expect(component["selectButtonText"]).toBe("useThisUsername"); }); diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.ts index d050312211b..048f1ca096f 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.ts +++ b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.ts @@ -5,8 +5,9 @@ import { Overlay } from "@angular/cdk/overlay"; import { CommonModule } from "@angular/common"; import { Component, Inject } from "@angular/core"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { ButtonModule, DialogService } from "@bitwarden/components"; +import { AlgorithmInfo } from "@bitwarden/generator-core"; +import { I18nPipe } from "@bitwarden/ui-common"; import { CipherFormGeneratorComponent } from "@bitwarden/vault"; import { PopupFooterComponent } from "../../../../../platform/popup/layout/popup-footer.component"; @@ -38,13 +39,12 @@ export enum GeneratorDialogAction { CommonModule, CipherFormGeneratorComponent, ButtonModule, + I18nPipe, ], }) export class VaultGeneratorDialogComponent { - protected title = this.i18nService.t(this.isPassword ? "passwordGenerator" : "usernameGenerator"); - protected selectButtonText = this.i18nService.t( - this.isPassword ? "useThisPassword" : "useThisUsername", - ); + protected selectButtonText: string | undefined; + protected titleKey = this.isPassword ? "passwordGenerator" : "usernameGenerator"; /** * Whether the dialog is generating a password/passphrase. If false, it is generating a username. @@ -63,7 +63,6 @@ export class VaultGeneratorDialogComponent { constructor( @Inject(DIALOG_DATA) protected params: GeneratorDialogParams, private dialogRef: DialogRef, - private i18nService: I18nService, ) {} /** @@ -87,6 +86,16 @@ export class VaultGeneratorDialogComponent { this.generatedValue = value; } + onAlgorithmSelected = (selected?: AlgorithmInfo) => { + if (selected) { + this.selectButtonText = selected.useGeneratedValue; + } else { + // clear the credential value when the user is + // selecting the credential generation algorithm + this.generatedValue = undefined; + } + }; + /** * Opens the vault generator dialog in a full screen dialog. */ diff --git a/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.html b/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.html index e224d1d19cc..3f1a3882dad 100644 --- a/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.html +++ b/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.html @@ -1,11 +1,12 @@ - {{ title }} + {{ titleKey | i18n }} @@ -16,8 +17,9 @@ buttonType="primary" (click)="selectValue()" data-testid="select-button" + [disabled]="!(buttonLabel && generatedValue)" > - {{ selectButtonText }} + {{ buttonLabel }} diff --git a/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.ts b/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.ts index d21403dd4e5..669323accca 100644 --- a/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.ts +++ b/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.ts @@ -4,8 +4,9 @@ import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog"; import { CommonModule } from "@angular/common"; import { Component, Inject } from "@angular/core"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components"; +import { AlgorithmInfo } from "@bitwarden/generator-core"; +import { I18nPipe } from "@bitwarden/ui-common"; import { CipherFormGeneratorComponent } from "@bitwarden/vault"; export interface WebVaultGeneratorDialogParams { @@ -26,13 +27,11 @@ export enum WebVaultGeneratorDialogAction { selector: "web-vault-generator-dialog", templateUrl: "./web-generator-dialog.component.html", standalone: true, - imports: [CommonModule, CipherFormGeneratorComponent, ButtonModule, DialogModule], + imports: [CommonModule, CipherFormGeneratorComponent, ButtonModule, DialogModule, I18nPipe], }) export class WebVaultGeneratorDialogComponent { - protected title = this.i18nService.t(this.isPassword ? "passwordGenerator" : "usernameGenerator"); - protected selectButtonText = this.i18nService.t( - this.isPassword ? "useThisPassword" : "useThisUsername", - ); + protected titleKey = this.isPassword ? "passwordGenerator" : "usernameGenerator"; + protected buttonLabel: string | undefined; /** * Whether the dialog is generating a password/passphrase. If false, it is generating a username. @@ -51,7 +50,6 @@ export class WebVaultGeneratorDialogComponent { constructor( @Inject(DIALOG_DATA) protected params: WebVaultGeneratorDialogParams, private dialogRef: DialogRef, - private i18nService: I18nService, ) {} /** @@ -75,6 +73,16 @@ export class WebVaultGeneratorDialogComponent { this.generatedValue = value; } + onAlgorithmSelected = (selected?: AlgorithmInfo) => { + if (selected) { + this.buttonLabel = selected.useGeneratedValue; + } else { + // clear the credential value when the user is + // selecting the credential generation algorithm + this.generatedValue = undefined; + } + }; + /** * Opens the vault generator dialog. */