[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

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

@@ -1,29 +1,39 @@
 import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
-import { BehaviorSubject, distinctUntilChanged, map, Subject, switchMap, takeUntil } from "rxjs";
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  filter,
+  map,
+  ReplaySubject,
+  Subject,
+  switchMap,
+  takeUntil,
+  withLatestFrom,
+} from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { UserId } from "@bitwarden/common/types/guid";
+import { Option } from "@bitwarden/components/src/select/option";
 import {
   CredentialGeneratorService,
   Generators,
   PasswordAlgorithm,
   GeneratedCredential,
+  CredentialGeneratorInfo,
+  CredentialAlgorithm,
+  isPasswordAlgorithm,
 } from "@bitwarden/generator-core";
 
-import { DependenciesModule } from "./dependencies";
-import { PassphraseSettingsComponent } from "./passphrase-settings.component";
-import { PasswordSettingsComponent } from "./password-settings.component";
-
 /** Options group for passwords */
 @Component({
-  standalone: true,
   selector: "tools-password-generator",
   templateUrl: "password-generator.component.html",
-  imports: [DependenciesModule, PasswordSettingsComponent, PassphraseSettingsComponent],
 })
 export class PasswordGeneratorComponent implements OnInit, OnDestroy {
   constructor(
     private generatorService: CredentialGeneratorService,
+    private i18nService: I18nService,
     private accountService: AccountService,
     private zone: NgZone,
   ) {}
@@ -36,7 +46,7 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
   userId: UserId | null;
 
   /** tracks the currently selected credential type */
-  protected credentialType$ = new BehaviorSubject<PasswordAlgorithm>("password");
+  protected credentialType$ = new BehaviorSubject<PasswordAlgorithm>(null);
 
   /** Emits the last generated value. */
   protected readonly value$ = new BehaviorSubject<string>("");
@@ -51,9 +61,11 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
    * @param type the new credential type
    */
   protected onCredentialTypeChanged(type: PasswordAlgorithm) {
+    // break subscription cycle
     if (this.credentialType$.value !== type) {
-      this.credentialType$.next(type);
-      this.generate$.next();
+      this.zone.run(() => {
+        this.credentialType$.next(type);
+      });
     }
   }
 
@@ -74,9 +86,18 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
         .subscribe(this.userId$);
     }
 
-    this.credentialType$
+    this.generatorService
+      .algorithms$("password", { userId$: this.userId$ })
       .pipe(
-        switchMap((type) => this.typeToGenerator$(type)),
+        map((algorithms) => this.toOptions(algorithms)),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(this.passwordOptions$);
+
+    // wire up the generator
+    this.algorithm$
+      .pipe(
+        switchMap((algorithm) => this.typeToGenerator$(algorithm.id)),
         takeUntil(this.destroyed),
       )
       .subscribe((generated) => {
@@ -87,9 +108,52 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
           this.value$.next(generated.credential);
         });
       });
+
+    // assume the last-visible generator algorithm is the user's preferred one
+    const preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
+    this.credentialType$
+      .pipe(
+        filter((type) => !!type),
+        withLatestFrom(preferences),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(([algorithm, preference]) => {
+        if (isPasswordAlgorithm(algorithm)) {
+          preference.password.algorithm = algorithm;
+          preference.password.updated = new Date();
+        } else {
+          return;
+        }
+
+        preferences.next(preference);
+      });
+
+    // populate the form with the user's preferences to kick off interactivity
+    preferences.pipe(takeUntil(this.destroyed)).subscribe(({ password }) => {
+      // update navigation
+      this.onCredentialTypeChanged(password.algorithm);
+
+      // load algorithm metadata
+      const algorithm = this.generatorService.algorithm(password.algorithm);
+
+      // update subjects within the angular zone so that the
+      // template bindings refresh immediately
+      this.zone.run(() => {
+        this.algorithm$.next(algorithm);
+      });
+    });
+
+    // generate on load unless the generator prohibits it
+    this.algorithm$
+      .pipe(
+        distinctUntilChanged((prev, next) => prev.id === next.id),
+        filter((a) => !a.onlyOnRequest),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(() => this.generate$.next());
   }
 
-  private typeToGenerator$(type: PasswordAlgorithm) {
+  private typeToGenerator$(type: CredentialAlgorithm) {
     const dependencies = {
       on$: this.generate$,
       userId$: this.userId$,
@@ -106,6 +170,21 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
     }
   }
 
+  /** Lists the credential types supported by the component. */
+  protected passwordOptions$ = new BehaviorSubject<Option<CredentialAlgorithm>[]>([]);
+
+  /** tracks the currently selected credential type */
+  protected algorithm$ = new ReplaySubject<CredentialGeneratorInfo>(1);
+
+  private toOptions(algorithms: CredentialGeneratorInfo[]) {
+    const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
+      value: algorithm.id,
+      label: this.i18nService.t(algorithm.nameKey),
+    }));
+
+    return options;
+  }
+
   private readonly destroyed = new Subject<void>();
   ngOnDestroy(): void {
     // tear down subscriptions