[PM-252] fix inconsistent generator configuration behavior (#6755)

* decompose password generator policy enforcement
* integrate new logic with UI
* improve UX of minimum password length
* improve password generator policy options documentation
* initialize min length to default minimum length boundary
* reset form value on input to prevent UI desync from model

---------

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

apps/desktop/src/app/tools/generator.component.html

@@ -200,7 +200,7 @@
                   <input
                     id="length"
                     type="number"
-                    min="5"
+                    [min]="passwordOptions.minLength"
                     max="128"
                     [(ngModel)]="passwordOptions.length"
                     (blur)="savePasswordOptions()"
@@ -208,7 +208,7 @@
                   <input
                     id="lengthRange"
                     type="range"
-                    min="5"
+                    [min]="passwordOptions.minLength"
                     max="128"
                     step="1"
                     [(ngModel)]="passwordOptions.length"
@@ -218,6 +218,18 @@
                     tabindex="-1"
                   />
                 </div>
+                <div class="box-content-row" appBoxRow>
+                  <span>{{ "passwordMinLength" | i18n }}</span>
+                  <span class="txt-right">{{ passwordOptions.minLength }}</span>
+                  <span
+                    class="sr-only"
+                    attr.aria-label="{{ 'passwordMinLength' | i18n }}"
+                    role="status"
+                    aria-live="polite"
+                  >
+                    {{ passwordOptionsMinLengthForReader$ | async }}
+                  </span>
+                </div>
                 <div class="box-content-row box-content-row-checkbox" appBoxRow>
                   <label for="uppercase">A-Z</label>
                   <input
@@ -247,7 +259,8 @@
                     type="checkbox"
                     (change)="savePasswordOptions()"
                     [disabled]="enforcedPasswordPolicyOptions?.useNumbers"
-                    [(ngModel)]="passwordOptions.number"
+                    [ngModel]="passwordOptions.number"
+                    (ngModelChange)="setPasswordOptionsNumber($event)"
                     attr.aria-label="{{ 'numbers' | i18n }}"
                   />
                 </div>
@@ -258,7 +271,8 @@
                     type="checkbox"
                     (change)="savePasswordOptions()"
                     [disabled]="enforcedPasswordPolicyOptions?.useSpecial"
-                    [(ngModel)]="passwordOptions.special"
+                    [ngModel]="passwordOptions.special"
+                    (ngModelChange)="setPasswordOptionsSpecial($event)"
                     attr.aria-label="{{ 'specialCharacters' | i18n }}"
                   />
                 </div>
@@ -275,6 +289,7 @@
                     max="9"
                     (change)="savePasswordOptions()"
                     [(ngModel)]="passwordOptions.minNumber"
+                    (input)="onPasswordOptionsMinNumberInput($event)"
                   />
                 </div>
                 <div class="box-content-row box-content-row-input" appBoxRow>
@@ -286,6 +301,7 @@
                     max="9"
                     (change)="savePasswordOptions()"
                     [(ngModel)]="passwordOptions.minSpecial"
+                    (input)="onPasswordOptionsMinSpecialInput($event)"
                   />
                 </div>
                 <div class="box-content-row box-content-row-checkbox" appBoxRow>

apps/desktop/src/locales/en/messages.json

@@ -403,6 +403,9 @@
   "length": {
     "message": "Length"
   },
+  "passwordMinLength": {
+    "message": "Minimum password length"
+  },
   "uppercase": {
     "message": "Uppercase (A-Z)"
   },

apps/desktop/src/scss/box.scss

@@ -217,7 +217,8 @@
     }
   }
 
-  .img-right {
+  .img-right,
+  .txt-right {
     float: right;
     margin-left: 10px;
   }