[PM-13170] Enable use of new generators on web

apps/web/src/app/oss-routing.module.ts

@@ -10,6 +10,7 @@ import {
   unauthGuardFn,
 } from "@bitwarden/angular/auth/guards";
 import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
+import { generatorSwap } from "@bitwarden/angular/tools/generator/generator-swap";
 import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh-swap";
 import {
   AnonLayoutWrapperComponent,
@@ -70,6 +71,7 @@ import { RequestSMAccessComponent } from "./secrets-manager/secrets-manager-land
 import { SMLandingComponent } from "./secrets-manager/secrets-manager-landing/sm-landing.component";
 import { DomainRulesComponent } from "./settings/domain-rules.component";
 import { PreferencesComponent } from "./settings/preferences.component";
+import { CredentialGeneratorComponent } from "./tools/credential-generator/credential-generator.component";
 import { GeneratorComponent } from "./tools/generator.component";
 import { ReportsModule } from "./tools/reports";
 import { AccessComponent } from "./tools/send/access.component";
@@ -598,11 +600,10 @@ const routes: Routes = [
               titleId: "exportVault",
             } satisfies RouteDataProperties,
           },
-          {
+          ...generatorSwap(GeneratorComponent, CredentialGeneratorComponent, {
             path: "generator",
-            component: GeneratorComponent,
             data: { titleId: "generator" } satisfies RouteDataProperties,
-          },
+          }),
         ],
       },
       {

apps/web/src/app/shared/loose-components.module.ts

@@ -69,6 +69,7 @@ import { ProductSwitcherModule } from "../layouts/product-switcher/product-switc
 import { UserLayoutComponent } from "../layouts/user-layout.component";
 import { DomainRulesComponent } from "../settings/domain-rules.component";
 import { PreferencesComponent } from "../settings/preferences.component";
+import { CredentialGeneratorComponent } from "../tools/credential-generator/credential-generator.component";
 import { GeneratorComponent } from "../tools/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-history.component";
 import { AddEditComponent as SendAddEditComponent } from "../tools/send/add-edit.component";
@@ -114,6 +115,7 @@ import { SharedModule } from "./shared.module";
     UserLayoutComponent,
     VerifyRecoverDeleteOrgComponent,
     VaultTimeoutInputComponent,
+    CredentialGeneratorComponent,
   ],
   declarations: [
     AcceptFamilySponsorshipComponent,
@@ -221,6 +223,7 @@ import { SharedModule } from "./shared.module";
     OrgUserConfirmComponent,
     OrgWeakPasswordsReportComponent,
     GeneratorComponent,
+    CredentialGeneratorComponent,
     PasswordGeneratorHistoryComponent,
     PreferencesComponent,
     PremiumBadgeComponent,

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

@@ -0,0 +1,6 @@
+<app-header></app-header>
+
+<bit-container>
+  <!-- FIXME: Will get replaced with <tools-credential-generator /> once https://github.com/bitwarden/clients/pull/11398 has been merged -->
+  <tools-password-generator />
+</bit-container>

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

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+
+import { PasswordGeneratorComponent } from "@bitwarden/generator-components";
+
+import { HeaderModule } from "../../layouts/header/header.module";
+import { SharedModule } from "../../shared";
+
+@Component({
+  standalone: true,
+  selector: "credential-generator",
+  templateUrl: "credential-generator.component.html",
+  imports: [SharedModule, HeaderModule, PasswordGeneratorComponent],
+})
+export class CredentialGeneratorComponent {}

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

@@ -1440,7 +1440,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."
   },
   "regeneratePassword": {
     "message": "Regenerate password"
@@ -1453,18 +1458,51 @@
   },
   "uppercase": {
     "message": "Uppercase (A-Z)",
-    "description": "Include uppercase letters in the password generator."
+    "description": "deprecated. Use uppercaseLabel instead."
   },
   "lowercase": {
     "message": "Lowercase (a-z)",
-    "description": "Include lowercase letters in the password generator."
+    "description": "deprecated. Use lowercaseLabel instead."
   },
   "numbers": {
-    "message": "Numbers (0-9)"
+    "message": "Numbers (0-9)",
+    "description": "deprecated. Use numbersLabel instead."
   },
   "specialCharacters": {
     "message": "Special characters (!@#$%^&*)"
   },
+  "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"
   },