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