[PM-17688] - generator dialog - add missing button label i18n keys. fix logic for disabling button (#13140)

* add missing button label i18n keys. fix logic for displaying button label

* Update comment

Co-authored-by: ✨ Audrey ✨ <ajensen@bitwarden.com>

---------

Co-authored-by: ✨ Audrey ✨ <ajensen@bitwarden.com>

apps/browser/src/_locales/en/messages.json

@@ -2061,6 +2061,9 @@
   "usernameGenerator": {
     "message": "Username generator"
   },
+  "useThisEmail": {
+    "message": "Use this email"
+  },
   "useThisPassword": {
     "message": "Use this password"
   },

apps/desktop/src/locales/en/messages.json

@@ -2550,6 +2550,9 @@
   "catchallEmailDesc": {
     "message": "Use your domain's configured catch-all inbox."
   },
+  "useThisEmail": {
+    "message": "Use this email"
+  },
   "random": {
     "message": "Random"
   },

apps/desktop/src/vault/app/vault/credential-generator-dialog.component.html

@@ -4,7 +4,7 @@
     <vault-cipher-form-generator
       [type]="data.type"
       (valueGenerated)="onCredentialGenerated($event)"
-      [algorithm]="algorithm"
+      [onAlgorithmSelected]="onAlgorithmSelected"
     />
     <bit-item>
       <button
@@ -28,6 +28,7 @@
       appA11yTitle="{{ buttonLabel }}"
       bitButton
       bitDialogClose
+      [disabled]="!(buttonLabel && credentialValue)"
     >
       {{ buttonLabel }}
     </button>

apps/desktop/src/vault/app/vault/credential-generator-dialog.component.ts

@@ -46,8 +46,14 @@ export class CredentialGeneratorDialogComponent {
     private dialogService: DialogService,
   ) {}
 
-  algorithm = (selected: AlgorithmInfo) => {
+  onAlgorithmSelected = (selected?: AlgorithmInfo) => {
+    if (selected) {
       this.buttonLabel = selected.useGeneratedValue;
+    } else {
+      // clear the credential value when the user is
+      // selecting the credential generation algorithm
+      this.credentialValue = undefined;
+    }
   };
 
   applyCredentials = () => {

apps/web/src/locales/en/messages.json

@@ -6767,6 +6767,9 @@
   "catchallEmailDesc": {
     "message": "Use your domain's configured catch-all inbox."
   },
+  "useThisEmail": {
+    "message": "Use this email"
+  },
   "random": {
     "message": "Random",
     "description": "Generates domain-based username using random letters"

libs/vault/src/cipher-form/components/cipher-generator/cipher-form-generator.component.html

@@ -2,11 +2,11 @@
   *ngIf="type === 'password'"
   [disableMargin]="disableMargin"
   (onGenerated)="onCredentialGenerated($event)"
-  (onAlgorithm)="algorithm($event)"
+  (onAlgorithm)="onAlgorithmSelected($event)"
 ></tools-password-generator>
 <tools-username-generator
   *ngIf="type === 'username'"
   [disableMargin]="disableMargin"
   (onGenerated)="onCredentialGenerated($event)"
-  (onAlgorithm)="algorithm($event)"
+  (onAlgorithm)="onAlgorithmSelected($event)"
 ></tools-username-generator>

libs/vault/src/cipher-form/components/cipher-generator/cipher-form-generator.component.ts

@@ -19,7 +19,7 @@ import { AlgorithmInfo, GeneratedCredential } from "@bitwarden/generator-core";
 })
 export class CipherFormGeneratorComponent {
   @Input()
-  algorithm: (selected: AlgorithmInfo) => void;
+  onAlgorithmSelected: (selected: AlgorithmInfo) => void;
 
   /**
    * The type of generator form to show.