From 31676d2110ba43eed338a66783463e122b524798 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 13 Oct 2020 09:09:12 +0300
Subject: [PATCH] UI: Refactoring show error in device-credentials component

---
 .../components/device/device-credentials.component.html    | 6 +++---
 .../home/components/device/device-credentials.component.ts | 7 ++-----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
index fa0c7e14a2..a8b48e30d1 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
@@ -70,8 +70,8 @@
         <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
       </button>
     </mat-form-field>
-    <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsBasic').hasError('atLeastOne')">
-      {{ 'device.client-id-or-user-name-necessary' | translate }}
-    </mat-error>
+    <tb-error style="margin-top: -12px; display: block;"
+      [error]="deviceCredentialsFormGroup.get('credentialsBasic').hasError('atLeastOne') ?
+              ('device.client-id-or-user-name-necessary' | translate) : ''"></tb-error>
   </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
index 298270d153..fd6680fe17 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
@@ -174,8 +174,8 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
 
   updateValidators(): void {
     this.hidePassword = true;
-    const crendetialsType = this.deviceCredentialsFormGroup.get('credentialsType').value as DeviceCredentialsType;
-    switch (crendetialsType) {
+    const credentialsType = this.deviceCredentialsFormGroup.get('credentialsType').value as DeviceCredentialsType;
+    switch (credentialsType) {
       case DeviceCredentialsType.ACCESS_TOKEN:
         this.deviceCredentialsFormGroup.get('credentialsId').setValidators([Validators.required, Validators.pattern(/^.{1,20}$/)]);
         this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
@@ -215,9 +215,6 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
     const value = this.deviceCredentialsFormGroup.get('credentialsBasic.password').value;
     if (value !== '') {
       this.deviceCredentialsFormGroup.get('credentialsBasic.userName').setValidators([Validators.required]);
-      if (this.deviceCredentialsFormGroup.get('credentialsBasic.userName').untouched) {
-        this.deviceCredentialsFormGroup.get('credentialsBasic.userName').markAsTouched({onlySelf: true});
-      }
     } else {
       this.deviceCredentialsFormGroup.get('credentialsBasic.userName').setValidators([]);
     }