dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reafctoring of helping-tooltips for Lwm2m form-configs

Browse Source
This commit is contained in:
Sergey Tarnavskiy 2021-11-08 11:31:50 +02:00
parent b095922aa8
commit 4ad4b90484
12 changed files with 175 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui-ngx/src/app/core/http/device-profile.service.ts
View File

@ -24,13 +24,13 @@ import { DeviceProfile, DeviceProfileInfo, DeviceTransportType } from '@shared/m
import { deepClone, isDefinedAndNotNull, isEmptyStr } from '@core/utils';
import {
ObjectLwM2M,
securityConfigMode,
ServerSecurityConfig,
ServerSecurityConfigInfo
} from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
import { SortOrder } from '@shared/models/page/sort-order';
import { OtaPackageService } from '@core/http/ota-package.service';
import { map, mergeMap, tap } from 'rxjs/operators';
import { Lwm2mSecurityType } from '@shared/models/lwm2m-security-config.models';
@Injectable({
providedIn: 'root'
@ -79,23 +79,23 @@ export class DeviceProfileService {
}
}
public getLwm2mBootstrapSecurityInfoBySecurityType(isBootstrapServer: boolean, securityMode = securityConfigMode.NO_SEC,
public getLwm2mBootstrapSecurityInfoBySecurityType(isBootstrapServer: boolean, securityMode = Lwm2mSecurityType.NO_SEC,
config?: RequestConfig): Observable<ServerSecurityConfig> {
return this.getLwm2mBootstrapSecurityInfo(isBootstrapServer, config).pipe(
map(securityConfig => {
const serverSecurityConfigInfo = deepClone(securityConfig);
switch (securityMode) {
case securityConfigMode.PSK:
case Lwm2mSecurityType.PSK:
serverSecurityConfigInfo.port = serverSecurityConfigInfo.securityPort;
serverSecurityConfigInfo.host = serverSecurityConfigInfo.securityHost;
serverSecurityConfigInfo.serverPublicKey = '';
break;
case securityConfigMode.RPK:
case securityConfigMode.X509:
case Lwm2mSecurityType.RPK:
case Lwm2mSecurityType.X509:
serverSecurityConfigInfo.port = serverSecurityConfigInfo.securityPort;
serverSecurityConfigInfo.host = serverSecurityConfigInfo.securityHost;
break;
case securityConfigMode.NO_SEC:
case Lwm2mSecurityType.NO_SEC:
serverSecurityConfigInfo.serverPublicKey = '';
break;
}

11
ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
View File

@ -27,14 +27,13 @@
<div [fxShow]="serverFormGroup.get('securityMode').value !== securityConfigLwM2MType.NO_SEC">
<mat-form-field class="mat-block">
<mat-label>{{ 'device.lwm2m-security-config.client-publicKey-or-id' | translate }}</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{ publicKeyOrIdTooltipNamesMap.get(serverFormGroup.get('securityMode').value) | translate }}">help</mat-icon>
<textarea matInput
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cols="1"
formControlName="clientPublicKeyOrId"
matTooltip="{{ 'device.lwm2m-security-config.client-publicKey-or-id-tooltip' | translate:
{count: serverFormGroup.get('securityMode').value === securityConfigLwM2MType.PSK? 0 :
serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK? 1 : 2} }}"
required>
</textarea>
<mat-error *ngIf="serverFormGroup.get('clientPublicKeyOrId').hasError('required')">
@ -43,15 +42,13 @@
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label>{{ 'device.lwm2m-security-config.client-secret-key' | translate }}</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{ clientSecretKeyTooltipNamesMap.get(serverFormGroup.get('securityMode').value) | translate }}">help</mat-icon>
<textarea matInput
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cols="1"
formControlName="clientSecretKey"
matTooltip="{{ 'device.lwm2m-security-config.client-secret-key-tooltip' | translate:
{count: serverFormGroup.get('securityMode').value === securityConfigLwM2MType.PSK? 0 :
serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK? 1 : 2} }}"
matTooltipPosition="below"
required>
</textarea>
<mat-error *ngIf="serverFormGroup.get('clientSecretKey').hasError('required')">

