[PM-16858] - adjust generator dialog action button to match browser extension UI (#12788)

* adjust generator dialog buttons to match browser extension UI

* put dialog label into generator config

* fix types. remove i18n key

* use event emitted pattern for getting algorithm config

* favor arrow function

* move function call

* append key to i18n prop

* fix test

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

@@ -2879,6 +2879,12 @@
   "weakAndBreachedMasterPasswordDesc": {
     "message": "Weak password identified and found in a data breach. Use a strong and unique password to protect your account. Are you sure you want to use this password?"
   },
+  "useThisPassword": {
+    "message": "Use this password"
+  },
+  "useThisUsername": {
+    "message": "Use this username"
+  },
   "checkForBreaches": {
     "message": "Check known data breaches for this password"
   },

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

@@ -4,6 +4,7 @@
     <vault-cipher-form-generator
       [type]="data.type"
       (valueGenerated)="onCredentialGenerated($event)"
+      [algorithm]="algorithm"
     />
     <bit-item>
       <button
@@ -25,13 +26,10 @@
         type="button"
         class="primary"
         (click)="applyCredentials()"
-        appA11yTitle="{{ 'select' | i18n }}"
+        appA11yTitle="{{ buttonLabel }}"
         bitDialogClose
       >
-        <i class="bwi bwi-lg bwi-fw bwi-check" aria-hidden="true"></i>
-      </button>
-      <button type="button" data-dismiss="modal" (click)="clearCredentials()" bitDialogClose>
-        {{ "cancel" | i18n }}
+        {{ buttonLabel }}
       </button>
     </div>
   </ng-container>

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

@@ -14,6 +14,7 @@ import {
   CredentialGeneratorHistoryDialogComponent,
   GeneratorModule,
 } from "@bitwarden/generator-components";
+import { AlgorithmInfo } from "@bitwarden/generator-core";
 import { CipherFormGeneratorComponent } from "@bitwarden/vault";
 
 type CredentialGeneratorParams = {
@@ -38,12 +39,17 @@ type CredentialGeneratorParams = {
 })
 export class CredentialGeneratorDialogComponent {
   credentialValue?: string;
+  buttonLabel?: string;
 
   constructor(
     @Inject(DIALOG_DATA) protected data: CredentialGeneratorParams,
     private dialogService: DialogService,
   ) {}
 
+  algorithm = (selected: AlgorithmInfo) => {
+    this.buttonLabel = selected.useGeneratedValue;
+  };
+
   applyCredentials = () => {
     this.data.onCredentialGenerated(this.credentialValue);
   };