/// /// 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, Inject, OnInit, SkipSelf } from '@angular/core'; 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 { DeviceService } from '@core/http/device.service'; import { credentialTypeNames, DeviceCredentialMQTTBasic, DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models'; import { DialogComponent } from '@shared/components/dialog.component'; import { Router } from '@angular/router'; export interface DeviceCredentialsDialogData { isReadOnly: boolean; deviceId: string; } @Component({ selector: 'tb-device-credentials-dialog', templateUrl: './device-credentials-dialog.component.html', providers: [{provide: ErrorStateMatcher, useExisting: DeviceCredentialsDialogComponent}], styleUrls: [] }) export class DeviceCredentialsDialogComponent extends DialogComponent implements OnInit, ErrorStateMatcher { deviceCredentialsFormGroup: FormGroup; isReadOnly: boolean; deviceCredentials: DeviceCredentials; submitted = false; deviceCredentialsType = DeviceCredentialsType; credentialsTypes = Object.keys(DeviceCredentialsType); credentialTypeNamesMap = credentialTypeNames; hidePassword = true; constructor(protected store: Store, protected router: Router, @Inject(MAT_DIALOG_DATA) public data: DeviceCredentialsDialogData, private deviceService: DeviceService, @SkipSelf() private errorStateMatcher: ErrorStateMatcher, public dialogRef: MatDialogRef, public fb: FormBuilder) { super(store, router, dialogRef); this.isReadOnly = data.isReadOnly; } 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'])}) }); if (this.isReadOnly) { this.deviceCredentialsFormGroup.disable({emitEvent: false}); } else { this.registerDisableOnLoadFormControl(this.deviceCredentialsFormGroup.get('credentialsType')); } this.loadDeviceCredentials(); } isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { const originalErrorState = this.errorStateMatcher.isErrorState(control, form); const customErrorState = !!(control && control.invalid && this.submitted); return originalErrorState || customErrorState; } loadDeviceCredentials() { 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(); } ); } 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; this.deviceCredentials = {...this.deviceCredentials, ...deviceCredentialsValue}; this.deviceService.saveDeviceCredentials(this.deviceCredentials).subscribe( (deviceCredentials) => { this.dialogRef.close(deviceCredentials); } ); } 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(); } } }