From 0e019967e2e45bdc33139e80b1fb720ae53c1e78 Mon Sep 17 00:00:00 2001
From: deaflynx <deaflynx@gmail.com>
Date: Wed, 22 Mar 2023 12:13:59 +0200
Subject: [PATCH] Feature X509 Device provision added ui form

---
 ...ile-provision-configuration.component.html | 36 ++++++++++++++++---
 ...ofile-provision-configuration.component.ts | 16 ++++++++-
 ui-ngx/src/app/shared/models/device.models.ts |  6 ++--
 .../assets/locale/locale.constant-en_US.json  | 13 +++++++
 4 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
index b588a5ec34..ffe4a4732a 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@@ -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>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
index 872571dc20..17ccd40df0 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
@@ -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) {
diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts
index ae601b0039..382b32799b 100644
--- a/ui-ngx/src/app/shared/models/device.models.ts
+++ b/ui-ngx/src/app/shared/models/device.models.ts
@@ -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']
   ]
 );
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index cfc11e8ad5..d6e70ddd51 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -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",