Device profile provision strategy -> fix patch values form for X509 Certificate Chain

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

@@ -33,14 +33,14 @@
     <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>
@@ -48,14 +48,14 @@
     <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>
@@ -80,9 +80,8 @@
       <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" [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>
+    <div style="margin-top: 16px" class="tb-hint" [innerHTML]="'device-profile.provision-strategy-x509.regex-examples' | translate"></div>
   </section>
 </div>

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

@@ -88,8 +88,8 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
       provisionDeviceSecret: [{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}]
+      certificateRegExPattern: [{value: null, disabled: true}, Validators.required],
+      allowCreateNewDevicesByX509Certificate: [{value: null, disabled: true}]
     });
     this.provisionConfigurationFormGroup.get('type').valueChanges.subscribe((type) => {
       if (type === DeviceProvisionType.DISABLED) {
@@ -103,8 +103,19 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
         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) {
+        const certificateValue: string = this.provisionConfigurationFormGroup.get('certificateValue').value;
+        if (!certificateValue || !certificateValue.length) {
+          this.provisionConfigurationFormGroup.get('certificateValue').patchValue(null, {emitEvent: false});
+        }
+        const certificateRegExPattern: string = this.provisionConfigurationFormGroup.get('certificateRegExPattern').value;
+        if (!certificateRegExPattern || !certificateRegExPattern.length) {
+          this.provisionConfigurationFormGroup.get('certificateRegExPattern').patchValue('[\\w]*', {emitEvent: false});
+        }
+        const allowCreateNewDevicesByX509Certificate: boolean | null = this.provisionConfigurationFormGroup.get('allowCreateNewDevicesByX509Certificate').value;
+        if (typeof allowCreateNewDevicesByX509Certificate !== 'boolean') {
+          this.provisionConfigurationFormGroup.get('allowCreateNewDevicesByX509Certificate').patchValue(true, {emitEvent: false});
+        }
         this.provisionConfigurationFormGroup.get('certificateValue').enable({emitEvent: false});
         this.provisionConfigurationFormGroup.get('certificateRegExPattern').enable({emitEvent: false});
         this.provisionConfigurationFormGroup.get('allowCreateNewDevicesByX509Certificate').enable({emitEvent: false});
@@ -119,6 +130,8 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
         }
         this.provisionConfigurationFormGroup.get('provisionDeviceSecret').enable({emitEvent: false});
         this.provisionConfigurationFormGroup.get('provisionDeviceKey').enable({emitEvent: false});
+        this.provisionConfigurationFormGroup.get('certificateValue').disable({emitEvent: false});
+        this.provisionConfigurationFormGroup.get('certificateRegExPattern').disable({emitEvent: false});
       }
     });
     this.provisionConfigurationFormGroup.valueChanges.subscribe(() => {

ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts

@@ -104,7 +104,10 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
     const deviceProvisionConfiguration: DeviceProvisionConfiguration = {
       type: entity?.provisionType ? entity.provisionType : DeviceProvisionType.DISABLED,
       provisionDeviceKey: entity?.provisionDeviceKey,
-      provisionDeviceSecret: entity?.profileData?.provisionConfiguration?.provisionDeviceSecret
+      provisionDeviceSecret: entity?.profileData?.provisionConfiguration?.provisionDeviceSecret,
+      certificateValue: entity?.profileData?.provisionConfiguration?.certificateValue,
+      certificateRegExPattern: entity?.profileData?.provisionConfiguration?.certificateRegExPattern,
+      allowCreateNewDevicesByX509Certificate: entity?.profileData?.provisionConfiguration?.allowCreateNewDevicesByX509Certificate
     };
     const form = this.fb.group(
       {
@@ -185,7 +188,10 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
     const deviceProvisionConfiguration: DeviceProvisionConfiguration = {
       type: entity?.provisionType ? entity.provisionType : DeviceProvisionType.DISABLED,
       provisionDeviceKey: entity?.provisionDeviceKey,
-      provisionDeviceSecret: entity?.profileData?.provisionConfiguration?.provisionDeviceSecret
+      provisionDeviceSecret: entity?.profileData?.provisionConfiguration?.provisionDeviceSecret,
+      certificateValue: entity?.profileData?.provisionConfiguration?.certificateValue,
+      certificateRegExPattern: entity?.profileData?.provisionConfiguration?.certificateRegExPattern,
+      allowCreateNewDevicesByX509Certificate: entity?.profileData?.provisionConfiguration?.allowCreateNewDevicesByX509Certificate
     };
     this.entityForm.patchValue({name: entity.name});
     this.entityForm.patchValue({type: entity.type}, {emitEvent: false});

ui-ngx/src/app/shared/models/device.models.ts

@@ -322,6 +322,9 @@ export interface DeviceProvisionConfiguration {
   type: DeviceProvisionType;
   provisionDeviceSecret?: string;
   provisionDeviceKey?: string;
+  certificateValue?: string;
+  certificateRegExPattern?: string;
+  allowCreateNewDevicesByX509Certificate?: boolean;
 }
 
 export function createDeviceProfileConfiguration(type: DeviceProfileType): DeviceProfileConfiguration {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1504,9 +1504,8 @@
             "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."
+            "hint-cn-regex-variable": "Required to fetch device name from device's X509 certificate's common name.",
+            "regex-examples": "<b>Examples of RegEx usage:</b><ol><li><b>Pattern:</b> <code>.*</code> - matches any character (until line terminators)<br><b>CN sample:</b> <code>DeviceName\\nAdditionalInfo</code><br><b>Pattern matches:</b> <code>DeviceName</code> OR <code>DeviceName\\nAdditionalInfo</code><br><br></li><li><b>Pattern:</b> <code>^([^@]+)</code> - matches any string that starts with one or more characters that are not the <code>@</code> symbol (<code>@</code> could be replaced by any other symbol)<br><b>CN sample:</b> <code>DeviceName@AdditionalInfo</code><br><b>Pattern matches:</b> <code>DeviceName</code><br><br></li><li><b>Pattern:</b> <code>[\\w]*$</code> (equivalent to <code>[a-zA-Z0-9_]*$</code>) - matches zero or more occurences of any word character  (letter, digit or underscore) at the end of the string<br><b>CN sample:</b> <code>AdditionalInfo2110#DeviceName_01</code><br><b>Pattern matches:</b> <code>DeviceNane_01</code></li></ol><b>Note:</b> Client will get error response in case regex is failed to match."
         },
         "condition": "Condition",
         "condition-type": "Condition type",