use `valueLabel` with `appCopyClick` directive (#11718)

* add `valueLabel` to `appCopyClick` directives 
* move generated value description to the configuration

libs/tools/generator/components/src/credential-generator.component.html

@@ -32,6 +32,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     ></button>
   </div>
 </bit-card>

libs/tools/generator/components/src/credential-generator.component.ts

@@ -468,6 +468,14 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   /** Emits hint key for the currently selected credential type */
   protected credentialTypeHint$ = new ReplaySubject<string>(1);
 

libs/tools/generator/components/src/password-generator.component.html

@@ -30,6 +30,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     ></button>
   </div>
 </bit-card>

libs/tools/generator/components/src/password-generator.component.ts

@@ -233,6 +233,14 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   private toOptions(algorithms: AlgorithmInfo[]) {
     const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
       value: algorithm.id,

libs/tools/generator/components/src/username-generator.component.html

@@ -19,6 +19,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     >
       {{ credentialTypeCopyLabel$ | async }}
     </button>

libs/tools/generator/components/src/username-generator.component.ts

@@ -390,6 +390,14 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   /** Emits hint key for the currently selected credential type */
   protected credentialTypeHint$ = new ReplaySubject<string>(1);
 

libs/tools/generator/core/src/data/generators.ts

@@ -53,6 +53,7 @@ const PASSPHRASE = Object.freeze({
   category: "password",
   nameKey: "passphrase",
   generateKey: "generatePassphrase",
+  generatedValueKey: "passphrase",
   copyKey: "copyPassphrase",
   onlyOnRequest: false,
   request: [],
@@ -95,6 +96,7 @@ const PASSWORD = Object.freeze({
   category: "password",
   nameKey: "password",
   generateKey: "generatePassword",
+  generatedValueKey: "password",
   copyKey: "copyPassword",
   onlyOnRequest: false,
   request: [],
@@ -145,6 +147,7 @@ const USERNAME = Object.freeze({
   category: "username",
   nameKey: "randomWord",
   generateKey: "generateUsername",
+  generatedValueKey: "username",
   copyKey: "copyUsername",
   onlyOnRequest: false,
   request: [],
@@ -181,6 +184,7 @@ const CATCHALL = Object.freeze({
   nameKey: "catchallEmail",
   descriptionKey: "catchallEmailDesc",
   generateKey: "generateEmail",
+  generatedValueKey: "email",
   copyKey: "copyEmail",
   onlyOnRequest: false,
   request: [],
@@ -217,6 +221,7 @@ const SUBADDRESS = Object.freeze({
   nameKey: "plusAddressedEmail",
   descriptionKey: "plusAddressedEmailDesc",
   generateKey: "generateEmail",
+  generatedValueKey: "email",
   copyKey: "copyEmail",
   onlyOnRequest: false,
   request: [],
@@ -256,6 +261,7 @@ export function toCredentialGeneratorConfiguration<Settings extends ApiSettings
     nameKey: configuration.name,
     descriptionKey: "forwardedEmailDesc",
     generateKey: "generateEmail",
+    generatedValueKey: "email",
     copyKey: "copyEmail",
     onlyOnRequest: true,
     request: configuration.forwarder.request,

libs/tools/generator/core/src/services/credential-generator.service.spec.ts

@@ -73,6 +73,7 @@ const SomeAlgorithm = "passphrase";
 const SomeCategory = "password";
 const SomeNameKey = "passphraseKey";
 const SomeGenerateKey = "generateKey";
+const SomeGeneratedValueKey = "generatedValueKey";
 const SomeCopyKey = "copyKey";
 
 // fake the configuration
@@ -81,6 +82,7 @@ const SomeConfiguration: CredentialGeneratorConfiguration<SomeSettings, SomePoli
   category: SomeCategory,
   nameKey: SomeNameKey,
   generateKey: SomeGenerateKey,
+  generatedValueKey: SomeGeneratedValueKey,
   copyKey: SomeCopyKey,
   onlyOnRequest: false,
   request: [],

libs/tools/generator/core/src/services/credential-generator.service.ts

@@ -258,6 +258,7 @@ export class CredentialGeneratorService {
       category: generator.category,
       name: integration ? integration.name : this.i18nService.t(generator.nameKey),
       generate: this.i18nService.t(generator.generateKey),
+      generatedValue: this.i18nService.t(generator.generatedValueKey),
       copy: this.i18nService.t(generator.copyKey),
       onlyOnRequest: generator.onlyOnRequest,
       request: generator.request,

libs/tools/generator/core/src/types/credential-generator-configuration.ts

@@ -37,6 +37,9 @@ export type AlgorithmInfo = {
   /* Localized copy button label */
   copy: string;
 
+  /* Localized generated value label */
+  generatedValue: string;
+
   /** Localized algorithm description */
   description?: string;
 
@@ -67,18 +70,21 @@ export type CredentialGeneratorInfo = {
   /** The kind of credential generated by this configuration */
   category: CredentialCategory;
 
-  /** Key used to localize the credential name in the I18nService */
+  /** Localization key for the credential name */
   nameKey: string;
 
-  /** Key used to localize the credential description in the I18nService  */
+  /** Localization key for the credential description*/
   descriptionKey?: string;
 
-  /* Localized generate button label */
+  /* Localization key for the generate command label */
   generateKey: string;
 
-  /* Localized copy button label */
+  /* Localization key for the copy button label */
   copyKey: string;
 
+  /* Localization key for describing values generated by this generator */
+  generatedValueKey: string;
+
   /** When true, credential generation must be explicitly requested.
    *  @remarks this property is useful when credential generation
    *   carries side effects, such as configuring a service external