Feature X509 Device provision added ui form
This commit is contained in:
deaflynx
parent
464e87fe89
commit
0e019967e2
@ -27,18 +27,20 @@
|
||||
{{ 'device-profile.provision-strategy-required' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<section *ngIf="provisionConfigurationFormGroup.get('type').value !== deviceProvisionType.DISABLED" fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column">
|
||||
<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
|
||||
<!--<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>
|
||||
</button>-->
|
||||
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')">
|
||||
{{ 'device-profile.provision-device-key-required' | translate }}
|
||||
</mat-error>
|
||||
@ -46,17 +48,41 @@
|
||||
<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
|
||||
<!--<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>
|
||||
</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" [innerHTML]="'device-profile.provision-strategy-x509.hint-certificate-chain' | translate"></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-form-field>
|
||||
<div class="tb-hint" [innerHTML]="'device-profile.provision-strategy-x509.hint-cn-regex-variable-title' | translate"></div>
|
||||
<div style="padding-left: 20px" class="tb-hint" [innerHTML]="'device-profile.provision-strategy-x509.hint-cn-regex-variable-examples' | translate"></div>
|
||||
<div class="tb-hint" [innerHTML]="'device-profile.provision-strategy-x509.hint-cn-regex-variable-note' | translate"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -86,7 +86,10 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
|
||||
this.provisionConfigurationFormGroup = this.fb.group({
|
||||
type: [DeviceProvisionType.DISABLED, Validators.required],
|
||||
provisionDeviceSecret: [{value: null, disabled: true}, Validators.required],
|
||||
provisionDeviceKey: [{value: null, disabled: true}, Validators.required]
|
||||
provisionDeviceKey: [{value: null, disabled: true}, Validators.required],
|
||||
certificateValue: [{value: null, disabled: true}, Validators.required],
|
||||
certificateRegExPattern: [{value: '[\\w]*', disabled: true}, Validators.required],
|
||||
allowCreateNewDevicesByX509Certificate: [{value: true, disabled: true}]
|
||||
});
|
||||
this.provisionConfigurationFormGroup.get('type').valueChanges.subscribe((type) => {
|
||||
if (type === DeviceProvisionType.DISABLED) {
|
||||
@ -94,6 +97,17 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
|
||||
this.provisionConfigurationFormGroup.get('provisionDeviceSecret').patchValue(null, {emitEvent: false});
|
||||
this.provisionConfigurationFormGroup.get('provisionDeviceKey').disable({emitEvent: false});
|
||||
this.provisionConfigurationFormGroup.get('provisionDeviceKey').patchValue(null);
|
||||
this.provisionConfigurationFormGroup.get('certificateValue').disable({emitEvent: false});
|
||||
this.provisionConfigurationFormGroup.get('certificateValue').patchValue(null);
|
||||
this.provisionConfigurationFormGroup.get('certificateRegExPattern').disable({emitEvent: false});
|
||||
this.provisionConfigurationFormGroup.get('certificateRegExPattern').patchValue(null);
|
||||
this.provisionConfigurationFormGroup.get('allowCreateNewDevicesByX509Certificate').disable({emitEvent: false});
|
||||
this.provisionConfigurationFormGroup.get('allowCreateNewDevicesByX509Certificate').patchValue(null);
|
||||
|
||||
} else if (type === DeviceProvisionType.X509_CERTIFICATE_CHAIN) {
|
||||
this.provisionConfigurationFormGroup.get('certificateValue').enable({emitEvent: false});
|
||||
this.provisionConfigurationFormGroup.get('certificateRegExPattern').enable({emitEvent: false});
|
||||
this.provisionConfigurationFormGroup.get('allowCreateNewDevicesByX509Certificate').enable({emitEvent: false});
|
||||
} else {
|
||||
const provisionDeviceSecret: string = this.provisionConfigurationFormGroup.get('provisionDeviceSecret').value;
|
||||
if (!provisionDeviceSecret || !provisionDeviceSecret.length) {
|
||||
|
||||
@ -62,7 +62,8 @@ export enum CoapTransportDeviceType {
|
||||
export enum DeviceProvisionType {
|
||||
DISABLED = 'DISABLED',
|
||||
ALLOW_CREATE_NEW_DEVICES = 'ALLOW_CREATE_NEW_DEVICES',
|
||||
CHECK_PRE_PROVISIONED_DEVICES = 'CHECK_PRE_PROVISIONED_DEVICES'
|
||||
CHECK_PRE_PROVISIONED_DEVICES = 'CHECK_PRE_PROVISIONED_DEVICES',
|
||||
X509_CERTIFICATE_CHAIN = 'X509_CERTIFICATE_CHAIN'
|
||||
}
|
||||
|
||||
export interface DeviceConfigurationFormInfo {
|
||||
@ -110,7 +111,8 @@ export const deviceProvisionTypeTranslationMap = new Map<DeviceProvisionType, st
|
||||
[
|
||||
[DeviceProvisionType.DISABLED, 'device-profile.provision-strategy-disabled'],
|
||||
[DeviceProvisionType.ALLOW_CREATE_NEW_DEVICES, 'device-profile.provision-strategy-created-new'],
|
||||
[DeviceProvisionType.CHECK_PRE_PROVISIONED_DEVICES, 'device-profile.provision-strategy-check-pre-provisioned']
|
||||
[DeviceProvisionType.CHECK_PRE_PROVISIONED_DEVICES, 'device-profile.provision-strategy-check-pre-provisioned'],
|
||||
[DeviceProvisionType.X509_CERTIFICATE_CHAIN, 'device-profile.provision-strategy-x509.certificate-chain']
|
||||
]
|
||||
);
|
||||
|
||||
|
||||
@ -1495,6 +1495,19 @@
|
||||
"provision-device-secret-required": "Provision device secret is required.",
|
||||
"copy-provision-secret": "Copy provision secret",
|
||||
"provision-secret-copied-message": "Provision secret has been copied to clipboard",
|
||||
"provision-strategy-x509": {
|
||||
"certificate-chain": "X509 Certificates Chain",
|
||||
"hint-certificate-chain": "X.509 certificates strategy is used to provision devices by client certificates in two-way TLS communication. This strategy can check for pre-provisioned devices, update X.509 device credentials, or create new devices. The user uploads X.509 certificate to the device profile and sets a regular expression to fetch the device name from Common Name (CN)... <a href='' target='_blank'>More</a>",
|
||||
"allow-create-new-devices": "Create new devices",
|
||||
"hint-allow-create-new-devices": "Hint: if selected new devices will be created with correct device credentials from client certificate.",
|
||||
"certificate-value": "Certificate in PEM format",
|
||||
"certificate-value-required": "Certificate in PEM format is required",
|
||||
"cn-regex-variable": "CN Regular Expression variable",
|
||||
"cn-regex-variable-required": "CN Regular Expression variable is required",
|
||||
"hint-cn-regex-variable-title": "<b>Examples of RegEx usage:</b>",
|
||||
"hint-cn-regex-variable-examples": "1. <b>Pattern:</b> .* - matches any character (until line terminators)<br><b>CN sample:</b> DeviceName\\nAdditionalInfo<br><b>Pattern matches:</b> DeviceName OR DeviceName\\nAdditionalInfo<br><br>2. <b>Pattern:</b> ^([^@]+) - matches any string that starts with one or more characters that are not the “@” symbol (@ could be replaced by any other symbol)<br><b>CN sample:</b> DeviceName@AdditionalInfo<br><b>Pattern matches:</b> DeviceName<br><br>3. <b>Pattern:</b> [\\w]*$ (equivalent to [a-zA-Z0-9_]*$) - matches zero or more occurences of any word character (letter, digit or underscore) at the end of the string<br><b>CN sample:</b> AdditionalInfo2110#DeviceName_01<br><b>Pattern matches:</b> DeviceNane_01",
|
||||
"hint-cn-regex-variable-note": "<b>Note:</b> Client will get error response in case regex is failed to match."
|
||||
},
|
||||
"condition": "Condition",
|
||||
"condition-type": "Condition type",
|
||||
"condition-type-simple": "Simple",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user