[PM-13876] replace angular validation with html constraints validation

libs/common/src/tools/state/object-key.ts

@@ -22,6 +22,7 @@ export type ObjectKey<State, Secret = State, Disclosed = Record<string, never>>
   classifier: Classifier<State, Disclosed, Secret>;
   format: "plain" | "classified";
   options: UserKeyDefinitionOptions<State>;
+  initial?: State;
 };
 
 export function isObjectKey(key: any): key is ObjectKey<unknown> {

libs/common/src/tools/state/user-state-subject.ts

@@ -254,17 +254,18 @@ export class UserStateSubject<
       withConstraints,
       map(([loadedState, constraints]) => {
         // bypass nulls
-        if (!loadedState) {
+        if (!loadedState && !this.objectKey?.initial) {
           return {
             constraints: {} as Constraints<State>,
             state: null,
           } satisfies Constrained<State>;
         }
 
+        const unconstrained = loadedState ?? structuredClone(this.objectKey.initial);
         const calibration = isDynamic(constraints)
-          ? constraints.calibrate(loadedState)
+          ? constraints.calibrate(unconstrained)
           : constraints;
-        const adjusted = calibration.adjust(loadedState);
+        const adjusted = calibration.adjust(unconstrained);
 
         return {
           constraints: calibration.constraints,

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

@@ -1,6 +1,11 @@
 <form class="box" [formGroup]="settings" class="tw-container">
   <bit-form-field>
     <bit-label>{{ "domainName" | i18n }}</bit-label>
-    <input bitInput formControlName="catchallDomain" type="text" />
+    <input
+      bitInput
+      formControlName="catchallDomain"
+      type="text"
+      (change)="save('catchallDomain')"
+    />
   </bit-form-field>
 </form>

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

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
-import { BehaviorSubject, skip, Subject, takeUntil } from "rxjs";
+import { BehaviorSubject, map, skip, Subject, takeUntil, withLatestFrom } from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { UserId } from "@bitwarden/common/types/guid";
@@ -12,6 +12,11 @@ import {
 
 import { completeOnAccountSwitch } from "./util";
 
+/** Splits an email into a username, subaddress, and domain named group.
+ * Subaddress is optional.
+ */
+export const DOMAIN_PARSER = new RegExp("[^@]+@(?<domain>.+)");
+
 /** Options group for catchall emails */
 @Component({
   selector: "tools-catchall-settings",
@@ -60,7 +65,19 @@ export class CatchallSettingsComponent implements OnInit, OnDestroy {
     // the first emission is the current value; subsequent emissions are updates
     settings.pipe(skip(1), takeUntil(this.destroyed$)).subscribe(this.onUpdated);
 
-    this.settings.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(settings);
+    // now that outputs are set up, connect inputs
+    this.saveSettings
+      .pipe(
+        withLatestFrom(this.settings.valueChanges),
+        map(([, settings]) => settings),
+        takeUntil(this.destroyed$),
+      )
+      .subscribe(settings);
+  }
+
+  private saveSettings = new Subject<string>();
+  save(site: string = "component api call") {
+    this.saveSettings.next(site);
   }
 
   private singleUserId$() {
@@ -78,6 +95,7 @@ export class CatchallSettingsComponent implements OnInit, OnDestroy {
 
   private readonly destroyed$ = new Subject<void>();
   ngOnDestroy(): void {
+    this.destroyed$.next();
     this.destroyed$.complete();
   }
 }

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

@@ -22,6 +22,7 @@
       buttonType="main"
       (click)="generate('user request')"
       [appA11yTitle]="credentialTypeGenerateLabel$ | async"
+      [disabled]="!(algorithm$ | async)"
     >
       {{ credentialTypeGenerateLabel$ | async }}
     </button>
@@ -33,16 +34,19 @@
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
       [valueLabel]="credentialTypeLabel$ | async"
+      [disabled]="!(algorithm$ | async)"
     ></button>
   </div>
 </bit-card>
 <tools-password-settings
+  #passwordSettings
   class="tw-mt-6"
   *ngIf="(showAlgorithm$ | async)?.id === 'password'"
   [userId]="userId$ | async"
   (onUpdated)="generate('password settings')"
 />
 <tools-passphrase-settings
+  #passphraseSettings
   class="tw-mt-6"
   *ngIf="(showAlgorithm$ | async)?.id === 'passphrase'"
   [userId]="userId$ | async"
@@ -80,21 +84,25 @@ <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
         </bit-form-field>
       </form>
       <tools-catchall-settings
+        #catchallSettings
         *ngIf="(showAlgorithm$ | async)?.id === 'catchall'"
         [userId]="userId$ | async"
         (onUpdated)="generate('catchall settings')"
       />
       <tools-forwarder-settings
+        #forwarderSettings
         *ngIf="!!(forwarderId$ | async)"
         [forwarder]="forwarderId$ | async"
         [userId]="this.userId$ | async"
       />
       <tools-subaddress-settings
+        #subaddressSettings
         *ngIf="(showAlgorithm$ | async)?.id === 'subaddress'"
         [userId]="userId$ | async"
         (onUpdated)="generate('subaddress settings')"
       />
       <tools-username-settings
+        #usernameSettings
         *ngIf="(showAlgorithm$ | async)?.id === 'username'"
         [userId]="userId$ | async"
         (onUpdated)="generate('username settings')"

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

@@ -202,9 +202,8 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
         });
       });
 
-    // normalize cascade selections; introduce subjects to allow changes
-    // from user selections and changes from preference updates to
-    // update the template
+    // these subjects normalize cascade selections to ensure the current
+    // cascade is always well-known.
     type CascadeValue = { nav: string; algorithm?: CredentialAlgorithm };
     const activeRoot$ = new Subject<CascadeValue>();
     const activeIdentifier$ = new Subject<CascadeValue>();
@@ -385,7 +384,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 +494,7 @@ 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) {
     this.generate$.next(requestor);
   }
 
@@ -510,6 +509,7 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
 
   private readonly destroyed = new Subject<void>();
   ngOnDestroy() {
+    this.destroyed.next();
     this.destroyed.complete();
 
     // finalize subjects

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

@@ -1,16 +1,28 @@
 <form class="box" [formGroup]="settings" class="tw-container">
   <bit-form-field *ngIf="displayDomain">
     <bit-label>{{ "forwarderDomainName" | i18n }}</bit-label>
-    <input bitInput formControlName="domain" type="text" placeholder="example.com" />
+    <input
+      bitInput
+      formControlName="domain"
+      type="text"
+      placeholder="example.com"
+      (change)="save('domain')"
+    />
     <bit-hint>{{ "forwarderDomainNameHint" | i18n }}</bit-hint>
   </bit-form-field>
   <bit-form-field *ngIf="displayToken">
     <bit-label>{{ "apiKey" | i18n }}</bit-label>
     <input bitInput formControlName="token" type="password" />
-    <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+    <button
+      type="button"
+      bitIconButton
+      bitSuffix
+      bitPasswordInputToggle
+      (change)="save('token')"
+    ></button>
   </bit-form-field>
   <bit-form-field *ngIf="displayBaseUrl" disableMargin>
     <bit-label>{{ "selfHostBaseUrl" | i18n }}</bit-label>
-    <input bitInput formControlName="baseUrl" type="text" />
+    <input bitInput formControlName="baseUrl" type="text" (change)="save('baseUrl')" />
   </bit-form-field>
 </form>

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

@@ -17,7 +17,6 @@ import {
   skip,
   Subject,
   switchAll,
-  switchMap,
   takeUntil,
   withLatestFrom,
 } from "rxjs";
@@ -33,7 +32,7 @@ import {
   toCredentialGeneratorConfiguration,
 } from "@bitwarden/generator-core";
 
-import { completeOnAccountSwitch, toValidators } from "./util";
+import { completeOnAccountSwitch } from "./util";
 
 const Controls = Object.freeze({
   domain: "domain",
@@ -117,35 +116,17 @@ export class ForwarderSettingsComponent implements OnInit, OnChanges, OnDestroy
       this.settings.patchValue(settings as any, { emitEvent: false });
     });
 
-    // bind policy to the reactive form
-    forwarder$
-      .pipe(
-        switchMap((forwarder) => {
-          const constraints$ = this.generatorService
-            .policy$(forwarder, { userId$: singleUserId$ })
-            .pipe(map(({ constraints }) => [constraints, forwarder] as const));
-
-          return constraints$;
-        }),
-        takeUntil(this.destroyed$),
-      )
-      .subscribe(([constraints, forwarder]) => {
-        for (const name in Controls) {
-          const control = this.settings.get(name);
-          if (forwarder.request.includes(name as any)) {
-            control.enable({ emitEvent: false });
-            control.setValidators(
-              // the configuration's type erasure affects `toValidators` as well
-              toValidators(name, forwarder, constraints),
-            );
-          } else {
-            control.disable({ emitEvent: false });
-            control.clearValidators();
-          }
+    // enable requested forwarder inputs
+    forwarder$.pipe(takeUntil(this.destroyed$)).subscribe((forwarder) => {
+      for (const name in Controls) {
+        const control = this.settings.get(name);
+        if (forwarder.request.includes(name as any)) {
+          control.enable({ emitEvent: false });
+        } else {
+          control.disable({ emitEvent: false });
         }
-
-        this.settings.updateValueAndValidity({ emitEvent: false });
-      });
+      }
+    });
 
     // the first emission is the current value; subsequent emissions are updates
     settings$$
@@ -157,13 +138,18 @@ export class ForwarderSettingsComponent implements OnInit, OnChanges, OnDestroy
       .subscribe(this.onUpdated);
 
     // now that outputs are set up, connect inputs
-    this.settings.valueChanges
-      .pipe(withLatestFrom(settings$$), takeUntil(this.destroyed$))
-      .subscribe(([value, settings]) => {
+    this.saveSettings
+      .pipe(withLatestFrom(this.settings.valueChanges, settings$$), takeUntil(this.destroyed$))
+      .subscribe(([, value, settings]) => {
         settings.next(value);
       });
   }
 
+  private saveSettings = new Subject<string>();
+  save(site: string = "component api call") {
+    this.saveSettings.next(site);
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     this.refresh$.complete();
     if ("forwarder" in changes) {
@@ -192,6 +178,7 @@ export class ForwarderSettingsComponent implements OnInit, OnChanges, OnDestroy
 
   private readonly destroyed$ = new Subject<void>();
   ngOnDestroy(): void {
+    this.destroyed$.next();
     this.destroyed$.complete();
   }
 }

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

@@ -7,6 +7,7 @@ import { safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
 import { SafeInjectionToken } from "@bitwarden/angular/services/injection-tokens";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { EncryptService } from "@bitwarden/common/platform/abstractions/encrypt.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { StateProvider } from "@bitwarden/common/platform/state";
@@ -79,6 +80,7 @@ const RANDOMIZER = new SafeInjectionToken<Randomizer>("Randomizer");
         I18nService,
         EncryptService,
         KeyService,
+        AccountService,
       ],
     }),
   ],

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"
+            (change)="save('numWords')"
+          />
           <bit-hint>{{ numWordsBoundariesHint$ | async }}</bit-hint>
         </bit-form-field>
       </bit-card>
@@ -16,14 +22,33 @@ <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"
+            [maxlength]="wordSeparatorMaxLength"
+            (change)="save('wordSeparator')"
+          />
         </bit-form-field>
         <bit-form-control>
-          <input bitCheckbox formControlName="capitalize" id="capitalize" type="checkbox" />
+          <input
+            bitCheckbox
+            formControlName="capitalize"
+            id="capitalize"
+            type="checkbox"
+            (change)="save('capitalize')"
+          />
           <bit-label>{{ "capitalize" | i18n }}</bit-label>
         </bit-form-control>
         <bit-form-control [disableMargin]="!policyInEffect">
-          <input bitCheckbox formControlName="includeNumber" id="include-number" type="checkbox" />
+          <input
+            bitCheckbox
+            formControlName="includeNumber"
+            id="include-number"
+            type="checkbox"
+            (change)="save('includeNumber')"
+          />
           <bit-label>{{ "includeNumber" | i18n }}</bit-label>
         </bit-form-control>
         <p *ngIf="policyInEffect" bitTypography="helper">{{ "generatorPolicyInEffect" | i18n }}</p>