add event handling for username generator

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"
   ></popup-header>
 
   <vault-cipher-form-generator
     [type]="params.type"
     (valueGenerated)="onValueGenerated($event)"
+    [onAlgorithmSelected]="onAlgorithmSelected"
   ></vault-cipher-form-generator>
 
   <popup-footer slot="footer">
@@ -18,6 +19,7 @@
       buttonType="primary"
       (click)="selectValue()"
       data-testid="select-button"
+      [disabled]="!(selectButtonText && generatedValue)"
     >
       {{ selectButtonText }}
     </button>

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");
   });
 

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<GeneratorDialogResult>,
-    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.
    */

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.html

@@ -1,11 +1,12 @@
 <bit-dialog dialogSize="default" background="alt">
   <span bitDialogTitle>
-    {{ title }}
+    {{ titleKey | i18n }}
   </span>
   <ng-container bitDialogContent>
     <vault-cipher-form-generator
       [type]="params.type"
       (valueGenerated)="onValueGenerated($event)"
+      [onAlgorithmSelected]="onAlgorithmSelected"
       disableMargin
     ></vault-cipher-form-generator>
   </ng-container>
@@ -16,8 +17,9 @@
       buttonType="primary"
       (click)="selectValue()"
       data-testid="select-button"
+      [disabled]="!(buttonLabel && generatedValue)"
     >
-      {{ selectButtonText }}
+      {{ buttonLabel }}
     </button>
   </ng-container>
 </bit-dialog>

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<WebVaultGeneratorDialogResult>,
-    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.
    */