Merge pull request #4133 from thingsboard/lwm2m_create_device

Lwm2m: front add validator json for security config value

ui-ngx/src/app/modules/home/components/device/device-credentials.component.html

@@ -88,6 +88,9 @@
       <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsValue').hasError('required')">
         {{ 'device.lwm2m-value-required' | translate }}
       </mat-error>
+      <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsValue').hasError('jsonError')">
+        {{ 'device.lwm2m-value-json-error' | translate }}
+      </mat-error>
       <div mat-dialog-actions fxLayoutAlign="center center">
         <button mat-raised-button color="primary"
                 matTooltip="{{'device.lwm2m-value-edit-tip' | translate }}"

ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import {Component, forwardRef, Input, OnDestroy, OnInit} from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -33,19 +33,19 @@ import {
   DeviceCredentials,
   DeviceCredentialsType
 } from '@shared/models/device.models';
-import { Subscription } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
-import { SecurityConfigComponent } from '@home/pages/device/lwm2m/security-config.component';
+import {Subscription} from 'rxjs';
+import {distinctUntilChanged} from 'rxjs/operators';
+import {SecurityConfigComponent} from '@home/pages/device/lwm2m/security-config.component';
 import {
   DEFAULT_END_POINT,
   DeviceCredentialsDialogLwm2mData,
   END_POINT,
   getDefaultSecurityConfig,
-  JSON_ALL_CONFIG
+  JSON_ALL_CONFIG, SecurityConfigModels, validateSecurityConfig
 } from '@home/pages/device/lwm2m/security-config.models';
-import { TranslateService } from '@ngx-translate/core';
-import { MatDialog } from '@angular/material/dialog';
-import { isDefinedAndNotNull } from '@core/utils';
+import {TranslateService} from '@ngx-translate/core';
+import {MatDialog} from '@angular/material/dialog';
+import {isDefinedAndNotNull} from '@core/utils';
 
 @Component({
   selector: 'tb-device-credentials',
@@ -196,13 +196,19 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
         this.deviceCredentialsFormGroup.get('credentialsBasic').disable({emitEvent: false});
         break;
       case DeviceCredentialsType.X509_CERTIFICATE:
-      case DeviceCredentialsType.LWM2M_CREDENTIALS:
         this.deviceCredentialsFormGroup.get('credentialsValue').setValidators([Validators.required]);
         this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity({emitEvent: false});
         this.deviceCredentialsFormGroup.get('credentialsId').setValidators([]);
         this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
         this.deviceCredentialsFormGroup.get('credentialsBasic').disable({emitEvent: false});
         break;
+      case DeviceCredentialsType.LWM2M_CREDENTIALS:
+        this.deviceCredentialsFormGroup.get('credentialsValue').setValidators([Validators.required, this.jsonValidator]);
+        this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsId').setValidators([]);
+        this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsBasic').disable({emitEvent: false});
+        break;
       case DeviceCredentialsType.MQTT_BASIC:
         this.deviceCredentialsFormGroup.get('credentialsBasic').enable({emitEvent: false});
         this.deviceCredentialsFormGroup.get('credentialsBasic').updateValueAndValidity({emitEvent: false});
@@ -247,7 +253,11 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
     if (credentialsValue === null || credentialsValue.length === 0) {
       credentialsValue = getDefaultSecurityConfig();
     } else {
-      credentialsValue = JSON.parse(credentialsValue);
+      try {
+        credentialsValue = JSON.parse(credentialsValue);
+      } catch (e) {
+        credentialsValue = getDefaultSecurityConfig();
+      }
     }
     const credentialsId = this.deviceCredentialsFormGroup.get('credentialsId').value || DEFAULT_END_POINT;
     this.dialog.open<SecurityConfigComponent, DeviceCredentialsDialogLwm2mData, object>(SecurityConfigComponent, {
@@ -273,4 +283,8 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
   private isDefautLw2mResponse(response: object): boolean {
     return Object.keys(response).length === 0 || JSON.stringify(response) === '[{}]';
   }
+
+  private jsonValidator(control: FormControl) {
+    return validateSecurityConfig(control.value) ? null: {jsonError: {parsedJson: "error"}};
+  }
 }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.ts

@@ -395,21 +395,4 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
       }
     });
   }