4
ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.ts
View File

@ -26,6 +26,8 @@ import {
Validators
} from '@angular/forms';
import {
Lwm2mClientSecretKeyTooltipTranslationsMap,
Lwm2mPublicKeyOrIdTooltipTranslationsMap,
Lwm2mSecurityType,
Lwm2mSecurityTypeTranslationMap,
ServerSecurityConfig
@ -57,6 +59,8 @@ export class DeviceCredentialsLwm2mServerComponent implements OnDestroy, Control
securityConfigLwM2MType = Lwm2mSecurityType;
securityConfigLwM2MTypes = Object.values(Lwm2mSecurityType);
lwm2mSecurityTypeTranslationMap = Lwm2mSecurityTypeTranslationMap;
publicKeyOrIdTooltipNamesMap = Lwm2mPublicKeyOrIdTooltipTranslationsMap;
clientSecretKeyTooltipNamesMap = Lwm2mClientSecretKeyTooltipTranslationsMap;
private destroy$ = new Subject();
private propagateChange = (v: any) => {};

17
ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.html
View File

@ -37,9 +37,9 @@
<mat-form-field class="mat-block"
*ngIf="lwm2mConfigFormGroup.get('client.securityConfigClientMode').value === securityConfigLwM2MType.PSK">
<mat-label>{{ 'device.lwm2m-security-config.identity' | translate }}</mat-label>
<input matInput type="text" formControlName="identity" required
matTooltip="{{ 'device.lwm2m-security-config.identity-tooltip' | translate }}"
matTooltipPosition="below">
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{ 'device.lwm2m-security-config.identity-tooltip' | translate }}">help</mat-icon>
<input matInput type="text" formControlName="identity" required>
<mat-error *ngIf="lwm2mConfigFormGroup.get('client.identity').hasError('required')">
{{ 'device.lwm2m-security-config.identity-required' | translate }}
</mat-error>
@ -47,15 +47,14 @@
<mat-form-field class="mat-block" *ngIf="lwm2mConfigFormGroup.get('client.securityConfigClientMode').value === securityConfigLwM2MType.RPK ||
lwm2mConfigFormGroup.get('client.securityConfigClientMode').value === securityConfigLwM2MType.PSK">
<mat-label>{{ 'device.lwm2m-security-config.client-key' | translate }}</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{ clientKeyTooltipNamesMap.get(lwm2mConfigFormGroup.get('client.securityConfigClientMode').value) | translate }}">help</mat-icon>
<textarea matInput
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cols="1"
formControlName="key"
required
matTooltip="{{ 'device.lwm2m-security-config.client-key-tooltip' | translate:{count:
lwm2mConfigFormGroup.get('client.securityConfigClientMode').value === securityConfigLwM2MType.PSK?0:1} }}"
matTooltipPosition="below">
required>
</textarea>
<mat-error *ngIf="lwm2mConfigFormGroup.get('client.key').hasError('required')">
{{ 'device.lwm2m-security-config.client-key-required' | translate }}
@ -63,12 +62,12 @@
</mat-form-field>
<mat-form-field class="mat-block" *ngIf="lwm2mConfigFormGroup.get('client.securityConfigClientMode').value === securityConfigLwM2MType.X509">
<mat-label translate>device.lwm2m-security-config.client-public-key</mat-label>
<mat-icon *ngIf="lwm2mConfigFormGroup.get('client.cert').value" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{ 'device.lwm2m-security-config.client-public-key-tooltip' | translate }}">help</mat-icon>
<textarea matInput
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cols="1"
matTooltip="{{ 'device.lwm2m-security-config.client-public-key-tooltip' | translate: {count: lwm2mConfigFormGroup.get('client.cert').value?1:2} }}"
matTooltipPosition="below"
formControlName="cert">
</textarea>
<mat-hint translate>device.lwm2m-security-config.client-public-key-hint</mat-hint>

