[PM-13172] Create desktop-specifc full credential-generator component (#11407)

* Create desktop-specifc full credential-generator component

* Add missing entries in en/messages.json

* Import and use conditional routing for new credential generator component

app.component: The original if, didn't make any sense as it meant that it would behave differently on the Send page vs Vault, which it doesn't, in addition to a duplicate message receiver was added in vault.component which I also removed.

Old generator for cipher add/edit is still in place and will be replaced by the vault team

* Update comment to include FIXME which is more easily searchable

* Add fixme comment for future extension

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

apps/desktop/src/app/app.component.ts

@@ -29,6 +29,7 @@ import { MasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstrac
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { ForceSetPasswordReason } from "@bitwarden/common/auth/models/domain/force-set-password-reason";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -60,6 +61,7 @@ import { FolderAddEditComponent } from "../vault/app/vault/folder-add-edit.compo
 
 import { SettingsComponent } from "./accounts/settings.component";
 import { ExportDesktopComponent } from "./tools/export/export-desktop.component";
+import { CredentialGeneratorComponent } from "./tools/generator/credential-generator.component";
 import { GeneratorComponent } from "./tools/generator.component";
 import { ImportDesktopComponent } from "./tools/import/import-desktop.component";
 import { PasswordGeneratorHistoryComponent } from "./tools/password-generator-history.component";
@@ -398,10 +400,7 @@ export class AppComponent implements OnInit, OnDestroy {
             await this.addFolder();
             break;
           case "openGenerator":
-            // openGenerator has extended functionality if called in the vault
-            if (!this.router.url.includes("vault")) {
-              await this.openGenerator();
-            }
+            await this.openGenerator();
             break;
           case "convertAccountToKeyConnector":
             // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
@@ -503,6 +502,14 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   async openGenerator() {
+    const isGeneratorSwapEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.GeneratorToolsModernization,
+    );
+    if (isGeneratorSwapEnabled) {
+      await this.dialogService.open(CredentialGeneratorComponent);
+      return;
+    }
+
     this.modalService.closeAll();
 
     [this.modal] = await this.modalService.openViewRef(

apps/desktop/src/app/tools/generator/credential-generator.component.html

@@ -0,0 +1,12 @@
+<bit-dialog #dialog dialogSize="large" background="alt">
+  <span bitDialogTitle>{{ "generator" | i18n }}</span>
+  <ng-container bitDialogContent>
+    <!-- FIXME: Will get replaced with <tools-credential-generator /> once https://github.com/bitwarden/clients/pull/11398 has been merged -->
+    <tools-password-generator />
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
+      {{ "close" | i18n }}
+    </button>
+  </ng-container>
+</bit-dialog>

apps/desktop/src/app/tools/generator/credential-generator.component.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, DialogModule } from "@bitwarden/components";
+import { PasswordGeneratorComponent } from "@bitwarden/generator-components";
+
+@Component({
+  standalone: true,
+  selector: "credential-generator",
+  templateUrl: "credential-generator.component.html",
+  imports: [DialogModule, ButtonModule, JslibModule, PasswordGeneratorComponent],
+})
+export class CredentialGeneratorComponent {}

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

@@ -407,17 +407,56 @@
     "message": "Minimum password length"
   },
   "uppercase": {
-    "message": "Uppercase (A-Z)"
+    "message": "Uppercase (A-Z)",
+    "description": "deprecated. Use uppercaseLabel instead."
   },
   "lowercase": {
-    "message": "Lowercase (a-z)"
+    "message": "Lowercase (a-z)",
+    "description": "deprecated. Use lowercaseLabel instead."
   },
   "numbers": {
-    "message": "Numbers (0-9)"
+    "message": "Numbers (0-9)",
+    "description": "deprecated. Use numbersLabel instead."
   },
   "specialCharacters": {
     "message": "Special characters (!@#$%^&*)"
   },
+  "include": {
+    "message": "Include",
+    "description": "Card header for password generator include block"
+  },
+  "uppercaseDescription": {
+    "message": "Include uppercase characters",
+    "description": "Tooltip for the password generator uppercase character checkbox"
+  },
+  "uppercaseLabel": {
+    "message": "A-Z",
+    "description": "Label for the password generator uppercase character checkbox"
+  },
+  "lowercaseDescription": {
+    "message": "Include lowercase characters",
+    "description": "Full description for the password generator lowercase character checkbox"
+  },
+  "lowercaseLabel": {
+    "message": "a-z",
+    "description": "Label for the password generator lowercase character checkbox"
+  },
+  "numbersDescription": {
+    "message": "Include numbers",
+    "description": "Full description for the password generator numbers checkbox"
+  },
+  "numbersLabel": {
+    "message": "0-9",
+    "description": "Label for the password generator numbers checkbox"
+  },
+  "specialCharactersDescription": {
+    "message": "Include special characters",
+    "description": "Full description for the password generator special characters checkbox"
+  },
+  "specialCharactersLabel": {
+    "message": "!@#$%^&*",
+    "description": "Label for the password generator special characters checkbox"
+  },
   "numWords": {
     "message": "Number of words"
   },
@@ -442,7 +481,12 @@
     "description": "Minimum Special Characters"
   },
   "ambiguous": {
-    "message": "Avoid ambiguous characters"
+    "message": "Avoid ambiguous characters",
+    "description": "deprecated. Use avoidAmbiguous instead."
+  },
+  "avoidAmbiguous": {
+    "message": "Avoid ambiguous characters",
+    "description": "Label for the avoid ambiguous characters checkbox."
   },
   "generatorPolicyInEffect": {
     "message": "Enterprise policy requirements have been applied to your generator options.",

apps/desktop/src/vault/app/vault/vault.component.ts

@@ -137,9 +137,6 @@ export class VaultComponent implements OnInit, OnDestroy {
             (document.querySelector("#search") as HTMLInputElement).select();
             detectChanges = false;
             break;
-          case "openGenerator":
-            await this.openGenerator(false);
-            break;
           case "syncCompleted":
             await this.vaultItemsComponent.reload(this.activeFilter.buildFilter());
             await this.vaultFilterComponent.reloadCollectionsAndFolders(this.activeFilter);
@@ -623,6 +620,7 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   async openGenerator(comingFromAddEdit: boolean, passwordType = true) {
+    // FIXME: Will need to be extended to use the cipher-form-generator component introduced with https://github.com/bitwarden/clients/pull/11350
     if (this.modal != null) {
       this.modal.close();
     }