From 0710d272a1bb1b9121e73b8ed1705c5e57c81760 Mon Sep 17 00:00:00 2001
From: nickAS21 <nick@thingsboard.io>
Date: Fri, 26 Mar 2021 12:34:36 +0200
Subject: [PATCH] lwm2m: front fix bug create device lwm2mConfig default

---
 .../device/device-credentials.component.html  |  8 ++-
 .../device/device-credentials.component.ts    | 17 +++--
 ...ile-transport-configuration.component.html |  2 +-
 .../device/lwm2m/security-config.component.ts | 49 +++++++------
 .../device/lwm2m/security-config.models.ts    | 68 ++++++-------------
 .../assets/locale/locale.constant-en_US.json  |  4 +-
 6 files changed, 65 insertions(+), 83 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
index 55c2979fd9..faa2dbbce4 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
@@ -84,16 +84,18 @@
     </mat-form-field>
     <mat-form-field class="mat-block">
       <mat-label translate>device.lwm2m-value</mat-label>
-      <textarea matInput formControlName="credentialsValue" rows="10" required></textarea>
+      <textarea matInput formControlName="credentialsValue" rows="10" required
+                [matTooltip]="lwm2mCredentialsValueTip(deviceCredentialsFormGroup.get('credentialsValue').hasError('jsonError'))"
+                matTooltipPosition="above"
+      ></textarea>
       <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 }}
+        {{ 'device.lwm2m-value-format-error' | translate }}
       </mat-error>
       <div mat-dialog-actions fxLayoutAlign="center center">
         <button mat-raised-button color="primary"