3
ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m.component.ts
View File

@ -27,7 +27,7 @@ import {
} from '@angular/forms';
import {
getDefaultClientSecurityConfig,
getDefaultServerSecurityConfig,
getDefaultServerSecurityConfig, Lwm2mClientKeyTooltipTranslationsMap,
Lwm2mSecurityConfigModels,
Lwm2mSecurityType,
Lwm2mSecurityTypeTranslationMap
@ -60,6 +60,7 @@ export class DeviceCredentialsLwm2mComponent implements ControlValueAccessor, Va
securityConfigLwM2MType = Lwm2mSecurityType;
securityConfigLwM2MTypes = Object.keys(Lwm2mSecurityType);
credentialTypeLwM2MNamesMap = Lwm2mSecurityTypeTranslationMap;
clientKeyTooltipNamesMap = Lwm2mClientKeyTooltipTranslationsMap;
private destroy$ = new Subject();
private propagateChange = (v: any) => {};

23
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
View File

@ -51,8 +51,9 @@
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
<input matInput type="number" min="1" max="65534" formControlName="serverId" required
matTooltip="{{ 'device-profile.lwm2m.short-id-tooltip' | translate }}">
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.short-id-tooltip' | translate }}">help</mat-icon>
<input matInput type="number" min="1" max="65534" formControlName="serverId" required>
<mat-error *ngIf="serverFormGroup.get('serverId').hasError('required')">
{{ 'device-profile.lwm2m.short-id-required' | translate }}
</mat-error>
@ -66,9 +67,9 @@
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
<input matInput type="number" formControlName="clientHoldOffTime" required min="0"
matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tooltip' | translate}}"
matTooltipPosition="above">
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tooltip' | translate }}">help</mat-icon>
<input matInput type="number" formControlName="clientHoldOffTime" required min="0">
<mat-error *ngIf="serverFormGroup.get('clientHoldOffTime').hasError('required')">
{{ 'device-profile.lwm2m.client-hold-off-time-required' | translate }}
</mat-error>
@ -79,9 +80,9 @@
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.account-after-timeout' | translate }}</mat-label>
<input matInput type="number" formControlName="bootstrapServerAccountTimeout" required min="0"
matTooltip="{{'device-profile.lwm2m.account-after-timeout-tooltip' | translate}}"
matTooltipPosition="above">
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.account-after-timeout-tooltip' | translate }}">help</mat-icon>
<input matInput type="number" formControlName="bootstrapServerAccountTimeout" required min="0">
<mat-error *ngIf="serverFormGroup.get('bootstrapServerAccountTimeout').hasError('required')">
{{ 'device-profile.lwm2m.account-after-timeout-required' | translate }}
</mat-error>
@ -95,16 +96,14 @@
serverFormGroup.get('securityMode').value === securityConfigLwM2MType.X509">
<mat-form-field class="mat-block">
<mat-label>{{ 'device-profile.lwm2m.server-public-key' | translate }}</mat-label>
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{ publicKeyOrIdTooltipNamesMap.get(serverFormGroup.get('securityMode').value) | translate }}">help</mat-icon>
<textarea matInput
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cols="1" required
formControlName="serverPublicKey"
matTooltip="{{ 'device.lwm2m-security-config.client-publicKey-or-id-tooltip' | translate:
{count: serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK? 1 : 2} }}"
matTooltipPosition="below"
required>
</textarea>
<mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('required')">
{{ 'device-profile.lwm2m.server-public-key-required' | translate }}

30
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.ts
View File

