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 db28ff0453..0cf349a074 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 @@ -75,32 +75,7 @@ ('device.client-id-or-user-name-necessary' | translate) : ''">
- - device.lwm2m-key - - - {{ 'device.lwm2m-key-required' | translate }} - - - - device.lwm2m-value - - - {{ 'device.lwm2m-value-required' | translate }} - - - {{ 'device.lwm2m-value-format-error' | 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 17ad828b48..19e9419829 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 @@ -34,19 +34,7 @@ import { DeviceCredentialsType } from '@shared/models/device.models'; import { Subject } from 'rxjs'; -import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; -import { SecurityConfigLwm2mComponent } from '@home/components/device/security-config-lwm2m.component'; -import { - ClientSecurityConfig, - DEFAULT_END_POINT, - DeviceCredentialsDialogLwm2mData, - END_POINT, - getDefaultSecurityConfig, - JSON_ALL_CONFIG, - validateSecurityConfig -} from '@shared/models/lwm2m-security-config.models'; -import { TranslateService } from '@ngx-translate/core'; -import { MatDialog } from '@angular/material/dialog'; +import { takeUntil } from 'rxjs/operators'; import { isDefinedAndNotNull } from '@core/utils'; @Component({ @@ -84,9 +72,7 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit, private propagateChange = (v: any) => {}; - constructor(public fb: FormBuilder, - private translate: TranslateService, - private dialog: MatDialog) { + constructor(public fb: FormBuilder) { this.deviceCredentialsFormGroup = this.fb.group({ credentialsType: [DeviceCredentialsType.ACCESS_TOKEN], credentialsId: [null], @@ -99,15 +85,14 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit, }); this.deviceCredentialsFormGroup.get('credentialsBasic').disable(); this.deviceCredentialsFormGroup.valueChanges.pipe( - distinctUntilChanged(), takeUntil(this.destroy$) ).subscribe(() => { this.updateView(); }); this.deviceCredentialsFormGroup.get('credentialsType').valueChanges.pipe( takeUntil(this.destroy$) - ).subscribe((type) => { - this.credentialsTypeChanged(type); + ).subscribe(() => { + this.credentialsTypeChanged(); }); } @@ -128,8 +113,6 @@ 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; } @@ -176,11 +159,10 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit, }; } - credentialsTypeChanged(credentialsType: DeviceCredentialsType): void { - const credentialsValue = credentialsType === DeviceCredentialsType.LWM2M_CREDENTIALS ? this.lwm2mDefaultConfig : null; + credentialsTypeChanged(): void { this.deviceCredentialsFormGroup.patchValue({ credentialsId: null, - credentialsValue, + credentialsValue: null, credentialsBasic: {clientId: '', userName: '', password: ''} }); this.updateValidators(); @@ -198,14 +180,8 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit, this.deviceCredentialsFormGroup.get('credentialsBasic').disable({emitEvent: false}); break; case DeviceCredentialsType.X509_CERTIFICATE: - 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.lwm2mConfigJsonValidator]); + 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}); @@ -245,56 +221,4 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit, onlySelf: true }); } - - openSecurityInfoLwM2mDialog($event: Event): void { - if ($event) { - $event.stopPropagation(); - $event.preventDefault(); - } - let credentialsValue = this.deviceCredentialsFormGroup.get('credentialsValue').value; - if (credentialsValue === null || credentialsValue.length === 0) { - credentialsValue = getDefaultSecurityConfig(); - } else { - try { - credentialsValue = JSON.parse(credentialsValue); - } catch (e) { - credentialsValue = getDefaultSecurityConfig(); - } - } - const credentialsId = this.deviceCredentialsFormGroup.get('credentialsId').value || DEFAULT_END_POINT; - this.dialog.open(SecurityConfigLwm2mComponent, { - disableClose: true, - panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], - data: { - jsonAllConfig: credentialsValue, - endPoint: credentialsId - } - }).afterClosed().subscribe( - (res) => { - if (res) { - this.deviceCredentialsFormGroup.patchValue({ - credentialsValue: this.isDefaultLw2mResponse(res[JSON_ALL_CONFIG]) ? null : JSON.stringify(res[JSON_ALL_CONFIG]), - credentialsId: this.isDefaultLw2mResponse(res[END_POINT]) ? null : JSON.stringify(res[END_POINT]).split('\"').join('') - }); - this.deviceCredentialsFormGroup.get('credentialsValue').markAsDirty(); - } - } - ); - } - - private isDefaultLw2mResponse(response: object): boolean { - return Object.keys(response).length === 0 || JSON.stringify(response) === '[{}]'; - } - - private lwm2mConfigJsonValidator(control: FormControl) { - return validateSecurityConfig(control.value) ? null : {jsonError: {parsedJson: 'error'}}; - } - - private get lwm2mDefaultConfig(): string { - return JSON.stringify(getDefaultSecurityConfig(), null, 2); - } - - lwm2mCredentialsValueTooltip(flag: boolean): string { - return !flag ? '' : 'Example (mode=\"NoSec\"):\n\r ' + this.lwm2mDefaultConfig; - } } diff --git a/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m-server.component.ts b/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m-server.component.ts index b8e1b42ef4..d599927834 100644 --- a/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m-server.component.ts +++ b/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m-server.component.ts @@ -130,6 +130,8 @@ export class SecurityConfigLwm2mServerComponent implements OnDestroy, ControlVal case Lwm2mSecurityType.NO_SEC: this.serverFormGroup.get('clientPublicKeyOrId').clearValidators(); this.serverFormGroup.get('clientSecretKey').clearValidators(); + this.serverFormGroup.get('clientPublicKeyOrId').disable({emitEvent: false}); + this.serverFormGroup.get('clientSecretKey').disable(); break; case Lwm2mSecurityType.PSK: this.lenMinClientPublicKeyOrId = 0; @@ -172,5 +174,8 @@ export class SecurityConfigLwm2mServerComponent implements OnDestroy, ControlVal Validators.minLength(this.lengthClientSecretKey), Validators.maxLength(this.lengthClientSecretKey) ]); + + this.serverFormGroup.get('clientPublicKeyOrId').enable({emitEvent: false}); + this.serverFormGroup.get('clientSecretKey').enable(); } } diff --git a/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m.component.html b/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m.component.html index bd83cc817b..77b7601ed5 100644 --- a/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m.component.html +++ b/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m.component.html @@ -15,129 +15,109 @@ limitations under the License. --> -
- -