-                matTooltip="{{'device.lwm2m-value-edit-tip' | translate }}"
                 (click)="openSecurityInfoLwM2mDialog($event)"
         >
           {{'device.lwm2m-value-edit' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
index fb4e81653e..edc331d338 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
@@ -37,11 +37,13 @@ import {Subscription} from 'rxjs';
 import {distinctUntilChanged} from 'rxjs/operators';
 import {SecurityConfigComponent} from '@home/pages/device/lwm2m/security-config.component';
 import {
+  ClientSecurityConfig,
   DEFAULT_END_POINT,
   DeviceCredentialsDialogLwm2mData,
   END_POINT,
   getDefaultSecurityConfig,
-  JSON_ALL_CONFIG, SecurityConfigModels, validateSecurityConfig
+  JSON_ALL_CONFIG,
+  validateSecurityConfig
 } from '@home/pages/device/lwm2m/security-config.models';
 import {TranslateService} from '@ngx-translate/core';
 import {MatDialog} from '@angular/material/dialog';
@@ -129,6 +131,8 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
       let credentialsValue = null;
       if (value.credentialsType === DeviceCredentialsType.MQTT_BASIC) {
         credentialsBasic = JSON.parse(value.credentialsValue) as DeviceCredentialMQTTBasic;
+      } else if (value.credentialsType === DeviceCredentialsType.LWM2M_CREDENTIALS) {
+        credentialsValue = JSON.parse(JSON.stringify(value.credentialsValue)) as ClientSecurityConfig;
       } else {
         credentialsValue = value.credentialsValue;
       }
@@ -178,7 +182,7 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
   credentialsTypeChanged(): void {
     this.deviceCredentialsFormGroup.patchValue({
       credentialsId: null,
-      credentialsValue: null,
+      credentialsValue: JSON.stringify(getDefaultSecurityConfig(), null, 2),
       credentialsBasic: {clientId: '', userName: '', password: ''}
     });
     this.updateValidators();
@@ -203,7 +207,7 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
         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').setValidators([Validators.required, this.lwm2mConfigJsonValidator]);
         this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity({emitEvent: false});
         this.deviceCredentialsFormGroup.get('credentialsId').setValidators([]);
         this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
@@ -284,7 +288,12 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
     return Object.keys(response).length === 0 || JSON.stringify(response) === '[{}]';
   }
 
-  private jsonValidator(control: FormControl) {
+  private lwm2mConfigJsonValidator(control: FormControl) {
     return validateSecurityConfig(control.value) ? null: {jsonError: {parsedJson: "error"}};
   }
+
+  lwm2mCredentialsValueTip (flag: boolean): string {
+    let jsonConfigDef =  JSON.stringify(getDefaultSecurityConfig(), null, 2);
+    return !flag ? "" : 'Example (mode=\"NoSec\"):\n\r ' + jsonConfigDef;
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
index 3d4030cc0e..84797bcb98 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
@@ -20,7 +20,7 @@
     <mat-tab label="{{ 'device-profile.lwm2m.model-tab' | translate }}">
       <ng-template matTabContent>
         <section [formGroup]="lwm2mDeviceProfileFormGroup">
-          <div class="mat-padding" style="padding-bottom: 0px">
+          <div *ngIf="false" class="mat-padding" style="padding-bottom: 0px">
             <mat-form-field class="mat-block">
               <mat-label>{{ 'device-profile.lwm2m.client-only-observe-after-connect-label' | translate }}</mat-label>
               <mat-select formControlName="clientOnlyObserveAfterConnect"
diff --git a/ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.component.ts b/ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.component.ts
index 9d1116e06f..028f28c72a 100644
--- a/ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.component.ts
@@ -15,23 +15,20 @@
 ///
 
 
-import { Component, Inject, OnInit } from '@angular/core';
-import { DialogComponent } from '@shared/components/dialog.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
+import {Component, Inject, OnInit} from '@angular/core';
+import {DialogComponent} from '@shared/components/dialog.component';
+import {Store} from '@ngrx/store';
+import {AppState} from '@core/core.state';
+import {Router} from '@angular/router';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {TranslateService} from '@ngx-translate/core';
 import {
   BOOTSTRAP_SERVER,
   BOOTSTRAP_SERVERS,
-  ClientSecurityConfigNoSEC,
-  ClientSecurityConfigPSK,
-  ClientSecurityConfigRPK,
-  ClientSecurityConfigX509,
+  ClientSecurityConfig,
   DeviceCredentialsDialogLwm2mData,
-  getDefaultClientSecurityConfigType,
+  getClientSecurityConfig,
   JSON_ALL_CONFIG,
   KEY_REGEXP_HEX_DEC,
   LEN_MAX_PSK,
@@ -41,9 +38,9 @@ import {
   SECURITY_CONFIG_MODE_NAMES,
   SecurityConfigModels
 } from './security-config.models';
-import { WINDOW } from '@core/services/window.service';
-import { MatTabChangeEvent } from '@angular/material/tabs';
-import { MatTab } from '@angular/material/tabs/tab';
+import {WINDOW} from '@core/services/window.service';
+import {MatTabChangeEvent} from '@angular/material/tabs';
+import {MatTab} from '@angular/material/tabs/tab';
 
 @Component({
   selector: 'tb-security-config-lwm2m',
@@ -115,20 +112,20 @@ export class SecurityConfigComponent extends DialogComponent<SecurityConfigCompo
       case SECURITY_CONFIG_MODE.NO_SEC:
         break;
       case SECURITY_CONFIG_MODE.PSK:
-        const clientSecurityConfigPSK = jsonAllConfig.client as ClientSecurityConfigPSK;
+        const clientSecurityConfigPSK = jsonAllConfig.client as ClientSecurityConfig;
         this.lwm2mConfigFormGroup.patchValue({
           identityPSK: clientSecurityConfigPSK.identity,
           clientKey: clientSecurityConfigPSK.key,
         }, {emitEvent: false});
         break;
       case SECURITY_CONFIG_MODE.RPK:
-        const clientSecurityConfigRPK = jsonAllConfig.client as ClientSecurityConfigRPK;
+        const clientSecurityConfigRPK = jsonAllConfig.client as ClientSecurityConfig;
         this.lwm2mConfigFormGroup.patchValue({
           clientKey: clientSecurityConfigRPK.key,
         }, {emitEvent: false});
         break;
       case SECURITY_CONFIG_MODE.X509:
-        const clientSecurityConfigX509 = jsonAllConfig.client as ClientSecurityConfigX509;
+        const clientSecurityConfigX509 = jsonAllConfig.client as ClientSecurityConfig;
         this.lwm2mConfigFormGroup.patchValue({
           clientCertificate: clientSecurityConfigX509.x509
         }, {emitEvent: false});
@@ -140,7 +137,7 @@ export class SecurityConfigComponent extends DialogComponent<SecurityConfigCompo
   securityConfigClientModeChanged = (mode: SECURITY_CONFIG_MODE): void => {
     switch (mode) {
       case SECURITY_CONFIG_MODE.NO_SEC:
-        const clientSecurityConfigNoSEC = getDefaultClientSecurityConfigType(mode) as ClientSecurityConfigNoSEC;
+        const clientSecurityConfigNoSEC = getClientSecurityConfig(mode) as ClientSecurityConfig;
         this.jsonAllConfig.client = clientSecurityConfigNoSEC;
         this.lwm2mConfigFormGroup.patchValue({
           jsonAllConfig: this.jsonAllConfig,
@@ -148,8 +145,8 @@ export class SecurityConfigComponent extends DialogComponent<SecurityConfigCompo
         }, {emitEvent: false});
         break;
       case SECURITY_CONFIG_MODE.PSK:
-        const clientSecurityConfigPSK = getDefaultClientSecurityConfigType(mode, this.lwm2mConfigFormGroup.get('endPoint')
-          .value) as ClientSecurityConfigPSK;
+        const clientSecurityConfigPSK = getClientSecurityConfig(mode, this.lwm2mConfigFormGroup.get('endPoint')
+          .value) as ClientSecurityConfig;
         clientSecurityConfigPSK.identity = this.data.endPoint;
         clientSecurityConfigPSK.key = this.lwm2mConfigFormGroup.get('clientKey').value;
         this.jsonAllConfig.client = clientSecurityConfigPSK;
@@ -159,7 +156,7 @@ export class SecurityConfigComponent extends DialogComponent<SecurityConfigCompo
         }, {emitEvent: false});
         break;
       case SECURITY_CONFIG_MODE.RPK:
-        const clientSecurityConfigRPK = getDefaultClientSecurityConfigType(mode) as ClientSecurityConfigRPK;
+        const clientSecurityConfigRPK = getClientSecurityConfig(mode) as ClientSecurityConfig;
         clientSecurityConfigRPK.key = this.lwm2mConfigFormGroup.get('clientKey').value;
         this.jsonAllConfig.client = clientSecurityConfigRPK;
         this.lwm2mConfigFormGroup.patchValue({
@@ -167,7 +164,7 @@ export class SecurityConfigComponent extends DialogComponent<SecurityConfigCompo
         }, {emitEvent: false});
         break;
       case SECURITY_CONFIG_MODE.X509:
-        this.jsonAllConfig.client = getDefaultClientSecurityConfigType(mode) as ClientSecurityConfigX509;
+        this.jsonAllConfig.client = getClientSecurityConfig(mode) as ClientSecurityConfig;
         this.lwm2mConfigFormGroup.patchValue({
           clientCertificate: true
         }, {emitEvent: false});
@@ -236,11 +233,11 @@ export class SecurityConfigComponent extends DialogComponent<SecurityConfigCompo
     if (this.lwm2mConfigFormGroup !== null) {
       if (!this.lwm2mConfigFormGroup.get('endPoint').pristine && this.lwm2mConfigFormGroup.get('endPoint').valid) {
         this.data.endPoint = this.lwm2mConfigFormGroup.get('endPoint').value;
-        // Client mode == PSK
+        /** Client mode == PSK */
         if (this.lwm2mConfigFormGroup.get('securityConfigClientMode').value === SECURITY_CONFIG_MODE.PSK) {
           const endPoint = 'endpoint';
           this.jsonAllConfig.client[endPoint] = this.data.endPoint;
-          this.jsonAllConfig.client[endPoint].markAsPristine({
+          this.lwm2mConfigFormGroup.get('endPoint').markAsPristine({
             onlySelf: true
           });
           this.upDateJsonAllConfig();
diff --git a/ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.models.ts b/ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.models.ts
index a42757d326..32b8026a4c 100644
--- a/ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.models.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.models.ts
@@ -48,33 +48,14 @@ export const SECURITY_CONFIG_MODE_NAMES = new Map<SECURITY_CONFIG_MODE, string>(
   ]
 );
 
-export type ClientSecurityConfigType =
-  ClientSecurityConfigPSK
-  | ClientSecurityConfigRPK
-  | ClientSecurityConfigX509
-  | ClientSecurityConfigNoSEC;
-
-export interface ClientSecurityConfigPSK {
+export interface ClientSecurityConfig {
   securityConfigClientMode: string;
   endpoint: string;
   identity: string;
   key: string;
-}
-
-export interface ClientSecurityConfigRPK {
-  securityConfigClientMode: string;
-  key: string;
-}
-
-export interface ClientSecurityConfigX509 {
-  securityConfigClientMode: string;
   x509: boolean;
 }
 
-export interface ClientSecurityConfigNoSEC {
-  securityConfigClientMode: string;
-}
-
 export interface ServerSecurityConfig {
   securityMode: string;
   clientPublicKeyOrId?: string;
@@ -87,43 +68,36 @@ interface BootstrapSecurityConfig {
 }
 
 export interface SecurityConfigModels {
-  client: ClientSecurityConfigType;
+  client: ClientSecurityConfig;
   bootstrap: BootstrapSecurityConfig;
 }
 
-export function getDefaultClientSecurityConfigType(securityConfigMode: SECURITY_CONFIG_MODE, endPoint?: string): ClientSecurityConfigType {
-  let security: ClientSecurityConfigType;
+export function getClientSecurityConfig(securityConfigMode: SECURITY_CONFIG_MODE, endPoint?: string): ClientSecurityConfig {
+  let security = getDefaultClientSecurityConfig();
+  security.securityConfigClientMode = securityConfigMode.toString();
   switch (securityConfigMode) {
     case SECURITY_CONFIG_MODE.PSK:
-      security = {
-        securityConfigClientMode: '',
-        endpoint: endPoint,
-        identity: endPoint,
-        key: ''
-      };
-      break;
-    case SECURITY_CONFIG_MODE.RPK:
-      security = {
-        securityConfigClientMode: '',
-        key: ''
-      };
+      security.endpoint =  endPoint;
+      security.identity =  endPoint;
       break;
     case SECURITY_CONFIG_MODE.X509:
-      security = {
-        securityConfigClientMode: '',
-        x509: true
-      };
-      break;
-    case SECURITY_CONFIG_MODE.NO_SEC:
-      security = {
-        securityConfigClientMode: ''
-      };
+      security.x509 = true;
       break;
   }
-  security.securityConfigClientMode = securityConfigMode.toString();
+
   return security;
 }
 
+export function getDefaultClientSecurityConfig(): ClientSecurityConfig {
+  return {
+    securityConfigClientMode: SECURITY_CONFIG_MODE.NO_SEC.toString(),
+    endpoint: '',
+    identity: '',
+    key: '',
+    x509: false
+  };
+}
+
 export function getDefaultServerSecurityConfig(): ServerSecurityConfig {
   return {
     securityMode: SECURITY_CONFIG_MODE.NO_SEC.toString(),
@@ -141,7 +115,7 @@ function getDefaultBootstrapSecurityConfig(): BootstrapSecurityConfig {
 
 export function getDefaultSecurityConfig(): SecurityConfigModels {
   const securityConfigModels = {
-    client: getDefaultClientSecurityConfigType(SECURITY_CONFIG_MODE.NO_SEC),
+    client: getClientSecurityConfig(SECURITY_CONFIG_MODE.NO_SEC),
     bootstrap: getDefaultBootstrapSecurityConfig()
   };
   return securityConfigModels;
@@ -153,7 +127,7 @@ const isSecurityConfigModels = (p: any): p is SecurityConfigModels =>
   p.hasOwnProperty('bootstrap') &&
     isBootstrapSecurityConfig(p['bootstrap']);
 
-const isClientSecurityConfigType = (p: any): p is ClientSecurityConfigType =>
+const isClientSecurityConfigType = (p: any): p is ClientSecurityConfig =>
   p.hasOwnProperty('securityConfigClientMode') &&
   p.hasOwnProperty('endpoint') &&
   p.hasOwnProperty('identity') &&
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index e7e301b49d..e645084c26 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -888,11 +888,11 @@
         "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-value-format-error": "Security config value must be in LwM2M Security config format.",
         "lwm2m-endpoint": "Client endpoint/identity",
         "lwm2m-security-info": "Security Config Info",
         "lwm2m-value-edit": "Edit Security config",
-        "lwm2m-value-edit-tip": "Edit security config json editor",
+        "lwm2m-credentials-value-tip": "Edit security config json editor",
         "lwm2m-security-config": {
           "identity": "Client Identity",
           "client-key": "Client Key",