@ -28,14 +28,17 @@ import {
import {
DEFAULT_PORT_BOOTSTRAP_NO_SEC,
DEFAULT_PORT_SERVER_NO_SEC,
securityConfigMode,
securityConfigModeNames,
ServerSecurityConfig
} from './lwm2m-profile-config.models';
import { DeviceProfileService } from '@core/http/device-profile.service';
import { Subject } from 'rxjs';
import { mergeMap, takeUntil, tap } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';
import {
Lwm2mPublicKeyOrIdTooltipTranslationsMap,
Lwm2mSecurityType,
Lwm2mSecurityTypeTranslationMap
} from '@shared/models/lwm2m-security-config.models';
@Component({
selector: 'tb-profile-lwm2m-device-config-server',
@ -56,15 +59,16 @@ import { Observable } from 'rxjs/internal/Observable';
export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAccessor, Validator, OnDestroy {
private disabled = false;
public disabled = false;
private destroy$ = new Subject();
private isDataLoadedIntoCache = false;
serverFormGroup: FormGroup;
securityConfigLwM2MType = securityConfigMode;
securityConfigLwM2MTypes = Object.keys(securityConfigMode);
credentialTypeLwM2MNamesMap = securityConfigModeNames;
securityConfigLwM2MType = Lwm2mSecurityType;
securityConfigLwM2MTypes = Object.keys(Lwm2mSecurityType);
credentialTypeLwM2MNamesMap = Lwm2mSecurityTypeTranslationMap;
publicKeyOrIdTooltipNamesMap = Lwm2mPublicKeyOrIdTooltipTranslationsMap;
currentSecurityMode = null;
@Input()
@ -81,7 +85,7 @@ export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAcc
host: ['', Validators.required],
port: [this.isBootstrapServer ? DEFAULT_PORT_BOOTSTRAP_NO_SEC : DEFAULT_PORT_SERVER_NO_SEC,
[Validators.required, Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]],
securityMode: [securityConfigMode.NO_SEC],
securityMode: [Lwm2mSecurityType.NO_SEC],
serverPublicKey: [''],
clientHoldOffTime: ['', [Validators.required, Validators.min(0), Validators.pattern('[0-9]*')]],
serverId: ['', [Validators.required, Validators.min(1), Validators.max(65534), Validators.pattern('[0-9]*')]],
@ -136,16 +140,16 @@ export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAcc
registerOnTouched(fn: any): void {
}
private updateValidate(securityMode: securityConfigMode): void {
private updateValidate(securityMode: Lwm2mSecurityType): void {
switch (securityMode) {
case securityConfigMode.NO_SEC:
case securityConfigMode.PSK:
case Lwm2mSecurityType.NO_SEC:
case Lwm2mSecurityType.PSK:
this.clearValidators();
break;
case securityConfigMode.RPK:
case Lwm2mSecurityType.RPK:
this.setValidators();
break;
case securityConfigMode.X509:
case Lwm2mSecurityType.X509:
this.setValidators();
break;
}
@ -166,7 +170,7 @@ export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAcc
}
}
private getLwm2mBootstrapSecurityInfo(securityMode = securityConfigMode.NO_SEC): Observable<ServerSecurityConfig> {
private getLwm2mBootstrapSecurityInfo(securityMode = Lwm2mSecurityType.NO_SEC): Observable<ServerSecurityConfig> {
return this.deviceProfileService.getLwm2mBootstrapSecurityInfoBySecurityType(this.isBootstrapServer, securityMode).pipe(
tap(() => this.isDataLoadedIntoCache = true)
);

225
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
View File

@ -33,151 +33,92 @@
</mat-tab>
<mat-tab label="{{ 'device-profile.lwm2m.bootstrap-tab' | translate }}">
<section [formGroup]="lwm2mDeviceProfileFormGroup">
<section formGroupName="bootstrap" style="padding: 4px 2px">
<section formGroupName="bootstrap" style="padding: 20px 2px">
<mat-accordion multi="true">
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.lwm2m.bootstrap-server-legend</legend>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ 'device-profile.lwm2m.server' | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent formGroupName="servers">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
<input matInput type="number" min="1" max="65534" formControlName="shortId" required
matTooltip="{{ 'device-profile.lwm2m.short-id-tooltip' | translate }}">
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('required')">
{{ 'device-profile.lwm2m.short-id-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('min') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('max')">
{{ 'device-profile.lwm2m.short-id-range' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('pattern')">
{{ 'device-profile.lwm2m.short-id-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
<input matInput type="number" min="0" formControlName="lifetime" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('required')">
{{ 'device-profile.lwm2m.lifetime-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('pattern') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('min')">
{{ 'device-profile.lwm2m.lifetime-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
<input matInput type="number" min="0" formControlName="defaultMinPeriod" required
matTooltip="{{ 'device-profile.lwm2m.default-min-period-tooltip' | translate }}">
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('required')">
{{ 'device-profile.lwm2m.default-min-period-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('pattern') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('min')">
{{ 'device-profile.lwm2m.default-min-period-pattern' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-form-field class="mat-block">
<mat-label>{{ 'device-profile.lwm2m.binding' | translate }}</mat-label>
<mat-select formControlName="binding"
matTooltip="{{ 'device-profile.lwm2m.binding-tooltip' | translate }}">
<mat-option *ngFor="let bindingMode of bindingModeTypes" [value]="bindingMode">
{{ bindingModeTypeNamesMap.get(bindingMode) | translate }}
</mat-option>
</mat-select>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ 'device-profile.lwm2m.server' | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent formGroupName="servers">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.short-id-tooltip' | translate }}">help</mat-icon>
<input matInput type="number" min="1" max="65534" formControlName="shortId" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('required')">
{{ 'device-profile.lwm2m.short-id-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('min') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('max')">
{{ 'device-profile.lwm2m.short-id-range' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('pattern')">
{{ 'device-profile.lwm2m.short-id-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-checkbox formControlName="notifIfDisabled" color="primary">
{{ 'device-profile.lwm2m.notification-storing' | translate }}
</mat-checkbox>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ 'device-profile.lwm2m.security' | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<tb-profile-lwm2m-device-config-server
formControlName="bootstrapServer"
[isBootstrapServer]="true">
</tb-profile-lwm2m-device-config-server>
</ng-template>
</mat-expansion-panel>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.lwm2m.lwm2m-server-legend</legend>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ 'device-profile.lwm2m.server' | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent formGroupName="servers">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
<input matInput type="number" min="1" max="65534" formControlName="shortId" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('required')">
{{ 'device-profile.lwm2m.short-id-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('min') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('max')">
{{ 'device-profile.lwm2m.short-id-range' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.shortId').hasError('pattern')">
{{ 'device-profile.lwm2m.short-id-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
<input matInput type="number" min="0" formControlName="lifetime" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('required')">
{{ 'device-profile.lwm2m.lifetime-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('pattern') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('min')">
{{ 'device-profile.lwm2m.lifetime-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
<input matInput type="number" min="0" formControlName="defaultMinPeriod" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('required')">
{{ 'device-profile.lwm2m.default-min-period-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('pattern') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('min')">
{{ 'device-profile.lwm2m.default-min-period-pattern' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-form-field class="mat-block">
<mat-label>{{ 'device-profile.lwm2m.binding' | translate }}</mat-label>
<mat-select formControlName="binding">
<mat-option *ngFor="let bindingMode of bindingModeTypes" [value]="bindingMode">
{{ bindingModeTypeNamesMap.get(bindingMode) | translate }}
</mat-option>
</mat-select>
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
<input matInput type="number" min="0" formControlName="lifetime" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('required')">
{{ 'device-profile.lwm2m.lifetime-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('pattern') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.lifetime').hasError('min')">
{{ 'device-profile.lwm2m.lifetime-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-checkbox formControlName="notifIfDisabled" color="primary">
{{ 'device-profile.lwm2m.notification-storing' | translate }}
</mat-checkbox>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ 'device-profile.lwm2m.security' | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<tb-profile-lwm2m-device-config-server
formControlName="lwm2mServer"
[isBootstrapServer]="false">
</tb-profile-lwm2m-device-config-server>
</ng-template>
</mat-expansion-panel>
</fieldset>
<mat-form-field fxFlex>
<mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.default-min-period-tooltip' | translate }}">help</mat-icon>
<input matInput type="number" min="0" formControlName="defaultMinPeriod" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('required')">
{{ 'device-profile.lwm2m.default-min-period-required' | translate }}
</mat-error>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('pattern') ||
lwm2mDeviceProfileFormGroup.get('bootstrap.servers.defaultMinPeriod').hasError('min')">
{{ 'device-profile.lwm2m.default-min-period-pattern' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-form-field class="mat-block">
<mat-label>{{ 'device-profile.lwm2m.binding' | translate }}</mat-label>
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.binding-tooltip' | translate }}">help</mat-icon>
<mat-select formControlName="binding">
<mat-option *ngFor="let bindingMode of bindingModeTypes" [value]="bindingMode">
{{ bindingModeTypeNamesMap.get(bindingMode) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox formControlName="notifIfDisabled" color="primary">
{{ 'device-profile.lwm2m.notification-storing' | translate }}
</mat-checkbox>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ 'device-profile.lwm2m.bootstrap-server' | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<tb-profile-lwm2m-device-config-server
formControlName="bootstrapServer"
[isBootstrapServer]="true">
</tb-profile-lwm2m-device-config-server>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ 'device-profile.lwm2m.lwm2m-server' | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<tb-profile-lwm2m-device-config-server
formControlName="lwm2mServer"
[isBootstrapServer]="false">
</tb-profile-lwm2m-device-config-server>
</ng-template>
</mat-expansion-panel>
</mat-accordion>
</section>
</section>

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

@ -79,8 +79,8 @@ import { takeUntil } from 'rxjs/operators';
})
export class Lwm2mDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, Validator, OnDestroy {
public disabled = false;
private requiredValue: boolean;
private disabled = false;
private destroy$ = new Subject();
bindingModeTypes = Object.values(BingingMode);

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

@ -15,6 +15,7 @@
///
import { ValidatorFn, Validators } from '@angular/forms';
import { Lwm2mSecurityType } from '@shared/models/lwm2m-security-config.models';
export const PAGE_SIZE_LIMIT = 50;
export const INSTANCES = 'instances';
@ -95,22 +96,6 @@ export const AttributeNameTranslationMap = new Map<AttributeName, string>(
]
);
export enum securityConfigMode {
PSK = 'PSK',
RPK = 'RPK',
X509 = 'X509',
NO_SEC = 'NO_SEC'
}
export const securityConfigModeNames = new Map<securityConfigMode, string>(
[
[securityConfigMode.PSK, 'Pre-Shared Key'],
[securityConfigMode.RPK, 'Raw Public Key'],
[securityConfigMode.X509, 'X.509 Certificate'],
[securityConfigMode.NO_SEC, 'No Security']
]
);
export enum PowerMode {
PSM = 'PSM',
DRX = 'DRX',
@ -136,7 +121,7 @@ export interface BootstrapServersSecurityConfig {
export interface ServerSecurityConfig {
host?: string;
port?: number;
securityMode: securityConfigMode;
securityMode: Lwm2mSecurityType;
serverPublicKey?: string;
clientHoldOffTime?: number;
serverId?: number;
@ -198,7 +183,7 @@ export function getDefaultBootstrapServerSecurityConfig(): ServerSecurityConfig
clientHoldOffTime: DEFAULT_CLIENT_HOLD_OFF_TIME,
host: DEFAULT_LOCAL_HOST_NAME,
port: DEFAULT_PORT_BOOTSTRAP_NO_SEC,
securityMode: securityConfigMode.NO_SEC,
securityMode: Lwm2mSecurityType.NO_SEC,
serverId: DEFAULT_ID_BOOTSTRAP,
serverPublicKey: ''
};

23
ui-ngx/src/app/shared/models/lwm2m-security-config.models.ts
View File

@ -30,6 +30,29 @@ export const Lwm2mSecurityTypeTranslationMap = new Map<Lwm2mSecurityType, string
]
);
export const Lwm2mPublicKeyOrIdTooltipTranslationsMap = new Map<Lwm2mSecurityType, string>(
[
[Lwm2mSecurityType.PSK, 'device.lwm2m-security-config.client-publicKey-or-id-tooltip-psk'],
[Lwm2mSecurityType.RPK, 'device.lwm2m-security-config.client-publicKey-or-id-tooltip-rpk'],
[Lwm2mSecurityType.X509, 'device.lwm2m-security-config.client-publicKey-or-id-tooltip-x509']
]
);
export const Lwm2mClientSecretKeyTooltipTranslationsMap = new Map<Lwm2mSecurityType, string>(
[
[Lwm2mSecurityType.PSK, 'device.lwm2m-security-config.client-secret-key-tooltip-psk'],
[Lwm2mSecurityType.RPK, 'device.lwm2m-security-config.client-secret-key-tooltip-prk'],
[Lwm2mSecurityType.X509, 'device.lwm2m-security-config.client-secret-key-tooltip-x509']
]
);
export const Lwm2mClientKeyTooltipTranslationsMap = new Map<Lwm2mSecurityType, string>(
[
[Lwm2mSecurityType.PSK, 'device.lwm2m-security-config.client-secret-key-tooltip-psk'],
[Lwm2mSecurityType.RPK, 'device.lwm2m-security-config.client-secret-key-tooltip-prk']
]
);
export interface ClientSecurityConfig {
securityConfigClientMode: Lwm2mSecurityType;
endpoint: string;

20
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -966,12 +966,13 @@
"identity-tooltip": "The PSK identifier is an arbitrary PSK identifier up to 128 bytes, as described in the standard [RFC7925].\nThe PSK identifier MUST first be converted to a character string and then encoded into octets using UTF-8.",
"client-key": "Client Key",
"client-key-required": "Client Key is required.",
"client-key-tooltip": "{ count, plural, 1 {RPK public key or id must be in the standard [RFC7250] and encoded to Base64 format!} other {PSK key must be in the standard [RFC4279] and HexDec format: 32, 64, 128 characters!} }",
"client-key-tooltip-prk": "RPK public key or id must be in the standard [RFC7250] and encoded to Base64 format!",
"client-key-tooltip-psk": "PSK key must be in the standard [RFC4279] and HexDec format: 32, 64, 128 characters!",
"endpoint": "Endpoint Client Name",
"endpoint-required": "Endpoint Client Name is required.",
"client-public-key": "Client public key",
"client-public-key-hint": "If client public key is empty, the trusted certificate will be used",
"client-public-key-tooltip": "{ count, plural, 1 {X509 public key must be in DER-encoded X509v3 format and support exclusively EC algorithm and then encoded to Base64 format!} other {} }",
"client-public-key-tooltip": "X509 public key must be in DER-encoded X509v3 format and support exclusively EC algorithm and then encoded to Base64 format!",
"mode": "Security config mode",
"client-tab": "Client Security Config",
"client-certificate": "Client certificate",
@ -980,10 +981,14 @@
"lwm2m-server": "LwM2M Server",
"client-publicKey-or-id": "Client Public Key or Id",
"client-publicKey-or-id-required": "Client Public Key or Id is required.",
"client-publicKey-or-id-tooltip": "{ count, plural, 0 {The PSK identifier is an arbitrary PSK identifier up to 128 bytes, as described in the standard [RFC7925].\nThe PSK identifier MUST first be converted to a character string and then encoded into octets using UTF-8.} 1 {RPK public key or id must be in the standard [RFC7250] and encoded to Base64 format!} other {X509 public key must be in DER-encoded X509v3 format and support exclusively EC algorithm and then encoded to Base64 format!} }",
"client-publicKey-or-id-tooltip-psk": "The PSK identifier is an arbitrary PSK identifier up to 128 bytes, as described in the standard [RFC7925].\nThe PSK identifier MUST first be converted to a character string and then encoded into octets using UTF-8.",
"client-publicKey-or-id-tooltip-rpk": "RPK public key or id must be in the standard [RFC7250] and encoded to Base64 format!",
"client-publicKey-or-id-tooltip-x509": "X509 public key must be in DER-encoded X509v3 format and support exclusively EC algorithm and then encoded to Base64 format",
"client-secret-key": "Client Secret Key",
"client-secret-key-required": "Client Secret Key is required.",
"client-secret-key-tooltip": "{ count, plural, 0 {PSK key must be in the standard [RFC4279] and HexDec format: 32, 64, 128 characters!} 1 {RPK secret key must be in PKCS_8 format (DER encoding, standard [RFC5958]) and then encoded to Base64 format!} other {X509 secret key must be in PKCS_8 format (DER encoding, standard [RFC5958]) and then encoded to Base64 format!} }"
"client-secret-key-tooltip-psk": "PSK key must be in the standard [RFC4279] and HexDec format: 32, 64, 128 characters!",
"client-secret-key-tooltip-prk": "RPK secret key must be in PKCS_8 format (DER encoding, standard [RFC5958]) and then encoded to Base64 format!",
"client-secret-key-tooltip-x509": "X509 secret key must be in PKCS_8 format (DER encoding, standard [RFC5958]) and then encoded to Base64 format!"
},
"client-id": "Client ID",
"client-id-pattern": "Contains invalid character.",
@ -1289,7 +1294,7 @@
"lifetime": "Client registration lifetime",
"lifetime-required": "Client registration lifetime is required.",
"lifetime-pattern": "Client registration lifetime must be a positive integer.",
"default-min-period": "Minimum period between two notifications (s)",
"default-min-period": "Min period between two notifications (s)",
"default-min-period-tooltip": "The default value the LwM2M Client should use for the Minimum Period of an Observation in the absence of this parameter being included in an Observation.",
"default-min-period-required": "Minimum period is required.",
"default-min-period-pattern": "Minimum period must be a positive integer.",
@ -1308,8 +1313,9 @@
"tqs": "TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)",
"sq": "SQ: SMS connection in queue mode (is not supported since LWM2M 1.1)"
},
"binding-tooltip": "Tis is the list in the\"binding\" resource of the LwM2M server object - /1/x/7.\nIndicates the supported binding modes in the LwM2M Client.\nThis value SHOULD be the same as the value in the “Supported Binding and Modes” resource in the Device Object (/3/0/16).\nWhile multiple transports are supported, only one transport binding can be used during the entire Transport\nSession. As an example, when UDP and SMS are both supported, the LwM2M Client and the LwM2M Server can\nchoose to communicate either over UDP or SMS during the entire Transport Session.",
"security": "Security",
"binding-tooltip": "Tis is the list in the\"binding\" resource of the LwM2M server object - /1/x/7.\nIndicates the supported binding modes in the LwM2M Client.\nThis value SHOULD be the same as the value in the “Supported Binding and Modes” resource in the Device Object (/3/0/16).\nWhile multiple transports are supported, only one transport binding can be used during the entire Transport Session.\nAs an example, when UDP and SMS are both supported, the LwM2M Client and the LwM2M Server can choose to communicate either over UDP or SMS during the entire Transport Session.",
"bootstrap-server": "Bootstrap Server",
"lwm2m-server": "LwM2M Server",
"server-host": "Host",
"server-host-required": "Host is required.",
"server-port": "Port",