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
new file mode 100644
index 0000000000..fa0c7e14a2
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
@@ -0,0 +1,77 @@
+<!--
+
+    Copyright © 2016-2020 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<section [formGroup]="deviceCredentialsFormGroup">
+  <mat-form-field class="mat-block">
+    <mat-label translate>device.credentials-type</mat-label>
+    <mat-select formControlName="credentialsType">
+      <mat-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">
+        {{ credentialTypeNamesMap.get(deviceCredentialsType[credentialsType]) }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field *ngIf="deviceCredentialsFormGroup.get('credentialsType').value === deviceCredentialsType.ACCESS_TOKEN"
+                  class="mat-block">
+    <mat-label translate>device.access-token</mat-label>
+    <input matInput formControlName="credentialsId" required>
+    <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsId').hasError('required')">
+      {{ 'device.access-token-required' | translate }}
+    </mat-error>
+    <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsId').hasError('pattern')">
+      {{ 'device.access-token-invalid' | translate }}
+    </mat-error>
+  </mat-form-field>
+  <mat-form-field *ngIf="deviceCredentialsFormGroup.get('credentialsType').value === deviceCredentialsType.X509_CERTIFICATE"
+                  class="mat-block">
+    <mat-label translate>device.rsa-key</mat-label>
+    <textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
+    <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsValue').hasError('required')">
+      {{ 'device.rsa-key-required' | translate }}
+    </mat-error>
+  </mat-form-field>
+  <section *ngIf="deviceCredentialsFormGroup.get('credentialsType').value === deviceCredentialsType.MQTT_BASIC" formGroupName="credentialsBasic">
+    <mat-form-field class="mat-block">
+      <mat-label translate>device.client-id</mat-label>
+      <input matInput formControlName="clientId">
+      <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsBasic.clientId').hasError('pattern')">
+        {{ 'device.client-id-pattern' | translate }}
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field class="mat-block">
+      <mat-label translate>device.user-name</mat-label>
+      <input matInput formControlName="userName" [required]="!!deviceCredentialsFormGroup.get('credentialsBasic.password').value">
+      <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsBasic.userName').hasError('required')">
+        {{ 'device.user-name-required' | translate }}
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field class="mat-block">
+      <mat-label translate>device.password</mat-label>
+      <input matInput formControlName="password"
+             autocomplete="new-password"
+             (ngModelChange)="passwordChanged()"
+             [type]="hidePassword ? 'password' : 'text'">
+      <button mat-icon-button matSuffix type="button"
+              (click)="hidePassword = !hidePassword"
+              [attr.aria-pressed]="hidePassword">
+        <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>
+  </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
new file mode 100644
index 0000000000..298270d153
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
@@ -0,0 +1,229 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  Validator,
+  ValidatorFn,
+  Validators
+} from '@angular/forms';
+import {
+  credentialTypeNames,
+  DeviceCredentialMQTTBasic,
+  DeviceCredentials,
+  DeviceCredentialsType
+} from '@shared/models/device.models';
+import { Subscription } from 'rxjs';
+import { isDefinedAndNotNull } from '@core/utils';
+import { distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+  selector: 'tb-device-credentials',
+  templateUrl: './device-credentials.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DeviceCredentialsComponent),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => DeviceCredentialsComponent),
+      multi: true,
+    }],
+  styleUrls: []
+})
+export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit, Validator, OnDestroy {
+
+  deviceCredentialsFormGroup: FormGroup;
+
+  subscriptions: Subscription[] = [];
+
+  @Input()
+  disabled: boolean;
+
+  deviceCredentials: DeviceCredentials = null;
+
+  submitted = false;
+
+  deviceCredentialsType = DeviceCredentialsType;
+
+  credentialsTypes = Object.keys(DeviceCredentialsType);
+
+  credentialTypeNamesMap = credentialTypeNames;
+
+  hidePassword = true;
+
+  private propagateChange = (v: any) => {};
+
+  constructor(public fb: FormBuilder) {
+    this.deviceCredentialsFormGroup = this.fb.group({
+      credentialsType: [DeviceCredentialsType.ACCESS_TOKEN],
+      credentialsId: [null],
+      credentialsValue: [null],
+      credentialsBasic: this.fb.group({
+        clientId: [null, [Validators.pattern(/^[A-Za-z0-9]+$/)]],
+        userName: [null],
+        password: [null]
+      }, {validators: this.atLeastOne(Validators.required, ['clientId', 'userName'])})
+    });
+    this.deviceCredentialsFormGroup.get('credentialsBasic').disable();
+    this.subscriptions.push(
+      this.deviceCredentialsFormGroup.valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
+        this.updateView();
+      })
+    );
+    this.subscriptions.push(
+      this.deviceCredentialsFormGroup.get('credentialsType').valueChanges.subscribe(() => {
+        this.credentialsTypeChanged();
+      })
+    );
+  }
+
+  ngOnInit(): void {
+    if (this.disabled) {
+      this.deviceCredentialsFormGroup.disable({emitEvent: false});
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(s => s.unsubscribe());
+  }
+
+  writeValue(value: DeviceCredentials | null): void {
+    if (isDefinedAndNotNull(value)) {
+      this.deviceCredentials = value;
+      let credentialsBasic = {clientId: null, userName: null, password: null};
+      let credentialsValue = null;
+      if (value.credentialsType === DeviceCredentialsType.MQTT_BASIC) {
+        credentialsBasic = JSON.parse(value.credentialsValue) as DeviceCredentialMQTTBasic;
+      } else {
+        credentialsValue = value.credentialsValue;
+      }
+      this.deviceCredentialsFormGroup.patchValue({
+        credentialsType: value.credentialsType,
+        credentialsId: value.credentialsId,
+        credentialsValue,
+        credentialsBasic
+      }, {emitEvent: false});
+      this.updateValidators();
+    }
+  }
+
+  updateView() {
+    const deviceCredentialsValue = this.deviceCredentialsFormGroup.value;
+    if (deviceCredentialsValue.credentialsType === DeviceCredentialsType.MQTT_BASIC) {
+      deviceCredentialsValue.credentialsValue = JSON.stringify(deviceCredentialsValue.credentialsBasic);
+    }
+    delete deviceCredentialsValue.credentialsBasic;
+    this.propagateChange(deviceCredentialsValue);
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {}
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (this.disabled) {
+      this.deviceCredentialsFormGroup.disable({emitEvent: false});
+    } else {
+      this.deviceCredentialsFormGroup.enable({emitEvent: false});
+      this.updateValidators();
+    }
+  }
+
+  public validate(c: FormControl) {
+    return this.deviceCredentialsFormGroup.valid ? null : {
+      deviceCredentials: {
+        valid: false,
+      },
+    };
+  }
+
+  credentialsTypeChanged(): void {
+    this.deviceCredentialsFormGroup.patchValue({
+      credentialsId: null,
+      credentialsValue: null,
+      credentialsBasic: {clientId: '', userName: '', password: ''}
+    });
+    this.updateValidators();
+  }
+
+  updateValidators(): void {
+    this.hidePassword = true;
+    const crendetialsType = this.deviceCredentialsFormGroup.get('credentialsType').value as DeviceCredentialsType;
+    switch (crendetialsType) {
+      case DeviceCredentialsType.ACCESS_TOKEN:
+        this.deviceCredentialsFormGroup.get('credentialsId').setValidators([Validators.required, Validators.pattern(/^.{1,20}$/)]);
+        this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsValue').setValidators([]);
+        this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsBasic').disable({emitEvent: false});
+        break;
+      case DeviceCredentialsType.X509_CERTIFICATE:
+        this.deviceCredentialsFormGroup.get('credentialsValue').setValidators([Validators.required]);
+        this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsId').setValidators([]);
+        this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsBasic').disable({emitEvent: false});
+        break;
+      case DeviceCredentialsType.MQTT_BASIC:
+        this.deviceCredentialsFormGroup.get('credentialsBasic').enable({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsBasic').updateValueAndValidity({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsId').setValidators([]);
+        this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
+        this.deviceCredentialsFormGroup.get('credentialsValue').setValidators([]);
+        this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity({emitEvent: false});
+    }
+  }
+
+  private atLeastOne(validator: ValidatorFn, controls: string[] = null) {
+    return (group: FormGroup): ValidationErrors | null => {
+      if (!controls) {
+        controls = Object.keys(group.controls);
+      }
+      const hasAtLeastOne = group?.controls && controls.some(k => !validator(group.controls[k]));
+
+      return hasAtLeastOne ? null : {atLeastOne: true};
+    };
+  }
+
+  passwordChanged() {
+    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([]);
+    }
+    this.deviceCredentialsFormGroup.get('credentialsBasic.userName').updateValueAndValidity({
+      emitEvent: false,
+      onlySelf: true
+    });
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts
index d583369016..2bbf2cb01d 100644
--- a/ui-ngx/src/app/modules/home/components/home-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts
@@ -107,6 +107,7 @@ import { AlarmRuleKeyFiltersDialogComponent } from './profile/alarm/alarm-rule-k
 import { FilterTextComponent } from './filter/filter-text.component';
 import { AddDeviceProfileDialogComponent } from './profile/add-device-profile-dialog.component';
 import { RuleChainAutocompleteComponent } from './rule-chain/rule-chain-autocomplete.component';
+import { DeviceCredentialsComponent } from './device/device-credentials.component';
 
 @NgModule({
   declarations:
@@ -196,7 +197,8 @@ import { RuleChainAutocompleteComponent } from './rule-chain/rule-chain-autocomp
       DeviceProfileComponent,
       DeviceProfileDialogComponent,
       AddDeviceProfileDialogComponent,
-      RuleChainAutocompleteComponent
+      RuleChainAutocompleteComponent,
+      DeviceCredentialsComponent
     ],
   imports: [
     CommonModule,
@@ -275,7 +277,8 @@ import { RuleChainAutocompleteComponent } from './rule-chain/rule-chain-autocomp
     DeviceProfileComponent,
     DeviceProfileDialogComponent,
     AddDeviceProfileDialogComponent,
-    RuleChainAutocompleteComponent
+    RuleChainAutocompleteComponent,
+    DeviceCredentialsComponent
   ],
   providers: [
     WidgetComponentService,
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
index f1b5b442ce..0c99fd7040 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
@@ -30,65 +30,9 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="(isLoading$ | async) || isReadOnly">
-      <mat-form-field class="mat-block">
-        <mat-label translate>device.credentials-type</mat-label>
-        <mat-select formControlName="credentialsType"
-                    (ngModelChange)="credentialsTypeChanged()">
-          <mat-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">
-            {{ credentialTypeNamesMap.get(deviceCredentialsType[credentialsType]) }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field *ngIf="deviceCredentialsFormGroup.get('credentialsType').value === deviceCredentialsType.ACCESS_TOKEN"
-                      class="mat-block">
-        <mat-label translate>device.access-token</mat-label>
-        <input matInput formControlName="credentialsId" required>
-        <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsId').hasError('required')">
-          {{ 'device.access-token-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsId').hasError('pattern')">
-          {{ 'device.access-token-invalid' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field *ngIf="deviceCredentialsFormGroup.get('credentialsType').value === deviceCredentialsType.X509_CERTIFICATE"
-                      class="mat-block">
-        <mat-label translate>device.rsa-key</mat-label>
-        <textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
-        <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsValue').hasError('required')">
-          {{ 'device.rsa-key-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <section *ngIf="deviceCredentialsFormGroup.get('credentialsType').value === deviceCredentialsType.MQTT_BASIC" formGroupName="credentialsBasic">
-        <mat-form-field class="mat-block">
-          <mat-label translate>device.client-id</mat-label>
-          <input matInput formControlName="clientId">
-          <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsBasic.clientId').hasError('pattern')">
-            {{ 'device.client-id-pattern' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label translate>device.user-name</mat-label>
-          <input matInput formControlName="userName" [required]="!!deviceCredentialsFormGroup.get('credentialsBasic.password').value">
-          <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsBasic.userName').hasError('required')">
-            {{ 'device.user-name-required' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label translate>device.password</mat-label>
-          <input matInput formControlName="password"
-                 autocomplete="new-password"
-                 (ngModelChange)="passwordChanged()"
-                 [type]="hidePassword ? 'password' : 'text'">
-          <button mat-icon-button matSuffix type="button"
-                  (click)="hidePassword = !hidePassword"
-                  [attr.aria-pressed]="hidePassword">
-            <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>
-      </section>
+      <tb-device-credentials
+        formControlName="credential">
+      </tb-device-credentials>
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts
index 73e5ae040f..94083cc10b 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts
@@ -19,23 +19,9 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  FormGroupDirective,
-  NgForm,
-  ValidationErrors,
-  ValidatorFn,
-  Validators
-} from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { DeviceService } from '@core/http/device.service';
-import {
-  credentialTypeNames,
-  DeviceCredentialMQTTBasic,
-  DeviceCredentials,
-  DeviceCredentialsType
-} from '@shared/models/device.models';
+import { credentialTypeNames, DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 
@@ -83,19 +69,10 @@ export class DeviceCredentialsDialogComponent extends
 
   ngOnInit(): void {
     this.deviceCredentialsFormGroup = this.fb.group({
-      credentialsType: [DeviceCredentialsType.ACCESS_TOKEN],
-      credentialsId: [''],
-      credentialsValue: [''],
-      credentialsBasic: this.fb.group({
-          clientId: ['', [Validators.pattern(/^[A-Za-z0-9]+$/)]],
-          userName: [''],
-          password: ['']
-      }, {validators: this.atLeastOne(Validators.required, ['clientId', 'userName'])})
+      credential: [null]
     });
     if (this.isReadOnly) {
       this.deviceCredentialsFormGroup.disable({emitEvent: false});
-    } else {
-      this.registerDisableOnLoadFormControl(this.deviceCredentialsFormGroup.get('credentialsType'));
     }
     this.loadDeviceCredentials();
   }
@@ -110,82 +87,20 @@ export class DeviceCredentialsDialogComponent extends
     this.deviceService.getDeviceCredentials(this.data.deviceId).subscribe(
       (deviceCredentials) => {
         this.deviceCredentials = deviceCredentials;
-        let credentialsValue = deviceCredentials.credentialsValue;
-        let credentialsBasic = {clientId: null, userName: null, password: null};
-        if (deviceCredentials.credentialsType === DeviceCredentialsType.MQTT_BASIC) {
-          credentialsValue = null;
-          credentialsBasic = JSON.parse(deviceCredentials.credentialsValue) as DeviceCredentialMQTTBasic;
-        }
         this.deviceCredentialsFormGroup.patchValue({
-          credentialsType: deviceCredentials.credentialsType,
-          credentialsId: deviceCredentials.credentialsId,
-          credentialsValue,
-          credentialsBasic
-        });
-        this.updateValidators();
+          credential: deviceCredentials
+        }, {emitEvent: false});
       }
     );
   }
 
-  credentialsTypeChanged(): void {
-    this.deviceCredentialsFormGroup.patchValue({
-      credentialsId: null,
-      credentialsValue: null,
-      credentialsBasic: {clientId: '', userName: '', password: ''}
-    }, {emitEvent: true});
-    this.updateValidators();
-  }
-
-  updateValidators(): void {
-    this.hidePassword = true;
-    const crendetialsType = this.deviceCredentialsFormGroup.get('credentialsType').value as DeviceCredentialsType;
-    switch (crendetialsType) {
-      case DeviceCredentialsType.ACCESS_TOKEN:
-        this.deviceCredentialsFormGroup.get('credentialsId').setValidators([Validators.required, Validators.pattern(/^.{1,20}$/)]);
-        this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity();
-        this.deviceCredentialsFormGroup.get('credentialsValue').setValidators([]);
-        this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity();
-        this.deviceCredentialsFormGroup.get('credentialsBasic').disable();
-        break;
-      case DeviceCredentialsType.X509_CERTIFICATE:
-        this.deviceCredentialsFormGroup.get('credentialsValue').setValidators([Validators.required]);
-        this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity();
-        this.deviceCredentialsFormGroup.get('credentialsId').setValidators([]);
-        this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity();
-        this.deviceCredentialsFormGroup.get('credentialsBasic').disable();
-        break;
-      case DeviceCredentialsType.MQTT_BASIC:
-        this.deviceCredentialsFormGroup.get('credentialsBasic').enable();
-        this.deviceCredentialsFormGroup.get('credentialsBasic').updateValueAndValidity();
-        this.deviceCredentialsFormGroup.get('credentialsId').setValidators([]);
-        this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity();
-        this.deviceCredentialsFormGroup.get('credentialsValue').setValidators([]);
-        this.deviceCredentialsFormGroup.get('credentialsValue').updateValueAndValidity();
-    }
-  }
-
-  private atLeastOne(validator: ValidatorFn, controls: string[] = null) {
-    return (group: FormGroup): ValidationErrors | null => {
-      if (!controls) {
-        controls = Object.keys(group.controls);
-      }
-      const hasAtLeastOne = group?.controls && controls.some(k => !validator(group.controls[k]));
-
-      return hasAtLeastOne ? null : {atLeastOne: true};
-    };
-  }
-
   cancel(): void {
     this.dialogRef.close(null);
   }
 
   save(): void {
     this.submitted = true;
-    const deviceCredentialsValue = this.deviceCredentialsFormGroup.value;
-    if (deviceCredentialsValue.credentialsType === DeviceCredentialsType.MQTT_BASIC) {
-      deviceCredentialsValue.credentialsValue = JSON.stringify(deviceCredentialsValue.credentialsBasic);
-    }
-    delete deviceCredentialsValue.credentialsBasic;
+    const deviceCredentialsValue = this.deviceCredentialsFormGroup.value.credential;
     this.deviceCredentials = {...this.deviceCredentials, ...deviceCredentialsValue};
     this.deviceService.saveDeviceCredentials(this.deviceCredentials).subscribe(
       (deviceCredentials) => {
@@ -193,18 +108,4 @@ export class DeviceCredentialsDialogComponent extends
       }
     );
   }
-
-  passwordChanged() {
-    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});
-      }
-      this.deviceCredentialsFormGroup.get('credentialsBasic.userName').updateValueAndValidity();
-    } else {
-      this.deviceCredentialsFormGroup.get('credentialsBasic.userName').setValidators([]);
-      this.deviceCredentialsFormGroup.get('credentialsBasic.userName').updateValueAndValidity();
-    }
-  }
 }