[PM-8279] password generation component (#10805)

libs/tools/generator/components/src/dependencies.ts

@@ -4,41 +4,60 @@ import { ReactiveFormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
+import { SafeInjectionToken } from "@bitwarden/angular/services/injection-tokens";
 import { JslibServicesModule } from "@bitwarden/angular/services/jslib-services.module";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { StateProvider } from "@bitwarden/common/platform/state";
 import {
   CardComponent,
   CheckboxModule,
   ColorPasswordModule,
   FormFieldModule,
+  IconButtonModule,
   InputModule,
+  ItemModule,
   SectionComponent,
   SectionHeaderComponent,
+  ToggleGroupModule,
 } from "@bitwarden/components";
-import { CredentialGeneratorService } from "@bitwarden/generator-core";
+import {
+  createRandomizer,
+  CredentialGeneratorService,
+  Randomizer,
+} from "@bitwarden/generator-core";
+
+const RANDOMIZER = new SafeInjectionToken<Randomizer>("Randomizer");
 
 /** Shared module containing generator component dependencies */
 @NgModule({
-  imports: [SectionComponent, SectionHeaderComponent, CardComponent],
+  imports: [CardComponent, SectionComponent, SectionHeaderComponent],
   exports: [
+    CardComponent,
+    CheckboxModule,
+    CommonModule,
+    ColorPasswordModule,
+    FormFieldModule,
+    IconButtonModule,
+    InputModule,
+    ItemModule,
     JslibModule,
     JslibServicesModule,
-    FormFieldModule,
-    CommonModule,
     ReactiveFormsModule,
-    ColorPasswordModule,
-    InputModule,
-    CheckboxModule,
     SectionComponent,
     SectionHeaderComponent,
-    CardComponent,
+    ToggleGroupModule,
   ],
   providers: [
+    safeProvider({
+      provide: RANDOMIZER,
+      useFactory: createRandomizer,
+      deps: [CryptoService],
+    }),
     safeProvider({
       provide: CredentialGeneratorService,
       useClass: CredentialGeneratorService,
-      deps: [StateProvider, PolicyService],
+      deps: [RANDOMIZER, StateProvider, PolicyService],
     }),
   ],
   declarations: [],

libs/tools/generator/components/src/index.ts

@@ -2,3 +2,4 @@ export { PassphraseSettingsComponent } from "./passphrase-settings.component";
 export { CredentialGeneratorHistoryComponent } from "./credential-generator-history.component";
 export { EmptyCredentialHistoryComponent } from "./empty-credential-history.component";
 export { PasswordSettingsComponent } from "./password-settings.component";
+export { PasswordGeneratorComponent } from "./password-generator.component";

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

@@ -0,0 +1,44 @@
+<bit-toggle-group
+  fullWidth
+  class="tw-mb-4"
+  [selected]="credentialType$ | async"
+  (selectedChange)="onCredentialTypeChanged($event)"
+  attr.aria-label="{{ 'type' | i18n }}"
+>
+  <bit-toggle value="password">
+    {{ "password" | i18n }}
+  </bit-toggle>
+  <bit-toggle value="passphrase">
+    {{ "passphrase" | i18n }}
+  </bit-toggle>
+</bit-toggle-group>
+<bit-card class="tw-flex tw-justify-between tw-mb-4">
+  <div class="tw-grow">
+    <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
+  </div>
+  <div class="tw-space-x-1 tw-flex-none tw-w-4">
+    <button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
+      {{ "generatePassword" | i18n }}
+    </button>
+    <button
+      type="button"
+      bitIconButton="bwi-clone"
+      buttonType="main"
+      [appCopyClick]="value$ | async"
+    >
+      {{ "copyPassword" | i18n }}
+    </button>
+  </div>
+</bit-card>
+<bit-password-settings
+  class="tw-mt-6"
+  *ngIf="(credentialType$ | async) === 'password'"
+  [userId]="this.userId$ | async"
+  (onUpdated)="generate$.next()"
+/>
+<bit-passphrase-settings
+  class="tw-mt-6"
+  *ngIf="(credentialType$ | async) === 'passphrase'"
+  [userId]="this.userId$ | async"
+  (onUpdated)="generate$.next()"
+/>

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

@@ -0,0 +1,117 @@
+import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
+import { BehaviorSubject, distinctUntilChanged, map, Subject, switchMap, takeUntil } from "rxjs";
+
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { UserId } from "@bitwarden/common/types/guid";
+import { CredentialGeneratorService, Generators, GeneratorType } from "@bitwarden/generator-core";
+import { GeneratedCredential } from "@bitwarden/generator-history";
+
+import { DependenciesModule } from "./dependencies";
+import { PassphraseSettingsComponent } from "./passphrase-settings.component";
+import { PasswordSettingsComponent } from "./password-settings.component";
+
+/** Options group for passwords */
+@Component({
+  standalone: true,
+  selector: "bit-password-generator",
+  templateUrl: "password-generator.component.html",
+  imports: [DependenciesModule, PasswordSettingsComponent, PassphraseSettingsComponent],
+})
+export class PasswordGeneratorComponent implements OnInit, OnDestroy {
+  constructor(
+    private generatorService: CredentialGeneratorService,
+    private accountService: AccountService,
+    private zone: NgZone,
+  ) {}
+
+  /** Binds the passphrase component to a specific user's settings.
+   *  When this input is not provided, the form binds to the active
+   *  user
+   */
+  @Input()
+  userId: UserId | null;
+
+  /** tracks the currently selected credential type */
+  protected credentialType$ = new BehaviorSubject<GeneratorType>("password");
+
+  /** Emits the last generated value. */
+  protected readonly value$ = new BehaviorSubject<string>("");
+
+  /** Emits when the userId changes */
+  protected readonly userId$ = new BehaviorSubject<UserId>(null);
+
+  /** Emits when a new credential is requested */
+  protected readonly generate$ = new Subject<void>();
+
+  /** Tracks changes to the selected credential type
+   * @param type the new credential type
+   */
+  protected onCredentialTypeChanged(type: GeneratorType) {
+    if (this.credentialType$.value !== type) {
+      this.credentialType$.next(type);
+      this.generate$.next();
+    }
+  }
+
+  /** Emits credentials created from a generation request. */
+  @Output()
+  readonly onGenerated = new EventEmitter<GeneratedCredential>();
+
+  async ngOnInit() {
+    if (this.userId) {
+      this.userId$.next(this.userId);
+    } else {
+      this.accountService.activeAccount$
+        .pipe(
+          map((acct) => acct.id),
+          distinctUntilChanged(),
+          takeUntil(this.destroyed),
+        )
+        .subscribe(this.userId$);
+    }
+
+    this.credentialType$
+      .pipe(
+        switchMap((type) => this.typeToGenerator$(type)),
+        takeUntil(this.destroyed),
+      )
+      .subscribe((generated) => {
+        // update subjects within the angular zone so that the
+        // template bindings refresh immediately
+        this.zone.run(() => {
+          this.onGenerated.next(generated);
+          this.value$.next(generated.credential);
+        });
+      });
+  }
+
+  private typeToGenerator$(type: GeneratorType) {
+    const dependencies = {
+      on$: this.generate$,
+      userId$: this.userId$,
+    };
+
+    switch (type) {
+      case "password":
+        return this.generatorService.generate$(Generators.Password, dependencies);
+
+      case "passphrase":
+        return this.generatorService.generate$(Generators.Passphrase, dependencies);
+      default:
+        throw new Error(`Invalid generator type: "${type}"`);
+    }
+  }
+
+  private readonly destroyed = new Subject<void>();
+  ngOnDestroy(): void {
+    // tear down subscriptions
+    this.destroyed.complete();
+
+    // finalize subjects
+    this.generate$.complete();
+    this.value$.complete();
+
+    // finalize component bindings
+    this.onGenerated.complete();
+  }
+}