-
-  isPathInJson(path: string): boolean {
-    let isPath = this.findPathInJson(path, ATTRIBUTE);
-    if (!isPath) {
-      isPath = this.findPathInJson(path, TELEMETRY);
-    }
-    return !!isPath;
-  }
-
-  private findPathInJson = (path: string, side: string): string => {
-    if (this.configurationValue.observeAttr) {
-      if (this.configurationValue.observeAttr[side]) {
-        return this.configurationValue.bootstrap[side].find(
-          pathJs => pathJs === path);
-      }
-    }
-  }
 }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-list.component.ts

@@ -134,7 +134,7 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
   }
 
   private add(object: ObjectLwM2M): void {
-    if (this.modelValue.indexOf(object.id) === -1) {
+    if (isDefinedAndNotNull(this.modelValue) && this.modelValue.indexOf(object.id) === -1) {
       this.modelValue.push(object.id);
       this.objectsList.push(object);
       this.lwm2mListFormGroup.get('objectsList').setValue(this.objectsList);
@@ -151,9 +151,6 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
       index = this.modelValue.indexOf(object.id);
       this.modelValue.splice(index, 1);
       this.removeList.next(object);
-      if (!this.modelValue.length) {
-        this.modelValue = null;
-      }
       this.clear();
     }
   }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/profile-config.models.ts

@@ -27,7 +27,7 @@ export const DEFAULT_ID_SERVER = 123;
 export const DEFAULT_ID_BOOTSTRAP = 111;
 export const DEFAULT_HOST_NAME = 'localhost';
 export const DEFAULT_PORT_SERVER_NO_SEC = 5685;
-export const DEFAULT_PORT_BOOTSTRAP_NO_SEC = 5686;
+export const DEFAULT_PORT_BOOTSTRAP_NO_SEC = 5687;
 export const DEFAULT_CLIENT_HOLD_OFF_TIME = 1;
 export const DEFAULT_LIFE_TIME = 300;
 export const DEFAULT_MIN_PERIOD = 1;

ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.models.ts

@@ -20,7 +20,6 @@ export const DEFAULT_END_POINT = 'default_client_lwm2m_end_point_no_sec';
 export const BOOTSTRAP_SERVERS = 'servers';
 export const BOOTSTRAP_SERVER = 'bootstrapServer';
 export const LWM2M_SERVER = 'lwm2mServer';
-export const JSON_OBSERVE = 'jsonObserve';
 export const LEN_MAX_PSK = 64;
 export const LEN_MAX_PRIVATE_KEY = 134;
 export const LEN_MAX_PUBLIC_KEY_RPK = 182;
@@ -148,4 +147,41 @@ export function getDefaultSecurityConfig(): SecurityConfigModels {
   return securityConfigModels;
 }
 
+const isSecurityConfigModels = (p: any): p is SecurityConfigModels =>
+  p.hasOwnProperty('client') &&
+    isClientSecurityConfigType(p['client']) &&
+  p.hasOwnProperty('bootstrap') &&
+    isBootstrapSecurityConfig(p['bootstrap']);
+
+const isClientSecurityConfigType = (p: any): p is ClientSecurityConfigType =>
+  p.hasOwnProperty('securityConfigClientMode') &&
+  p.hasOwnProperty('endpoint') &&
+  p.hasOwnProperty('identity') &&
+  p.hasOwnProperty('key') &&
+  p.hasOwnProperty('x509');
+
+const isBootstrapSecurityConfig = (p: any): p is BootstrapSecurityConfig =>
+  p.hasOwnProperty('bootstrapServer') &&
+    isServerSecurityConfig(p['bootstrapServer']) &&
+  p.hasOwnProperty('lwm2mServer') &&
+    isServerSecurityConfig(p['lwm2mServer']);
+
+const isServerSecurityConfig = (p: any): p is ServerSecurityConfig =>
+  p.hasOwnProperty('securityMode') &&
+  p.hasOwnProperty('clientPublicKeyOrId') &&
+  p.hasOwnProperty('clientSecretKey');
+
+export function validateSecurityConfig(config: string): boolean {
+  try {
+    const securityConfig= JSON.parse(config);
+    if (isSecurityConfigModels(securityConfig)) {
+      return true;
+    } else {
+      return false;
+    }
+  } catch (e) {
+    return false;
+  }
+}
+
 

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

@@ -881,6 +881,7 @@
         "lwm2m-key-required": "LwM2M Security config key is required.",
         "lwm2m-value": "LwM2M Security config",
         "lwm2m-value-required": "LwM2M Security config value is required.",
+        "lwm2m-value-json-error": "LwM2M Security config value is not json format.",
         "lwm2m-endpoint": "Client endpoint/identity",
         "lwm2m-security-info": "Security Config Info",
         "lwm2m-value-edit": "Edit Security config",