[PM-15058] fix admin console hmtl constraints (#12053)

apps/web/src/app/admin-console/organizations/policies/password-generator.component.html

@@ -23,34 +23,52 @@
     <div class="tw-grid tw-grid-cols-12 tw-gap-4">
       <bit-form-field class="tw-col-span-6">
         <bit-label>{{ "minLength" | i18n }}</bit-label>
-        <input bitInput type="number" min="5" max="128" formControlName="minLength" />
+        <input
+          bitInput
+          type="number"
+          [min]="minLengthMin"
+          [max]="minLengthMax"
+          formControlName="minLength"
+        />
       </bit-form-field>
     </div>
     <div class="tw-grid tw-grid-cols-12 tw-gap-4">
       <bit-form-field class="tw-col-span-6">
         <bit-label>{{ "minNumbers" | i18n }}</bit-label>
-        <input bitInput type="number" min="0" max="9" formControlName="minNumbers" />
+        <input
+          bitInput
+          type="number"
+          [min]="minNumbersMin"
+          [max]="minNumbersMax"
+          formControlName="minNumbers"
+        />
       </bit-form-field>
       <bit-form-field class="tw-col-span-6">
         <bit-label>{{ "minSpecial" | i18n }}</bit-label>
-        <input bitInput type="number" min="0" max="9" formControlName="minSpecial" />
+        <input
+          bitInput
+          type="number"
+          [min]="minSpecialMin"
+          [max]="minSpecialMax"
+          formControlName="minSpecial"
+        />
       </bit-form-field>
     </div>
     <bit-form-control>
       <input type="checkbox" bitCheckbox formControlName="useUpper" id="useUpper" />
-      <bit-label>A-Z</bit-label>
+      <bit-label>{{ "uppercaseLabel" | i18n }}</bit-label>
     </bit-form-control>
     <bit-form-control>
       <input type="checkbox" bitCheckbox formControlName="useLower" id="useLower" />
-      <bit-label>a-z</bit-label>
+      <bit-label>{{ "lowercaseLabel" | i18n }}</bit-label>
     </bit-form-control>
     <bit-form-control>
       <input type="checkbox" bitCheckbox formControlName="useNumbers" id="useNumbers" />
-      <bit-label>0-9</bit-label>
+      <bit-label>{{ "numbersLabel" | i18n }}</bit-label>
     </bit-form-control>
     <bit-form-control>
       <input type="checkbox" bitCheckbox formControlName="useSpecial" id="useSpecial" />
-      <bit-label>!&#64;#$%^&amp;*</bit-label>
+      <bit-label>{{ "specialCharactersLabel" | i18n }}</bit-label>
     </bit-form-control>
   </div>
 
@@ -60,7 +78,13 @@
     <div class="tw-grid tw-grid-cols-12 tw-gap-4">
       <bit-form-field class="tw-col-span-6">
         <bit-label>{{ "minimumNumberOfWords" | i18n }}</bit-label>
-        <input bitInput type="number" min="6" max="20" formControlName="minNumberWords" />
+        <input
+          bitInput
+          type="number"
+          [min]="minNumberWordsMin"
+          [max]="minNumberWordsMax"
+          formControlName="minNumberWords"
+        />
       </bit-form-field>
     </div>
     <bit-form-control>

apps/web/src/app/admin-console/organizations/policies/password-generator.component.ts

@@ -21,39 +21,29 @@ export class PasswordGeneratorPolicy extends BasePolicy {
   templateUrl: "password-generator.component.html",
 })
 export class PasswordGeneratorPolicyComponent extends BasePolicyComponent {
+  // these properties forward the application default settings to the UI
+  // for HTML attribute bindings
+  protected readonly minLengthMin = Generators.password.settings.constraints.length.min;
+  protected readonly minLengthMax = Generators.password.settings.constraints.length.max;
+  protected readonly minNumbersMin = Generators.password.settings.constraints.minNumber.min;
+  protected readonly minNumbersMax = Generators.password.settings.constraints.minNumber.max;
+  protected readonly minSpecialMin = Generators.password.settings.constraints.minSpecial.min;
+  protected readonly minSpecialMax = Generators.password.settings.constraints.minSpecial.max;
+  protected readonly minNumberWordsMin = Generators.passphrase.settings.constraints.numWords.min;
+  protected readonly minNumberWordsMax = Generators.passphrase.settings.constraints.numWords.max;
+
   data = this.formBuilder.group({
     overridePasswordType: [null],
-    minLength: [
+    minLength: [null, [Validators.min(this.minLengthMin), Validators.max(this.minLengthMax)]],
-      null,
-      [
-        Validators.min(Generators.password.settings.constraints.length.min),
-        Validators.max(Generators.password.settings.constraints.length.max),
-      ],
-    ],
     useUpper: [null],
     useLower: [null],
     useNumbers: [null],
     useSpecial: [null],
-    minNumbers: [
+    minNumbers: [null, [Validators.min(this.minNumbersMin), Validators.max(this.minNumbersMax)]],
-      null,
+    minSpecial: [null, [Validators.min(this.minSpecialMin), Validators.max(this.minSpecialMax)]],
-      [
-        Validators.min(Generators.password.settings.constraints.minNumber.min),
-        Validators.max(Generators.password.settings.constraints.minNumber.max),
-      ],
-    ],
-    minSpecial: [
-      null,
-      [
-        Validators.min(Generators.password.settings.constraints.minSpecial.min),
-        Validators.max(Generators.password.settings.constraints.minSpecial.max),
-      ],
-    ],
     minNumberWords: [
       null,
-      [
+      [Validators.min(this.minNumberWordsMin), Validators.max(this.minNumberWordsMax)],
-        Validators.min(Generators.passphrase.settings.constraints.numWords.min),
-        Validators.max(Generators.passphrase.settings.constraints.numWords.max),
-      ],
     ],
     capitalize: [null],
     includeNumber: [null],