From a5b001bf6785cadc85c53054294532421b147e75 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 28 Jul 2021 16:37:42 +0300
Subject: [PATCH] UI: Change LwM2M DTLS PSK key length allow length 32, 64, 128

---
 .../device-credentials-lwm2m.component.html   |  5 ++---
 .../device-credentials-lwm2m.component.ts     | 19 ++++++++++++++++---
 .../models/lwm2m-security-config.models.ts    |  2 +-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.html
index c41b4b6900..9bc5c799ac 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.html
@@ -60,10 +60,9 @@
         <mat-error *ngIf="lwm2mConfigFormGroup.get('client.key').hasError('pattern')">
           {{ 'device.lwm2m-security-config.client-key-pattern' | translate }}
         </mat-error>
-        <mat-error *ngIf="(lwm2mConfigFormGroup.get('client.key').hasError('maxlength') ||
-        lwm2mConfigFormGroup.get('client.key').hasError('minlength'))">
+        <mat-error *ngIf="lwm2mConfigFormGroup.get('client.key').hasError('length')">
           {{ 'device.lwm2m-security-config.client-key-length' | translate: {
-          count: lenMaxKeyClient
+          count: allowLengthKey.join(', ')
         } }}
         </mat-error>
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.ts
index a118de24d6..99123a5db3 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.ts
@@ -16,6 +16,7 @@
 
 import { Component, forwardRef, OnDestroy } from '@angular/core';
 import {
+  AbstractControl,
   ControlValueAccessor,
   FormBuilder,
   FormGroup,
@@ -64,6 +65,7 @@ export class DeviceCredentialsLwm2mComponent implements ControlValueAccessor, Va
   securityConfigLwM2MTypes = Object.keys(Lwm2mSecurityType);
   credentialTypeLwM2MNamesMap = Lwm2mSecurityTypeTranslationMap;
   lenMaxKeyClient = LEN_MAX_PSK;
+  allowLengthKey: number[];
 
   private destroy$ = new Subject();
   private propagateChange = (v: any) => {};
@@ -119,7 +121,7 @@ export class DeviceCredentialsLwm2mComponent implements ControlValueAccessor, Va
         config.key = this.lwm2mConfigFormGroup.get('client.key').value;
         break;
     }
-    this.lwm2mConfigFormGroup.get('client').patchValue(config, {emitEvent: false});
+    this.lwm2mConfigFormGroup.get('client').reset(config, {emitEvent: false});
     this.securityConfigClientUpdateValidators(type);
   }
 
@@ -135,11 +137,13 @@ export class DeviceCredentialsLwm2mComponent implements ControlValueAccessor, Va
         break;
       case Lwm2mSecurityType.PSK:
         this.lenMaxKeyClient = LEN_MAX_PSK;
+        this.allowLengthKey = [32, 64, LEN_MAX_PSK];
         this.setValidatorsPskRpk(mode);
         this.lwm2mConfigFormGroup.get('client.identity').enable({emitEvent: false});
         break;
       case Lwm2mSecurityType.RPK:
         this.lenMaxKeyClient = LEN_MAX_PUBLIC_KEY_RPK;
+        this.allowLengthKey = [LEN_MAX_PUBLIC_KEY_RPK];
         this.setValidatorsPskRpk(mode);
         this.lwm2mConfigFormGroup.get('client.identity').disable({emitEvent: false});
         break;
@@ -164,13 +168,22 @@ export class DeviceCredentialsLwm2mComponent implements ControlValueAccessor, Va
     this.lwm2mConfigFormGroup.get('client.key').setValidators([
         Validators.required,
         Validators.pattern(KEY_REGEXP_HEX_DEC),
-        Validators.maxLength(this.lenMaxKeyClient),
-        Validators.minLength(this.lenMaxKeyClient)
+        this.maxLength(this.allowLengthKey)
       ]);
     this.lwm2mConfigFormGroup.get('client.key').enable({emitEvent: false});
     this.lwm2mConfigFormGroup.get('client.cert').disable({emitEvent: false});
   }
 
+  private maxLength(keyLengths: number[]) {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const value = control.value;
+      if (keyLengths.some(len => value.length === len)) {
+        return null;
+      }
+      return {length: true};
+    };
+  }
+
   private initLwm2mConfigForm = (): FormGroup => {
     const formGroup =  this.fb.group({
       client: this.fb.group({
diff --git a/ui-ngx/src/app/shared/models/lwm2m-security-config.models.ts b/ui-ngx/src/app/shared/models/lwm2m-security-config.models.ts
index dbdda353e9..060e1632f1 100644
--- a/ui-ngx/src/app/shared/models/lwm2m-security-config.models.ts
+++ b/ui-ngx/src/app/shared/models/lwm2m-security-config.models.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-export const LEN_MAX_PSK = 32;
+export const LEN_MAX_PSK = 128;
 export const LEN_MAX_PRIVATE_KEY = 134;
 export const LEN_MAX_PUBLIC_KEY_RPK = 182;
 export const LEN_MAX_PUBLIC_KEY_X509 = 3000;