UI: Fixed signing key validators

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

@@ -165,9 +165,6 @@
       <span class="mat-headline" translate>admin.jwt.security-settings</span>
     </div>
   </mat-card-title>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <mat-card-content style="padding-top: 16px;">
     <form [formGroup]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off">
       <fieldset [disabled]="isLoading$ | async">
@@ -181,7 +178,7 @@
           </mat-form-field>
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>admin.jwt.signings-key</mat-label>
-            <input matInput required formControlName="tokenSigningKey"/>
+            <input matInput (focus)="markAsTouched()" required formControlName="tokenSigningKey"/>
             <button type="button"
                     matSuffix
                     mat-button
@@ -189,12 +186,16 @@
                     color="primary">
               {{ 'admin.jwt.generate-key' | translate }}
             </button>
+            <mat-hint translate>admin.jwt.signings-key-hint</mat-hint>
             <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('required')">
               {{ 'admin.jwt.signings-key-required' | translate }}
             </mat-error>
             <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('base64')">
               {{ 'admin.jwt.signings-key-base64' | translate }}
             </mat-error>
+            <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('minLength')">
+              {{ 'admin.jwt.signings-key-min-length' | translate }}
+            </mat-error>
           </mat-form-field>
         </div>
         <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">

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

@@ -121,6 +121,10 @@ export class SecuritySettingsComponent extends PageComponent implements HasConfi
     this.jwtSecuritySettingsFormGroup.reset(this.jwtSettings);
   }
 
+  markAsTouched() {
+    this.jwtSecuritySettingsFormGroup.get('tokenSigningKey').markAsTouched();
+  }
+
   private confirmChangeJWTSettings(): Observable<boolean> {
     if (this.jwtSecuritySettingsFormGroup.get('tokenIssuer').value !== (this.jwtSettings?.tokenIssuer || '') ||
       this.jwtSecuritySettingsFormGroup.get('tokenSigningKey').value !== (this.jwtSettings?.tokenSigningKey || '')) {
@@ -170,6 +174,9 @@ export class SecuritySettingsComponent extends PageComponent implements HasConfi
   private base64Format(control: FormControl): { [key: string]: boolean } | null {
     try {
       const value = atob(control.value);
+      if (value.length < 32 && control.value !== 'thingsboardDefaultSigningKey') {
+        return {minLength: true};
+      }
       return null;
     } catch (e) {
       return {base64: true};

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -387,13 +387,15 @@
             "issuer-name": "Issuer name",
             "issuer-name-required": "Issuer name is required.",
             "signings-key": "Signing key",
+            "signings-key-hint": "Base64 encoded string representing at least 256 bits of data.",
             "signings-key-required": "Signing key is required.",
+            "signings-key-min-length": "Signing key must be at least 256 bits of data.",
             "signings-key-base64": "Signing key must be base64 format.",
             "expiration-time": "Token expiration time (sec)",
             "expiration-time-required": "Token expiration time is required.",
             "expiration-time-pattern": "Token expiration time be a positive integer.",
             "expiration-time-min": "Minimum time is 60 seconds (1 minute).",
-            "refresh-expiration-time": "Refresh token expiration time",
+            "refresh-expiration-time": "Refresh token expiration time (sec)",
             "refresh-expiration-time-required": "Refresh token expiration time is required.",
             "refresh-expiration-time-pattern": "Refresh token expiration time be a positive integer.",
             "refresh-expiration-time-min": "Minimum time is 900 seconds (15 minute).",