[PM-8282] credential generator (#11398)

* credential generator browser ui
* switch browser generate screen to extension refresh flag
* consolidate generator components into module
* add `@bitwarden/generator-components` readme
* normalize generator component rx subscriptions

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

@@ -381,7 +381,7 @@
   },
   "generator": {
     "message": "Generator",
-    "description": "Short for 'Password Generator'."
+    "description": "Short for 'credential generator'."
   },
   "passGenInfo": {
     "message": "Automatically generate strong, unique passwords for your logins."

apps/browser/src/popup/app-routing.module.ts

@@ -11,7 +11,6 @@ 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 { extensionRefreshRedirect } from "@bitwarden/angular/utils/extension-refresh-redirect";
 import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh-swap";
 import {
@@ -555,7 +554,7 @@ const routes: Routes = [
         canDeactivate: [clearVaultStateGuard],
         data: { state: "tabs_vault" } satisfies RouteDataProperties,
       }),
-      ...generatorSwap(GeneratorComponent, CredentialGeneratorComponent, {
+      ...extensionRefreshSwap(GeneratorComponent, CredentialGeneratorComponent, {
         path: "generator",
         canActivate: [authGuard],
         data: { state: "tabs_generator" } satisfies RouteDataProperties,

apps/browser/src/tools/popup/generator/credential-generator.component.html

@@ -1,2 +1,15 @@
-<!-- Note: this is all throwaway markup, so it won't follow best practices -->
-<tools-username-generator />
+<popup-page>
+  <popup-header slot="header" [pageTitle]="'generator' | i18n">
+    <ng-container slot="end">
+      <app-pop-out />
+      <app-current-account />
+    </ng-container>
+  </popup-header>
+  <tools-credential-generator />
+  <bit-item>
+    <a type="button" bit-item-content routerLink="/generator-history">
+      {{ "passwordHistory" | i18n }}
+      <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+    </a>
+  </bit-item>
+</popup-page>

apps/browser/src/tools/popup/generator/credential-generator.component.ts

@@ -1,12 +1,28 @@
 import { Component } from "@angular/core";
 
-import { SectionComponent } from "@bitwarden/components";
-import { UsernameGeneratorComponent } from "@bitwarden/generator-components";
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ItemModule } from "@bitwarden/components";
+import { GeneratorModule } from "@bitwarden/generator-components";
+
+import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
+import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
+import { PopupFooterComponent } from "../../../platform/popup/layout/popup-footer.component";
+import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
 
 @Component({
   standalone: true,
   selector: "credential-generator",
   templateUrl: "credential-generator.component.html",
-  imports: [UsernameGeneratorComponent, SectionComponent],
+  imports: [
+    GeneratorModule,
+    CurrentAccountComponent,
+    JslibModule,
+    PopOutComponent,
+    PopupHeaderComponent,
+    PopupPageComponent,
+    PopupFooterComponent,
+    ItemModule,
+  ],
 })
 export class CredentialGeneratorComponent {}

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

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

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

@@ -2319,7 +2319,8 @@
     "message": "Unlocked"
   },
   "generator": {
-    "message": "Generator"
+    "message": "Generator",
+    "description": "Short for 'credential generator'."
   },
   "whatWouldYouLikeToGenerate": {
     "message": "What would you like to generate?"

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

@@ -6223,7 +6223,8 @@
     "message": "Account settings"
   },
   "generator": {
-    "message": "Generator"
+    "message": "Generator",
+    "description": "Short for 'credential generator'."
   },
   "whatWouldYouLikeToGenerate": {
     "message": "What would you like to generate?"