From 8703a2083efd9de64e51e03ddae7271be43b9d27 Mon Sep 17 00:00:00 2001
From: deaflynx <deaflynx@gmail.com>
Date: Thu, 23 Mar 2023 11:21:44 +0200
Subject: [PATCH] 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

---
 ...ile-provision-configuration.component.html | 130 ++++++++++--------
 ...ofile-provision-configuration.component.ts |   4 +-
 2 files changed, 72 insertions(+), 62 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 99cddbd576..3b2b92ce98 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,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>
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 687bc069b1..beab4828a5 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
@@ -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});