{{ title }}

- - - -
- - device.lwm2m-security-config.endpoint - - - {{ 'device.lwm2m-security-config.endpoint-required' | translate }} - - - - - - device.lwm2m-security-config.mode - - - {{ credentialTypeLwM2MNamesMap.get(securityConfigLwM2MType[securityConfigClientMode]) }} - - - -
- - {{ 'device.lwm2m-security-config.identity' | translate }} - - - {{ 'device.lwm2m-security-config.identity-required' | translate }} - - -
- - {{ 'device.lwm2m-security-config.client-key' | translate }} - - {{key.value?.length || 0}}/{{lenMaxKeyClient}} - - {{ 'device.lwm2m-security-config.client-key-required' | translate }} - - - {{ 'device.lwm2m-security-config.client-key-pattern' | translate }} - - - {{ 'device.lwm2m-security-config.client-key-length' | translate: { - count: lenMaxKeyClient - } }} - - - - {{ 'device.lwm2m-security-config.client-certificate' | translate }} - - - -
- - - - - {{ 'device.lwm2m-security-config.bootstrap-server' | translate }} - - - - - - - - - - - {{ 'device.lwm2m-security-config.lwm2m-server' | translate }} - - - - - - - - -
- - - - - - - - -
-
- - -
-
+ + + + + device.lwm2m-security-config.endpoint + + + {{ 'device.lwm2m-security-config.endpoint-required' | translate }} + + + + device.lwm2m-security-config.mode + + + {{ credentialTypeLwM2MNamesMap.get(securityConfigLwM2MType[securityConfigClientMode]) }} + + + + + {{ 'device.lwm2m-security-config.identity' | translate }} + + + {{ 'device.lwm2m-security-config.identity-required' | translate }} + + + + {{ 'device.lwm2m-security-config.client-key' | translate }} + + {{key.value?.length || 0}}/{{lenMaxKeyClient}} + + {{ 'device.lwm2m-security-config.client-key-required' | translate }} + + + {{ 'device.lwm2m-security-config.client-key-pattern' | translate }} + + + {{ 'device.lwm2m-security-config.client-key-length' | translate: { + count: lenMaxKeyClient + } }} + + + + device.lwm2m-security-config.client-public-key + + device.lwm2m-security-config.client-public-key-hint + + + + +
+ + + + + {{ 'device.lwm2m-security-config.bootstrap-server' | translate }} + + + + + + + + + + + {{ 'device.lwm2m-security-config.lwm2m-server' | translate }} + + + + + + + + +
+ + + + + + + + diff --git a/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m.component.ts b/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m.component.ts index 419576753c..eb920d6190 100644 --- a/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m.component.ts +++ b/ui-ngx/src/app/modules/home/components/device/security-config-lwm2m.component.ts @@ -14,19 +14,20 @@ /// limitations under the License. /// - -import { Component, Inject, OnDestroy, 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, forwardRef, OnDestroy } from '@angular/core'; +import { + ControlValueAccessor, + FormBuilder, + FormGroup, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + ValidationErrors, + Validator, + Validators +} from '@angular/forms'; import { - DeviceCredentialsDialogLwm2mData, - getClientSecurityConfig, - JSON_ALL_CONFIG, + getDefaultClientSecurityConfig, + getDefaultServerSecurityConfig, KEY_REGEXP_HEX_DEC, LEN_MAX_PSK, LEN_MAX_PUBLIC_KEY_RPK, @@ -34,48 +35,67 @@ import { Lwm2mSecurityType, Lwm2mSecurityTypeTranslationMap } from '@shared/models/lwm2m-security-config.models'; -import { MatTabChangeEvent } from '@angular/material/tabs'; -import { MatTab } from '@angular/material/tabs/tab'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { isDefinedAndNotNull } from '@core/utils'; @Component({ selector: 'tb-security-config-lwm2m', templateUrl: './security-config-lwm2m.component.html', - styleUrls: ['./security-config-lwm2m.component.scss'] + styleUrls: ['./security-config-lwm2m.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SecurityConfigLwm2mComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => SecurityConfigLwm2mComponent), + multi: true + } + ] }) -export class SecurityConfigLwm2mComponent extends DialogComponent implements OnInit, OnDestroy { - - private destroy$ = new Subject(); +export class SecurityConfigLwm2mComponent implements ControlValueAccessor, Validator, OnDestroy { lwm2mConfigFormGroup: FormGroup; - title: string; securityConfigLwM2MType = Lwm2mSecurityType; securityConfigLwM2MTypes = Object.keys(Lwm2mSecurityType); credentialTypeLwM2MNamesMap = Lwm2mSecurityTypeTranslationMap; - formControlNameJsonAllConfig = JSON_ALL_CONFIG; - jsonAllConfig: Lwm2mSecurityConfigModels; lenMaxKeyClient = LEN_MAX_PSK; - tabPrevious: MatTab; - tabIndexPrevious = 0; - constructor(protected store: Store, - protected router: Router, - @Inject(MAT_DIALOG_DATA) public data: DeviceCredentialsDialogLwm2mData, - public dialogRef: MatDialogRef, - public fb: FormBuilder, - public translate: TranslateService) { - super(store, router, dialogRef); + private destroy$ = new Subject(); + private propagateChange = (v: any) => {}; + + constructor(private fb: FormBuilder) { + this.lwm2mConfigFormGroup = this.initLwm2mConfigForm(); } - ngOnInit() { - this.jsonAllConfig = JSON.parse(JSON.stringify(this.data.jsonAllConfig)); - this.lwm2mConfigFormGroup = this.initLwm2mConfigFormGroup(); - this.title = this.translate.instant('device.lwm2m-security-info') + ': ' + this.data.endPoint; - this.lwm2mConfigFormGroup.get('x509').disable(); - this.initClientSecurityConfig(this.lwm2mConfigFormGroup.get('jsonAllConfig').value); - this.registerDisableOnLoadFormControl(this.lwm2mConfigFormGroup.get('securityConfigClientMode')); + writeValue(obj: string) { + if (isDefinedAndNotNull(obj)) { + this.initClientSecurityConfig(JSON.parse(obj)); + } + } + + registerOnChange(fn: any) { + this.propagateChange = fn; + } + + registerOnTouched(fn: any) {} + + setDisabledState(isDisabled: boolean): void { + if (isDisabled) { + this.lwm2mConfigFormGroup.disable({emitEvent: false}); + } else { + this.lwm2mConfigFormGroup.enable({emitEvent: false}); + } + } + + validate(): ValidationErrors | null { + return this.lwm2mConfigFormGroup.valid ? null : { + securityConfigLWm2m: false + }; } ngOnDestroy() { @@ -83,175 +103,97 @@ export class SecurityConfigLwm2mComponent extends DialogComponent { - if (jsonAllConfig.client.securityConfigClientMode !== Lwm2mSecurityType.NO_SEC) { - this.lwm2mConfigFormGroup.patchValue(jsonAllConfig.client, {emitEvent: false}); - } - this.securityConfigClientUpdateValidators(jsonAllConfig.client.securityConfigClientMode); + private initClientSecurityConfig(config: Lwm2mSecurityConfigModels): void { + this.lwm2mConfigFormGroup.patchValue(config, {emitEvent: false}); + this.securityConfigClientUpdateValidators(config.client.securityConfigClientMode); } private securityConfigClientModeChanged(type: Lwm2mSecurityType): void { - const config = getClientSecurityConfig(type, this.lwm2mConfigFormGroup.get('endPoint').value); + const config = getDefaultClientSecurityConfig(type, this.lwm2mConfigFormGroup.get('client.endpoint').value); switch (type) { case Lwm2mSecurityType.PSK: - config.identity = this.data.endPoint; - config.key = this.lwm2mConfigFormGroup.get('key').value; + config.key = this.lwm2mConfigFormGroup.get('client.key').value; break; case Lwm2mSecurityType.RPK: - config.key = this.lwm2mConfigFormGroup.get('key').value; + config.key = this.lwm2mConfigFormGroup.get('client.key').value; break; } - this.jsonAllConfig.client = config; - this.lwm2mConfigFormGroup.patchValue({ - ...config, - jsonAllConfig: this.jsonAllConfig - }, {emitEvent: false}); + this.lwm2mConfigFormGroup.get('client').patchValue(config, {emitEvent: false}); this.securityConfigClientUpdateValidators(type); } private securityConfigClientUpdateValidators = (mode: Lwm2mSecurityType): void => { switch (mode) { case Lwm2mSecurityType.NO_SEC: + this.setValidatorsNoSecX509(); + this.lwm2mConfigFormGroup.get('client.cert').disable(); + break; case Lwm2mSecurityType.X509: this.setValidatorsNoSecX509(); + this.lwm2mConfigFormGroup.get('client.cert').enable(); break; case Lwm2mSecurityType.PSK: this.lenMaxKeyClient = LEN_MAX_PSK; this.setValidatorsPskRpk(mode); + this.lwm2mConfigFormGroup.get('client.identity').enable(); break; case Lwm2mSecurityType.RPK: this.lenMaxKeyClient = LEN_MAX_PUBLIC_KEY_RPK; this.setValidatorsPskRpk(mode); + this.lwm2mConfigFormGroup.get('client.identity').disable(); break; } - this.lwm2mConfigFormGroup.get('identity').updateValueAndValidity({emitEvent: false}); - this.lwm2mConfigFormGroup.get('key').updateValueAndValidity({emitEvent: false}); + this.lwm2mConfigFormGroup.get('client.identity').updateValueAndValidity({emitEvent: false}); + this.lwm2mConfigFormGroup.get('client.key').updateValueAndValidity({emitEvent: false}); } private setValidatorsNoSecX509 = (): void => { - this.lwm2mConfigFormGroup.get('identity').setValidators([]); - this.lwm2mConfigFormGroup.get('key').setValidators([]); + this.lwm2mConfigFormGroup.get('client.identity').clearValidators(); + this.lwm2mConfigFormGroup.get('client.key').clearValidators(); + this.lwm2mConfigFormGroup.get('client.identity').disable({emitEvent: false}); + this.lwm2mConfigFormGroup.get('client.key').disable({emitEvent: false}); } private setValidatorsPskRpk = (mode: Lwm2mSecurityType): void => { if (mode === Lwm2mSecurityType.PSK) { - this.lwm2mConfigFormGroup.get('identity').setValidators([Validators.required]); + this.lwm2mConfigFormGroup.get('client.identity').setValidators([Validators.required]); } else { - this.lwm2mConfigFormGroup.get('identity').setValidators([]); - } - this.lwm2mConfigFormGroup.get('key').setValidators([Validators.required, - Validators.pattern(KEY_REGEXP_HEX_DEC), - Validators.maxLength(this.lenMaxKeyClient), Validators.minLength(this.lenMaxKeyClient)]); - } - - tabChanged = (tabChangeEvent: MatTabChangeEvent): void => { - if (this.tabIndexPrevious !== tabChangeEvent.index) { - this.upDateValueToJson(); + this.lwm2mConfigFormGroup.get('client.identity').clearValidators(); } - this.tabIndexPrevious = tabChangeEvent.index; + this.lwm2mConfigFormGroup.get('client.key').setValidators([ + Validators.required, + Validators.pattern(KEY_REGEXP_HEX_DEC), + Validators.maxLength(this.lenMaxKeyClient), + Validators.minLength(this.lenMaxKeyClient) + ]); + this.lwm2mConfigFormGroup.get('client.key').enable({emitEvent: false}); + this.lwm2mConfigFormGroup.get('client.cert').disable({emitEvent: false}); } - private upDateValueToJson(): void { - switch (this.tabIndexPrevious) { - case 0: - this.upDateValueToJsonTab0(); - break; - case 1: - this.upDateValueToJsonTab1(); - break; - } - } - - private upDateValueToJsonTab0 = (): void => { - if (this.lwm2mConfigFormGroup.get('identity').dirty && this.lwm2mConfigFormGroup.get('identity').valid || - this.lwm2mConfigFormGroup.get('key').dirty && this.lwm2mConfigFormGroup.get('key').valid) { - this.updateBootstrapSettings(); - this.upDateJsonAllConfig(); - } - } - - private upDateValueToJsonTab1 = (): void => { - const bootstrap = this.lwm2mConfigFormGroup.get('bootstrapServer').value; - if (bootstrap !== null - && this.lwm2mConfigFormGroup.get('bootstrapServer').dirty - && this.lwm2mConfigFormGroup.get('bootstrapServer').valid) { - this.jsonAllConfig.bootstrap.bootstrapServer = bootstrap; - this.upDateJsonAllConfig(); - } - const serverConfig = this.lwm2mConfigFormGroup.get('lwm2mServer').value; - if (serverConfig !== null - && this.lwm2mConfigFormGroup.get('lwm2mServer').dirty - && this.lwm2mConfigFormGroup.get('lwm2mServer').valid) { - this.jsonAllConfig.bootstrap.lwm2mServer = serverConfig; - this.upDateJsonAllConfig(); - } - } - - private updateBootstrapSettings() { - const securityMode = 'securityMode'; - this.jsonAllConfig.client.identity = this.lwm2mConfigFormGroup.get('identity').value; - this.jsonAllConfig.client.key = this.lwm2mConfigFormGroup.get('key').value; - if (this.lwm2mConfigFormGroup.get('bootstrapServer').value[securityMode] === Lwm2mSecurityType.PSK) { - this.jsonAllConfig.bootstrap.bootstrapServer.clientPublicKeyOrId = this.jsonAllConfig.client.identity; - this.jsonAllConfig.bootstrap.bootstrapServer.clientSecretKey = this.jsonAllConfig.client.key; - this.lwm2mConfigFormGroup.get('bootstrapServer').patchValue(this.jsonAllConfig.bootstrap.bootstrapServer, {emitEvent: false}); - } - if (this.lwm2mConfigFormGroup.get('lwm2mServer').value[securityMode] === Lwm2mSecurityType.PSK) { - this.jsonAllConfig.bootstrap.lwm2mServer.clientPublicKeyOrId = this.jsonAllConfig.client.identity; - this.jsonAllConfig.bootstrap.lwm2mServer.clientSecretKey = this.jsonAllConfig.client.key; - this.lwm2mConfigFormGroup.get('lwm2mServer').patchValue(this.jsonAllConfig.bootstrap.lwm2mServer, {emitEvent: false}); - } - } - - private upDateJsonAllConfig = (): void => { - this.lwm2mConfigFormGroup.patchValue({ - jsonAllConfig: this.jsonAllConfig - }, {emitEvent: false}); - } - - private initLwm2mConfigFormGroup = (): FormGroup => { - if (this.jsonAllConfig.client.securityConfigClientMode === Lwm2mSecurityType.PSK) { - this.data.endPoint = this.jsonAllConfig.client.endpoint; - } + private initLwm2mConfigForm = (): FormGroup => { const formGroup = this.fb.group({ - securityConfigClientMode: [this.jsonAllConfig.client.securityConfigClientMode], - identity: [''], - key: [''], - x509: [false], - bootstrapServer: [this.jsonAllConfig.bootstrap.bootstrapServer], - lwm2mServer: [this.jsonAllConfig.bootstrap.lwm2mServer], - endPoint: [this.data.endPoint], - jsonAllConfig: [this.jsonAllConfig] + client: this.fb.group({ + endpoint: ['', Validators.required], + securityConfigClientMode: [Lwm2mSecurityType.NO_SEC], + identity: [{value: '', disabled: true}], + key: [{value: '', disabled: true}], + cert: [{value: '', disabled: true}] + }), + bootstrap: this.fb.group({ + bootstrapServer: [getDefaultServerSecurityConfig()], + lwm2mServer: [getDefaultServerSecurityConfig()] + }) }); - formGroup.get('securityConfigClientMode').valueChanges.pipe( + formGroup.get('client.securityConfigClientMode').valueChanges.pipe( takeUntil(this.destroy$) ).subscribe((type) => { this.securityConfigClientModeChanged(type); }); - formGroup.get('endPoint').valueChanges.pipe( + formGroup.valueChanges.pipe( takeUntil(this.destroy$) - ).subscribe((endpoint) => { - if (formGroup.get('securityConfigClientMode').value === Lwm2mSecurityType.PSK) { - this.jsonAllConfig.client.endpoint = endpoint; - this.upDateJsonAllConfig(); - } + ).subscribe((value) => { + this.propagateChange(JSON.stringify(value)); }); return formGroup; } - - save(): void { - this.upDateValueToJson(); - this.data.endPoint = this.lwm2mConfigFormGroup.get('endPoint').value.split('\'').join(''); - this.data.jsonAllConfig = this.jsonAllConfig; - if (this.lwm2mConfigFormGroup.get('securityConfigClientMode').value === Lwm2mSecurityType.PSK) { - this.data.endPoint = this.data.jsonAllConfig.client.identity; - } - this.dialogRef.close(this.data); - } - - cancel(): void { - this.dialogRef.close(undefined); - } } - - 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 de0f2dc8a5..d3dd6d3ff9 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,21 +14,12 @@ /// limitations under the License. /// -export const JSON_ALL_CONFIG = 'jsonAllConfig'; -export const END_POINT = 'endPoint'; -export const DEFAULT_END_POINT = 'default_client_lwm2m_end_point_no_sec'; export const LEN_MAX_PSK = 64; export const LEN_MAX_PRIVATE_KEY = 134; export const LEN_MAX_PUBLIC_KEY_RPK = 182; export const LEN_MAX_PUBLIC_KEY_X509 = 3000; export const KEY_REGEXP_HEX_DEC = /^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$/; - -export interface DeviceCredentialsDialogLwm2mData { - jsonAllConfig?: Lwm2mSecurityConfigModels; - endPoint?: string; -} - export enum Lwm2mSecurityType { PSK = 'PSK', RPK = 'RPK', @@ -48,9 +39,9 @@ export const Lwm2mSecurityTypeTranslationMap = new Map - p.hasOwnProperty('client') && - isClientSecurityConfigType(p.client) && - p.hasOwnProperty('bootstrap') && - isBootstrapSecurityConfig(p.bootstrap); - -const isClientSecurityConfigType = (p: any): boolean => - p.hasOwnProperty('securityConfigClientMode') && - p.hasOwnProperty('endpoint') && - p.hasOwnProperty('identity') && - p.hasOwnProperty('key') && - p.hasOwnProperty('x509'); - -const isBootstrapSecurityConfig = (p: any): boolean => - p.hasOwnProperty('bootstrapServer') && - isServerSecurityConfig(p.bootstrapServer) && - p.hasOwnProperty('lwm2mServer') && - isServerSecurityConfig(p.lwm2mServer); - -const isServerSecurityConfig = (p: any): boolean => - p.hasOwnProperty('securityMode') && - p.hasOwnProperty('clientPublicKeyOrId') && - p.hasOwnProperty('clientSecretKey'); - -export function validateSecurityConfig(config: string): boolean { - try { - const securityConfig = JSON.parse(config); - return isSecurityConfigModels(securityConfig); - } catch (e) { - return false; - } -} - - 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 f664dc27a7..d8a21107bc 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -917,15 +917,7 @@ "access-token-invalid": "Access token length must be from 1 to 20 characters.", "rsa-key": "RSA public key", "rsa-key-required": "RSA public key is required.", - "lwm2m-key": "LwM2M Security config key", - "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-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-credentials-value-tip": "Edit security config json editor", "lwm2m-security-config": { "identity": "Client Identity", "identity-required": "Client Identity is required.", @@ -949,7 +941,9 @@ "client-secret-key-required": "Client Secret Key is required.", "client-secret-key-pattern": "Client Secret Key must be hexadecimal format.", "client-secret-key-length": "Client Secret Key must be {{ count }} characters.", - "config-json-tab": "Json Client Security Config" + "config-json-tab": "Json Client Security Config", + "client-public-key": "Client public key", + "client-public-key-hint": "If client public key is empty, the trusted certificate will be used" }, "client-id": "Client ID", "client-id-pattern": "Contains invalid character.",