[PM-13876] improve credential generator options validation

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

@@ -43,6 +43,7 @@
   (onUpdated)="generate('password settings')"
 />
 <tools-passphrase-settings
+  #passphraseSettings
   class="tw-mt-6"
   *ngIf="(showAlgorithm$ | async)?.id === 'passphrase'"
   [userId]="userId$ | async"

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

@@ -1,4 +1,13 @@
-import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import {
   BehaviorSubject,
@@ -39,6 +48,8 @@ import {
 } from "@bitwarden/generator-core";
 import { GeneratorHistoryService } from "@bitwarden/generator-history";
 
+import { PassphraseSettingsComponent } from "./passphrase-settings.component";
+
 // constants used to identify navigation selections that are not
 // generator algorithms
 const IDENTIFIER = "identifier";
@@ -61,6 +72,9 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
     private formBuilder: FormBuilder,
   ) {}
 
+  /** binds to the settings component at runtime */
+  @ViewChild("passphrase") passphraseSettings: PassphraseSettingsComponent;
+
   /** Binds the component to a specific user's settings. When this input is not provided,
    * the form binds to the active user
    */
@@ -385,7 +399,7 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
         if (!a || a.onlyOnRequest) {
           this.value$.next("-");
         } else {
-          this.generate("autogenerate");
+          this.generate("autogenerate").catch((e: unknown) => this.logService.error(e));
         }
       });
     });
@@ -495,7 +509,11 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
    * @param requestor a label used to trace generation request
    *  origin in the debugger.
    */
-  protected generate(requestor: string) {
+  protected async generate(requestor: string) {
+    if (this.passphraseSettings) {
+      await this.passphraseSettings.reloadSettings("credential generator");
+    }
+
     this.generate$.next(requestor);
   }
 

libs/tools/generator/components/src/passphrase-settings.component.html

@@ -7,7 +7,13 @@ <h6 bitTypography="h6">{{ "options" | i18n }}</h6>
       <bit-card>
         <bit-form-field disableMargin>
           <bit-label>{{ "numWords" | i18n }}</bit-label>
-          <input bitInput formControlName="numWords" id="num-words" type="number" />
+          <input
+            bitInput
+            formControlName="numWords"
+            id="num-words"
+            type="number"
+            (focusout)="reloadSettings('numWords')"
+          />
           <bit-hint>{{ numWordsBoundariesHint$ | async }}</bit-hint>
         </bit-form-field>
       </bit-card>
@@ -16,7 +22,13 @@ <h6 bitTypography="h6">{{ "options" | i18n }}</h6>
       <bit-card>
         <bit-form-field>
           <bit-label>{{ "wordSeparator" | i18n }}</bit-label>
-          <input bitInput formControlName="wordSeparator" id="word-separator" type="text" />
+          <input
+            bitInput
+            formControlName="wordSeparator"
+            id="word-separator"
+            type="text"
+            (focusout)="reloadSettings('wordSeparator')"
+          />
         </bit-form-field>
         <bit-form-control>
           <input bitCheckbox formControlName="capitalize" id="capitalize" type="checkbox" />

libs/tools/generator/components/src/passphrase-settings.component.ts

@@ -1,7 +1,19 @@
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { OnInit, Input, Output, EventEmitter, Component, OnDestroy } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
-import { BehaviorSubject, skip, takeUntil, Subject, ReplaySubject } from "rxjs";
+import {
+  BehaviorSubject,
+  skip,
+  takeUntil,
+  Subject,
+  filter,
+  map,
+  withLatestFrom,
+  Observable,
+  merge,
+  firstValueFrom,
+  ReplaySubject,
+} from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -72,6 +84,12 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
   async ngOnInit() {
     const singleUserId$ = this.singleUserId$();
     const settings = await this.generatorService.settings(Generators.passphrase, { singleUserId$ });
+    settings
+      .pipe(
+        filter((s) => !!s),
+        takeUntil(this.destroyed$),
+      )
+      .subscribe(this.okSettings$);
 
     // skips reactive event emissions to break a subscription cycle
     settings.pipe(takeUntil(this.destroyed$)).subscribe((s) => {
@@ -110,12 +128,61 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
       });
 
     // now that outputs are set up, connect inputs
-    this.settings.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(settings);
+    this.settings$().pipe(takeUntil(this.destroyed$)).subscribe(settings);
+  }
+
+  protected settings$(): Observable<Partial<PassphraseGenerationOptions>> {
+    // save valid changes
+    const validChanges$ = this.settings.statusChanges.pipe(
+      filter((status) => status === "VALID"),
+      withLatestFrom(this.settings.valueChanges),
+      map(([, settings]) => settings),
+    );
+
+    // discards changes but keep the override setting that changed
+    const overrides = [Controls.capitalize, Controls.includeNumber];
+    const overrideChanges$ = this.settings.valueChanges.pipe(
+      filter((settings) => !!settings),
+      withLatestFrom(this.okSettings$),
+      filter(([current, ok]) => overrides.some((c) => (current[c] ?? ok[c]) !== ok[c])),
+      map(([current, ok]) => {
+        const copy = { ...ok };
+        for (const override of overrides) {
+          copy[override] = current[override];
+        }
+        return copy;
+      }),
+    );
+
+    // save reloaded settings when requested
+    const reloadChanges$ = this.reloadSettings$.pipe(
+      withLatestFrom(this.okSettings$),
+      map(([, settings]) => settings),
+    );
+
+    return merge(validChanges$, overrideChanges$, reloadChanges$);
   }
 
   /** display binding for enterprise policy notice */
   protected policyInEffect: boolean;
 
+  private okSettings$ = new ReplaySubject<PassphraseGenerationOptions>(1);
+
+  private reloadSettings$ = new Subject<string>();
+
+  /** triggers a reload of the users' settings
+   *  @param site labels the invocation site so that an operation
+   *   can be traced back to its origin. Useful for debugging rxjs.
+   *  @returns a promise that completes once a reload occurs.
+   */
+  async reloadSettings(site: string = "component api call") {
+    const reloadComplete = firstValueFrom(this.okSettings$);
+    if (this.settings.invalid) {
+      this.reloadSettings$.next(site);
+      await reloadComplete;
+    }
+  }
+
   private numWordsBoundariesHint = new ReplaySubject<string>(1);
 
   /** display binding for min/max constraints of `numWords` */
@@ -144,6 +211,7 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
 
   private readonly destroyed$ = new Subject<void>();
   ngOnDestroy(): void {
+    this.destroyed$.next();
     this.destroyed$.complete();
   }
 }

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

@@ -49,7 +49,7 @@ export function toValidators<Policy, Settings>(
   }
 
   const max = getConstraint("max", config, runtime);
-  if (max === undefined) {
+  if (max !== undefined) {
     validators.push(Validators.max(max));
   }