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

#11816)

* rough-in passphrase validation failure handling

* trigger valid change from settings

* fix `max` constraint enforcement

* add taps for generator validation monitoring/debugging

* HTML constraints validation rises like a phoenix

* remove min/max boundaries to fix chrome display issue

* bind settings components as view children of options components

* remove defunct `okSettings$`

* extend validationless generator to passwords

* extend validationless generator to catchall emails

* extend validationless generator to forwarder emails

* extend validationless generator to subaddress emails

* extend validationless generator to usernames

* fix observable cycle

* disable generate button when no algorithm is selected

* prevent duplicate algorithm emissions

* add constraints that assign email address defaults

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

@@ -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",

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

@@ -39,12 +39,14 @@
   </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"
@@ -82,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/password-generator.component.html

@@ -37,13 +37,15 @@
   </div>
 </bit-card>
 <tools-password-settings
+  #passwordSettings
   class="tw-mt-6"
   *ngIf="(algorithm$ | async)?.id === 'password'"
   [userId]="this.userId$ | async"
   [disableMargin]="disableMargin"
   (onUpdated)="generate('password settings')"
 />
 <tools-passphrase-settings
+  #passphraseSettings
   class="tw-mt-6"
   *ngIf="(algorithm$ | async)?.id === 'passphrase'"
   [userId]="this.userId$ | async"

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

@@ -59,21 +59,25 @@ <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
         </bit-form-field>
       </form>
       <tools-catchall-settings
+        #catchallSettings
         *ngIf="(algorithm$ | async)?.id === 'catchall'"
         [userId]="this.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="(algorithm$ | async)?.id === 'subaddress'"
         [userId]="this.userId$ | async"
         (onUpdated)="generate('subaddress settings')"
       />
       <tools-username-settings
+        #usernameSettings
         *ngIf="(algorithm$ | async)?.id === 'username'"
         [userId]="this.userId$ | async"
         (onUpdated)="generate('username settings')"