[PM-11418] generator policy constraints (#11014)

* add constraint support to UserStateSubject
* add dynamic constraints
* implement password policy constraints
* replace policy evaluator with constraints in credential generation service
* add cascade between minNumber and minSpecial

Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>

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

@@ -5,7 +5,7 @@
   <form class="box" [formGroup]="settings" class="tw-container">
     <div class="tw-mb-4">
       <bit-card>
-        <bit-form-field>
+        <bit-form-field disableMargin>
           <bit-label>{{ "numWords" | i18n }}</bit-label>
           <input
             bitInput
@@ -28,10 +28,11 @@
           <input bitCheckbox formControlName="capitalize" id="capitalize" type="checkbox" />
           <bit-label>{{ "capitalize" | i18n }}</bit-label>
         </bit-form-control>
-        <bit-form-control>
+        <bit-form-control [disableMargin]="!policyInEffect">
           <input bitCheckbox formControlName="includeNumber" id="include-number" type="checkbox" />
           <bit-label>{{ "includeNumber" | i18n }}</bit-label>
         </bit-form-control>
+        <p *ngIf="policyInEffect" bitTypography="helper">{{ "generatorPolicyInEffect" | i18n }}</p>
       </bit-card>
     </div>
   </form>

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

@@ -23,7 +23,7 @@ const Controls = Object.freeze({
 /** Options group for passphrases */
 @Component({
   standalone: true,
-  selector: "bit-passphrase-settings",
+  selector: "tools-passphrase-settings",
   templateUrl: "passphrase-settings.component.html",
   imports: [DependenciesModule],
 })
@@ -81,24 +81,22 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
     this.generatorService
       .policy$(Generators.Passphrase, { userId$: singleUserId$ })
       .pipe(takeUntil(this.destroyed$))
-      .subscribe((policy) => {
+      .subscribe(({ constraints }) => {
         this.settings
           .get(Controls.numWords)
-          .setValidators(toValidators(Controls.numWords, Generators.Passphrase, policy));
+          .setValidators(toValidators(Controls.numWords, Generators.Passphrase, constraints));
 
         this.settings
           .get(Controls.wordSeparator)
-          .setValidators(toValidators(Controls.wordSeparator, Generators.Passphrase, policy));
+          .setValidators(toValidators(Controls.wordSeparator, Generators.Passphrase, constraints));
 
         // forward word boundaries to the template (can't do it through the rx form)
-        // FIXME: move the boundary logic fully into the policy evaluator
-        this.minNumWords =
-          policy.numWords?.min ?? Generators.Passphrase.settings.constraints.numWords.min;
-        this.maxNumWords =
-          policy.numWords?.max ?? Generators.Passphrase.settings.constraints.numWords.max;
+        this.minNumWords = constraints.numWords.min;
+        this.maxNumWords = constraints.numWords.max;
+        this.policyInEffect = constraints.policyInEffect;
 
-        this.toggleEnabled(Controls.capitalize, !policy.policy.capitalize);
-        this.toggleEnabled(Controls.includeNumber, !policy.policy.includeNumber);
+        this.toggleEnabled(Controls.capitalize, !constraints.capitalize?.readonly);
+        this.toggleEnabled(Controls.includeNumber, !constraints.includeNumber?.readonly);
       });
 
     // now that outputs are set up, connect inputs
@@ -111,11 +109,14 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
   /** attribute binding for numWords[max] */
   protected maxNumWords: number;
 
+  /** display binding for enterprise policy notice */
+  protected policyInEffect: boolean;
+
   private toggleEnabled(setting: keyof typeof Controls, enabled: boolean) {
     if (enabled) {
-      this.settings.get(setting).enable();
+      this.settings.get(setting).enable({ emitEvent: false });
     } else {
-      this.settings.get(setting).disable();
+      this.settings.get(setting).disable({ emitEvent: false });
     }
   }
 

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

@@ -13,10 +13,10 @@
   </bit-toggle>
 </bit-toggle-group>
 <bit-card class="tw-flex tw-justify-between tw-mb-4">
-  <div class="tw-grow">
+  <div class="tw-grow tw-flex tw-items-center">
     <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">
+  <div class="tw-space-x-1">
     <button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
       {{ "generatePassword" | i18n }}
     </button>
@@ -30,13 +30,13 @@
     </button>
   </div>
 </bit-card>
-<bit-password-settings
+<tools-password-settings
   class="tw-mt-6"
   *ngIf="(credentialType$ | async) === 'password'"
   [userId]="this.userId$ | async"
   (onUpdated)="generate$.next()"
 />
-<bit-passphrase-settings
+<tools-passphrase-settings
   class="tw-mt-6"
   *ngIf="(credentialType$ | async) === 'passphrase'"
   [userId]="this.userId$ | async"

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

@@ -13,7 +13,7 @@ import { PasswordSettingsComponent } from "./password-settings.component";
 /** Options group for passwords */
 @Component({
   standalone: true,
-  selector: "bit-password-generator",
+  selector: "tools-password-generator",
   templateUrl: "password-generator.component.html",
   imports: [DependenciesModule, PasswordSettingsComponent, PassphraseSettingsComponent],
 })

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

@@ -1,11 +1,11 @@
 <bit-section>
   <bit-section-header *ngIf="showHeader">
-    <h5 bitTypography="h5">{{ "options" | i18n }}</h5>
+    <h6 bitTypography="h6">{{ "options" | i18n }}</h6>
   </bit-section-header>
   <form class="box" [formGroup]="settings" class="tw-container">
     <div class="tw-mb-4">
       <bit-card>
-        <bit-form-field>
+        <bit-form-field disableMargin>
           <bit-label>{{ "length" | i18n }}</bit-label>
           <input
             bitInput
@@ -42,7 +42,7 @@
             attr.aria-description="{{ 'numbersDescription' | i18n }}"
             title="{{ 'numbersDescription' | i18n }}"
           >
-            <input bitCheckbox type="checkbox" formControlName="numbers" />
+            <input bitCheckbox type="checkbox" formControlName="number" />
             <bit-label>{{ "numbersLabel" | i18n }}</bit-label>
           </bit-form-control>
           <bit-form-control
@@ -76,10 +76,11 @@
             />
           </bit-form-field>
         </div>
-        <bit-form-control>
+        <bit-form-control [disableMargin]="!policyInEffect">
           <input bitCheckbox type="checkbox" formControlName="avoidAmbiguous" />
           <bit-label>{{ "avoidAmbiguous" | i18n }}</bit-label>
         </bit-form-control>
+        <p *ngIf="policyInEffect" bitTypography="helper">{{ "generatorPolicyInEffect" | i18n }}</p>
       </bit-card>
     </div>
   </form>

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

@@ -1,6 +1,6 @@
 import { OnInit, Input, Output, EventEmitter, Component, OnDestroy } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
-import { BehaviorSubject, skip, takeUntil, Subject, map } from "rxjs";
+import { BehaviorSubject, takeUntil, Subject, map, filter, tap, debounceTime, skip } from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { UserId } from "@bitwarden/common/types/guid";
@@ -17,7 +17,7 @@ const Controls = Object.freeze({
   length: "length",
   uppercase: "uppercase",
   lowercase: "lowercase",
-  numbers: "numbers",
+  number: "number",
   special: "special",
   minNumber: "minNumber",
   minSpecial: "minSpecial",
@@ -27,7 +27,7 @@ const Controls = Object.freeze({
 /** Options group for passwords */
 @Component({
   standalone: true,
-  selector: "bit-password-settings",
+  selector: "tools-password-settings",
   templateUrl: "password-settings.component.html",
   imports: [DependenciesModule],
 })
@@ -54,6 +54,10 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
   @Input()
   showHeader: boolean = true;
 
+  /** Number of milliseconds to wait before accepting user input. */
+  @Input()
+  waitMs: number = 100;
+
   /** Emits settings updates and completes if the settings become unavailable.
    * @remarks this does not emit the initial settings. If you would like
    *   to receive live settings updates including the initial update,
@@ -66,17 +70,34 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
     [Controls.length]: [Generators.Password.settings.initial.length],
     [Controls.uppercase]: [Generators.Password.settings.initial.uppercase],
     [Controls.lowercase]: [Generators.Password.settings.initial.lowercase],
-    [Controls.numbers]: [Generators.Password.settings.initial.number],
+    [Controls.number]: [Generators.Password.settings.initial.number],
     [Controls.special]: [Generators.Password.settings.initial.special],
     [Controls.minNumber]: [Generators.Password.settings.initial.minNumber],
     [Controls.minSpecial]: [Generators.Password.settings.initial.minSpecial],
     [Controls.avoidAmbiguous]: [!Generators.Password.settings.initial.ambiguous],
   });
 
+  private get numbers() {
+    return this.settings.get(Controls.number);
+  }
+
+  private get special() {
+    return this.settings.get(Controls.special);
+  }
+
+  private get minNumber() {
+    return this.settings.get(Controls.minNumber);
+  }
+
+  private get minSpecial() {
+    return this.settings.get(Controls.minSpecial);
+  }
+
   async ngOnInit() {
     const singleUserId$ = this.singleUserId$();
     const settings = await this.generatorService.settings(Generators.Password, { singleUserId$ });
 
+    // bind settings to the UI
     settings
       .pipe(
         map((settings) => {
@@ -93,47 +114,41 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
         this.settings.patchValue(s, { emitEvent: false });
       });
 
-    // the first emission is the current value; subsequent emissions are updates
-    settings.pipe(skip(1), takeUntil(this.destroyed$)).subscribe(this.onUpdated);
-
-    ///
+    // bind policy to the template
     this.generatorService
       .policy$(Generators.Password, { userId$: singleUserId$ })
       .pipe(takeUntil(this.destroyed$))
-      .subscribe((policy) => {
+      .subscribe(({ constraints }) => {
         this.settings
           .get(Controls.length)
-          .setValidators(toValidators(Controls.length, Generators.Password, policy));
+          .setValidators(toValidators(Controls.length, Generators.Password, constraints));
 
-        this.settings
-          .get(Controls.minNumber)
-          .setValidators(toValidators(Controls.minNumber, Generators.Password, policy));
+        this.minNumber.setValidators(
+          toValidators(Controls.minNumber, Generators.Password, constraints),
+        );
 
-        this.settings
-          .get(Controls.minSpecial)
-          .setValidators(toValidators(Controls.minSpecial, Generators.Password, policy));
+        this.minSpecial.setValidators(
+          toValidators(Controls.minSpecial, Generators.Password, constraints),
+        );
 
         // forward word boundaries to the template (can't do it through the rx form)
-        // FIXME: move the boundary logic fully into the policy evaluator
-        this.minLength = policy.length?.min ?? Generators.Password.settings.constraints.length.min;
-        this.maxLength = policy.length?.max ?? Generators.Password.settings.constraints.length.max;
-        this.minMinNumber =
-          policy.minNumber?.min ?? Generators.Password.settings.constraints.minNumber.min;
-        this.maxMinNumber =
-          policy.minNumber?.max ?? Generators.Password.settings.constraints.minNumber.max;
-        this.minMinSpecial =
-          policy.minSpecial?.min ?? Generators.Password.settings.constraints.minSpecial.min;
-        this.maxMinSpecial =
-          policy.minSpecial?.max ?? Generators.Password.settings.constraints.minSpecial.max;
+        this.minLength = constraints.length.min;
+        this.maxLength = constraints.length.max;
+        this.minMinNumber = constraints.minNumber.min;
+        this.maxMinNumber = constraints.minNumber.max;
+        this.minMinSpecial = constraints.minSpecial.min;
+        this.maxMinSpecial = constraints.minSpecial.max;
+
+        this.policyInEffect = constraints.policyInEffect;
 
         const toggles = [
-          [Controls.length, policy.length.min < policy.length.max],
-          [Controls.uppercase, !policy.policy.useUppercase],
-          [Controls.lowercase, !policy.policy.useLowercase],
-          [Controls.numbers, !policy.policy.useNumbers],
-          [Controls.special, !policy.policy.useSpecial],
-          [Controls.minNumber, policy.minNumber.min < policy.minNumber.max],
-          [Controls.minSpecial, policy.minSpecial.min < policy.minSpecial.max],
+          [Controls.length, constraints.length.min < constraints.length.max],
+          [Controls.uppercase, !constraints.uppercase?.readonly],
+          [Controls.lowercase, !constraints.lowercase?.readonly],
+          [Controls.number, !constraints.number?.readonly],
+          [Controls.special, !constraints.special?.readonly],
+          [Controls.minNumber, constraints.minNumber.min < constraints.minNumber.max],
+          [Controls.minSpecial, constraints.minSpecial.min < constraints.minSpecial.max],
         ] as [keyof typeof Controls, boolean][];
 
         for (const [control, enabled] of toggles) {
@@ -141,9 +156,53 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
         }
       });
 
+    // cascade selections between checkboxes and spinboxes
+    // before the group saves their values
+    let lastMinNumber = 1;
+    this.numbers.valueChanges
+      .pipe(
+        filter((checked) => !(checked && this.minNumber.value > 0)),
+        map((checked) => (checked ? lastMinNumber : 0)),
+        takeUntil(this.destroyed$),
+      )
+      .subscribe((value) => this.minNumber.setValue(value, { emitEvent: false }));
+
+    this.minNumber.valueChanges
+      .pipe(
+        map((value) => [value, value > 0] as const),
+        tap(([value]) => (lastMinNumber = this.numbers.value ? value : lastMinNumber)),
+        takeUntil(this.destroyed$),
+      )
+      .subscribe(([, checked]) => this.numbers.setValue(checked, { emitEvent: false }));
+
+    let lastMinSpecial = 1;
+    this.special.valueChanges
+      .pipe(
+        filter((checked) => !(checked && this.minSpecial.value > 0)),
+        map((checked) => (checked ? lastMinSpecial : 0)),
+        takeUntil(this.destroyed$),
+      )
+      .subscribe((value) => this.minSpecial.setValue(value, { emitEvent: false }));
+
+    this.minSpecial.valueChanges
+      .pipe(
+        map((value) => [value, value > 0] as const),
+        tap(([value]) => (lastMinSpecial = this.special.value ? value : lastMinSpecial)),
+        takeUntil(this.destroyed$),
+      )
+      .subscribe(([, checked]) => this.special.setValue(checked, { emitEvent: false }));
+
+    // `onUpdated` depends on `settings` because the UserStateSubject is asynchronous;
+    // subscribing directly to `this.settings.valueChanges` introduces a race condition.
+    // skip the first emission because it's the initial value, not an update.
+    settings.pipe(skip(1), takeUntil(this.destroyed$)).subscribe(this.onUpdated);
+
     // now that outputs are set up, connect inputs
     this.settings.valueChanges
       .pipe(
+        // debounce ensures rapid edits to a field, such as partial edits to a
+        // spinbox or rapid button clicks don't emit spurious generator updates
+        debounceTime(this.waitMs),
         map((settings) => {
           // interface is "avoid" while storage is "include"
           const s: any = { ...settings };
@@ -174,11 +233,14 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
   /** attribute binding for minSpecial[max] */
   protected maxMinSpecial: number;
 
+  /** display binding for enterprise policy notice */
+  protected policyInEffect: boolean;
+
   private toggleEnabled(setting: keyof typeof Controls, enabled: boolean) {
     if (enabled) {
-      this.settings.get(setting).enable();
+      this.settings.get(setting).enable({ emitEvent: false });
     } else {
-      this.settings.get(setting).disable();
+      this.settings.get(setting).disable({ emitEvent: false });
     }
   }
 

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

@@ -1,5 +1,5 @@
 import { ValidatorFn, Validators } from "@angular/forms";
-import { map, pairwise, pipe, skipWhile, startWith, takeWhile } from "rxjs";
+import { distinctUntilChanged, map, pairwise, pipe, skipWhile, startWith, takeWhile } from "rxjs";
 
 import { AnyConstraint, Constraints } from "@bitwarden/common/tools/types";
 import { UserId } from "@bitwarden/common/types/guid";
@@ -13,6 +13,7 @@ export function completeOnAccountSwitch() {
     pairwise(),
     takeWhile(([prev, next]) => (prev ?? next) === next),
     map(([_, id]) => id),
+    distinctUntilChanged(),
   );
 }