From 1360c2abba34f50fc12a28377d91f3e008833ca6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=9C=A8=20Audrey=20=E2=9C=A8?= <ajensen@bitwarden.com>
Date: Wed, 20 Nov 2024 05:25:37 -0500
Subject: [PATCH] [PM-15058] fix admin console hmtl constraints (#12053)

---
 .../password-generator.component.html         | 40 +++++++++++++++----
 .../policies/password-generator.component.ts  | 40 +++++++------------
 2 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/policies/password-generator.component.html b/apps/web/src/app/admin-console/organizations/policies/password-generator.component.html
index a31679ce484..fcf03d27acc 100644
--- a/apps/web/src/app/admin-console/organizations/policies/password-generator.component.html
+++ b/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>
diff --git a/apps/web/src/app/admin-console/organizations/policies/password-generator.component.ts b/apps/web/src/app/admin-console/organizations/policies/password-generator.component.ts
index 9876876b295..818a0853ad3 100644
--- a/apps/web/src/app/admin-console/organizations/policies/password-generator.component.ts
+++ b/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: [
-      null,
-      [
-        Validators.min(Generators.password.settings.constraints.length.min),
-        Validators.max(Generators.password.settings.constraints.length.max),
-      ],
-    ],
+    minLength: [null, [Validators.min(this.minLengthMin), Validators.max(this.minLengthMax)]],
     useUpper: [null],
     useLower: [null],
     useNumbers: [null],
     useSpecial: [null],
-    minNumbers: [
-      null,
-      [
-        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),
-      ],
-    ],
+    minNumbers: [null, [Validators.min(this.minNumbersMin), Validators.max(this.minNumbersMax)]],
+    minSpecial: [null, [Validators.min(this.minSpecialMin), Validators.max(this.minSpecialMax)]],
     minNumberWords: [
       null,
-      [
-        Validators.min(Generators.passphrase.settings.constraints.numWords.min),
-        Validators.max(Generators.passphrase.settings.constraints.numWords.max),
-      ],
+      [Validators.min(this.minNumberWordsMin), Validators.max(this.minNumberWordsMax)],
     ],
     capitalize: [null],
     includeNumber: [null],