tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Device provision feature X509: 

1. Added ng-templates with ngSwitchCase attribute
2. Fix NG0300: Multiple components match node with tagname button
3. Fix max-width for tb-hints
pull/7935/head
deaflynx 4 years ago
parent
86423fdc7b
commit
8703a2083e
2 changed files with 72 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
  2. 4
      ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts

130
ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
View File

@ -27,64 +27,74 @@
{{ 'device-profile.provision-strategy-required' | translate }}
</mat-error>
</mat-form-field>
<section *ngIf="provisionConfigurationFormGroup.get('type').value !== deviceProvisionType.DISABLED &&
provisionConfigurationFormGroup.get('type').value !== deviceProvisionType.X509_CERTIFICATE_CHAIN"
fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>device-profile.provision-device-key</mat-label>
<input matInput formControlName="provisionDeviceKey" required/>
<button mat-button matSuffix mat-icon-button
ngxClipboard
[cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
(cbOnSuccess)="onProvisionCopied(true)"
matTooltip="{{ 'device-profile.copy-provision-key' | translate }}"
matTooltipPosition="above">
<mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
</button>
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')">
{{ 'device-profile.provision-device-key-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>device-profile.provision-device-secret</mat-label>
<input matInput formControlName="provisionDeviceSecret" required/>
<button mat-button matSuffix mat-icon-button
ngxClipboard
[cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
(cbOnSuccess)="onProvisionCopied(false)"
matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}"
matTooltipPosition="above">
<mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
</button>
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')">
{{ 'device-profile.provision-device-secret-required' | translate }}
</mat-error>
</mat-form-field>
</section>
<section *ngIf="provisionConfigurationFormGroup.get('type').value === deviceProvisionType.X509_CERTIFICATE_CHAIN">
<div class="tb-hint">
<span [innerHTML]="readMore ? ('device-profile.provision-strategy-x509.hint-certificate-chain' | translate) : ('device-profile.provision-strategy-x509.hint-certificate-chain' | translate | truncate:true:355:&apos;...&apos;)"></span>
<a (click)="readMore=!readMore">{{ readMore ? ('&nbsp;' + ('action.less' | translate)) : ('action.more' | translate) }}</a>
</div>
<mat-slide-toggle formControlName="allowCreateNewDevicesByX509Certificate">
{{ 'device-profile.provision-strategy-x509.allow-create-new-devices' | translate }}
</mat-slide-toggle>
<div class="tb-hint" style="padding:0 40px 16px" [innerHTML]="'device-profile.provision-strategy-x509.hint-allow-create-new-devices' | translate"></div>
<mat-form-field class="mat-block">
<mat-label translate>device-profile.provision-strategy-x509.certificate-value</mat-label>
<input matInput type="text" formControlName="certificateValue" required>
<mat-error *ngIf="provisionConfigurationFormGroup.get('certificateValue').hasError('required')">
{{ 'device-profile.provision-strategy-x509.certificate-value-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>device-profile.provision-strategy-x509.cn-regex-variable</mat-label>
<input matInput type="text" formControlName="certificateRegExPattern" required>
<mat-error *ngIf="provisionConfigurationFormGroup.get('certificateRegExPattern').hasError('required')">
{{ 'device-profile.provision-strategy-x509.cn-regex-variable-required' | translate }}
</mat-error>
<mat-hint translate>device-profile.provision-strategy-x509.hint-cn-regex-variable</mat-hint>
</mat-form-field>
<div style="margin-top: 16px" class="tb-hint" [innerHTML]="'device-profile.provision-strategy-x509.regex-examples' | translate"></div>
</section>
<div [ngSwitch]="provisionConfigurationFormGroup.get('type').value">
<ng-template [ngSwitchCase]="deviceProvisionType.ALLOW_CREATE_NEW_DEVICES">
<ng-container *ngTemplateOutlet="default"></ng-container>
</ng-template>
<ng-template [ngSwitchCase]="deviceProvisionType.CHECK_PRE_PROVISIONED_DEVICES">
<ng-container *ngTemplateOutlet="default"></ng-container>
</ng-template>
<ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN">
<div class="tb-hint" style="max-width: 800px">
<span [innerHTML]="readMore ? ('device-profile.provision-strategy-x509.hint-certificate-chain' | translate) : ('device-profile.provision-strategy-x509.hint-certificate-chain' | translate | truncate:true:355:&apos;...&apos;)"></span>
<a (click)="readMore=!readMore">{{ readMore ? ('&nbsp;' + ('action.less' | translate)) : ('action.more' | translate) }}</a>
</div>
<mat-slide-toggle formControlName="allowCreateNewDevicesByX509Certificate">
{{ 'device-profile.provision-strategy-x509.allow-create-new-devices' | translate }}
</mat-slide-toggle>
<div class="tb-hint" style="padding:0 40px 16px" [innerHTML]="'device-profile.provision-strategy-x509.hint-allow-create-new-devices' | translate"></div>
<mat-form-field class="mat-block">
<mat-label translate>device-profile.provision-strategy-x509.certificate-value</mat-label>
<textarea matInput formControlName="certificateValue" cols="15" rows="5" required></textarea>
<mat-error *ngIf="provisionConfigurationFormGroup.get('certificateValue').hasError('required')">
{{ 'device-profile.provision-strategy-x509.certificate-value-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>device-profile.provision-strategy-x509.cn-regex-variable</mat-label>
<input matInput type="text" formControlName="certificateRegExPattern" required>
<mat-error *ngIf="provisionConfigurationFormGroup.get('certificateRegExPattern').hasError('required')">
{{ 'device-profile.provision-strategy-x509.cn-regex-variable-required' | translate }}
</mat-error>
<mat-hint translate>device-profile.provision-strategy-x509.hint-cn-regex-variable</mat-hint>
</mat-form-field>
<div class="tb-hint" style="max-width: 800px; margin-top: 16px"
[innerHTML]="'device-profile.provision-strategy-x509.regex-examples' | translate">
</div>
</ng-template>
<ng-template #default>
<section fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>device-profile.provision-device-key</mat-label>
<input matInput formControlName="provisionDeviceKey" required/>
<button matSuffix mat-icon-button
ngxClipboard
[cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
(cbOnSuccess)="onProvisionCopied(true)"
matTooltip="{{ 'device-profile.copy-provision-key' | translate }}"
matTooltipPosition="above">
<mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
</button>
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')">
{{ 'device-profile.provision-device-key-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>device-profile.provision-device-secret</mat-label>
<input matInput formControlName="provisionDeviceSecret" required/>
<button matSuffix mat-icon-button
ngxClipboard
[cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
(cbOnSuccess)="onProvisionCopied(false)"
matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}"
matTooltipPosition="above">
<mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
</button>
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')">
{{ 'device-profile.provision-device-secret-required' | translate }}
</mat-error>
</mat-form-field>
</section>
</ng-template>
</div>
</div>

4
ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
View File

@ -32,7 +32,7 @@ import {
DeviceProvisionType,
deviceProvisionTypeTranslationMap
} from '@shared/models/device.models';
import { generateSecret, isDefinedAndNotNull } from '@core/utils';
import { generateSecret, isBoolean, isDefinedAndNotNull } from '@core/utils';
import { ActionNotificationShow } from '@core/notification/notification.actions';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@ -114,7 +114,7 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
this.provisionConfigurationFormGroup.get('certificateRegExPattern').patchValue('[\\w]*', {emitEvent: false});
}
const allowCreateNewDevicesByX509Certificate: boolean | null = this.provisionConfigurationFormGroup.get('allowCreateNewDevicesByX509Certificate').value;
if (typeof allowCreateNewDevicesByX509Certificate !== 'boolean') {
if (isBoolean(allowCreateNewDevicesByX509Certificate)) {
this.provisionConfigurationFormGroup.get('allowCreateNewDevicesByX509Certificate').patchValue(true, {emitEvent: false});
}
this.provisionConfigurationFormGroup.get('certificateValue').enable({emitEvent: false});

Write Preview
Loading…
Cancel
Save