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

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

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

Write Preview
Loading…
Cancel
Save