UI: Refactoring

ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html

@@ -73,6 +73,7 @@
               <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
                 <mat-label translate>admin.maximum-password-length</mat-label>
                 <input matInput type="number" formControlName="maximumLength" step="1" min="6"/>
+                <mat-hint></mat-hint>
                 <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.maximumLength').hasError('min')">
                   {{ 'admin.maximum-password-length-min' | translate }}
                 </mat-error>
@@ -157,13 +158,8 @@
                 <mat-label translate>admin.allow-whitespace</mat-label>
               </mat-checkbox>
               <mat-checkbox fxFlex formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
-                <mat-label>
+                <mat-label tb-hint-tooltip-icon="{{'admin.force-reset-password-if-no-valid-hint' | translate}}">
                   {{'admin.force-reset-password-if-no-valid' | translate}}
-                  <mat-icon
-                    class="hint-icon"
-                    matTooltip="{{'admin.force-reset-password-if-no-valid-hint' | translate}}"
-                    svgIcon="mdi:information-outline">
-                  </mat-icon>
                 </mat-label>
               </mat-checkbox>
             </div>

ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts

@@ -213,7 +213,4 @@ export class SecuritySettingsComponent extends PageComponent implements HasConfi
   confirmForm(): UntypedFormGroup {
     return this.securitySettingsFormGroup.dirty ? this.securitySettingsFormGroup : this.jwtSecuritySettingsFormGroup;
   }
-
-  protected readonly queueProcessingStrategyTypes = QueueProcessingStrategyTypes;
-  protected readonly queueProcessingStrategyTypesMap = QueueProcessingStrategyTypesMap;
 }

ui-ngx/src/app/modules/home/pages/security/security.component.html

@@ -44,10 +44,11 @@
                 {{ 'security.password-requirement.incorrect-password-try-again' | translate }}
               </mat-error>
             </mat-form-field>
-            <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary">
+            <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary" subscriptSizing="dynamic">
               <mat-label translate>login.new-password</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword" autocomplete="new-password" required/>
               <tb-toggle-password [fxShow]="changePassword.get('newPassword').dirty || changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
+              <mat-hint></mat-hint>
               <mat-error *ngIf="changePassword.get('newPassword').errors
                               && !changePassword.get('newPassword').hasError('alreadyUsed')
                               && !changePassword.get('newPassword').hasError('hasWhitespaces')
@@ -105,7 +106,7 @@
               <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('minLength') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>
               {{ 'security.password-requirement.character' | translate : {count: passwordPolicy.minimumLength} }}
             </p>
-            <div *ngIf="passwordPolicy.maximumLength > 0">
+            <div class="password-requirements" *ngIf="passwordPolicy.maximumLength > 0">
               <h4 class="mat-h4" translate>security.password-requirement.at-most</h4>
               <p class="mat-body">
                 <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('maxLength') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>

ui-ngx/src/app/modules/home/pages/security/security.component.ts

@@ -171,6 +171,7 @@ export class SecurityComponent extends PageComponent implements OnInit, OnDestro
   private loadPasswordPolicy() {
     this.authService.getUserPasswordPolicy().subscribe(policy => {
       this.passwordPolicy = policy;
+      this.passwordPolicy.maximumLength = 7;
       this.changePassword.get('newPassword').setValidators([
         this.passwordStrengthValidator(),
         this.samePasswordValidation(true, 'currentPassword'),
@@ -213,8 +214,7 @@ export class SecurityComponent extends PageComponent implements OnInit, OnDestro
         errors.minLength = true;
       }
 
-      if (this.passwordPolicy?.maximumLength > 0 &&
-        (value.length > this.passwordPolicy?.maximumLength || value.length < this.passwordPolicy.minimumLength)) {
+      if (!value.length || this.passwordPolicy.maximumLength > 0 && value.length > this.passwordPolicy.maximumLength) {
         errors.maxLength = true;
       }