Vladyslav_Prykhodko
6 years ago
7 changed files with 179 additions and 34 deletions
@ -0,0 +1,26 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<button mat-raised-button |
||||
|
ngxClipboard |
||||
|
[cbContent]="credential" |
||||
|
(cbOnSuccess)="onCopyCredential()" |
||||
|
[fxHide]="hideButton" |
||||
|
[disabled]="disabled || loading"> |
||||
|
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> |
||||
|
<span>{{ buttonLabel }}</span> |
||||
|
</button> |
||||
@ -0,0 +1,128 @@ |
|||||
|
///
|
||||
|
/// 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, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { DeviceService } from '@core/http/device.service'; |
||||
|
import { DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models'; |
||||
|
import { isDefinedAndNotNull, isEqual } from '@core/utils'; |
||||
|
import { BehaviorSubject, Subject } from 'rxjs'; |
||||
|
import { distinctUntilChanged, filter, mergeMap, tap } from 'rxjs/operators'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { ActionNotificationShow } from '@core/notification/notification.actions'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-copy-device-credentials', |
||||
|
templateUrl: './copy-device-credentials.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class CopyDeviceCredentialsComponent implements OnDestroy { |
||||
|
|
||||
|
private deviceId$ = new BehaviorSubject<EntityId>(null); |
||||
|
|
||||
|
private credentials$ = new Subject<DeviceCredentials>(); |
||||
|
|
||||
|
private tooltipMessage: string; |
||||
|
|
||||
|
public hideButton = true; |
||||
|
|
||||
|
public credential: string; |
||||
|
|
||||
|
public loading = false; |
||||
|
|
||||
|
public buttonLabel: string; |
||||
|
|
||||
|
@Input() |
||||
|
set deviceId(deviceId: EntityId) { |
||||
|
this.deviceId$.next(deviceId); |
||||
|
} |
||||
|
|
||||
|
@Input() disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
set credentials(credential: DeviceCredentials) { |
||||
|
this.credentials$.next(credential); |
||||
|
} |
||||
|
|
||||
|
constructor(private store: Store<AppState>, |
||||
|
private translate: TranslateService, |
||||
|
private deviceService: DeviceService |
||||
|
) { |
||||
|
this.deviceId$.pipe( |
||||
|
filter(device => isDefinedAndNotNull(device) && device.entityType === EntityType.DEVICE), |
||||
|
distinctUntilChanged((prev, curr) => prev.id === curr.id), |
||||
|
tap(() => this.loading = true), |
||||
|
mergeMap(device => this.deviceService.getDeviceCredentials(device.id)) |
||||
|
).subscribe(deviceCredentials => { |
||||
|
this.processingValue(deviceCredentials); |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
|
||||
|
this.credentials$.pipe( |
||||
|
filter(credential => isDefinedAndNotNull(credential)), |
||||
|
distinctUntilChanged((prev, curr) => isEqual(prev, curr)) |
||||
|
).subscribe(deviceCredentials => { |
||||
|
console.warn(deviceCredentials); |
||||
|
this.processingValue(deviceCredentials); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.deviceId$.unsubscribe(); |
||||
|
this.credentials$.unsubscribe(); |
||||
|
} |
||||
|
|
||||
|
private processingValue(credential: DeviceCredentials): void { |
||||
|
switch (credential.credentialsType) { |
||||
|
case DeviceCredentialsType.ACCESS_TOKEN: |
||||
|
this.hideButton = false; |
||||
|
this.credential = credential.credentialsId; |
||||
|
this.buttonLabel = this.translate.instant('device.copyAccessToken'); |
||||
|
this.tooltipMessage = this.translate.instant('device.accessTokenCopiedMessage'); |
||||
|
break; |
||||
|
case DeviceCredentialsType.MQTT_BASIC: |
||||
|
this.hideButton = false; |
||||
|
this.credential = this.convertObjectToString(JSON.parse(credential.credentialsValue)); |
||||
|
this.buttonLabel = this.translate.instant('device.copy-mqtt-authentication'); |
||||
|
this.tooltipMessage = this.translate.instant('device.mqtt-authentication-copied-message'); |
||||
|
break; |
||||
|
default: |
||||
|
this.hideButton = true; |
||||
|
this.credential = null; |
||||
|
this.buttonLabel = ''; |
||||
|
this.tooltipMessage = ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private convertObjectToString(obj: object): string { |
||||
|
Object.keys(obj).forEach(k => (!obj[k] && obj[k] !== undefined) && delete obj[k]); |
||||
|
return JSON.stringify(obj).replace(/"([^"]+)":/g, '$1:'); |
||||
|
} |
||||
|
|
||||
|
onCopyCredential() { |
||||
|
this.store.dispatch(new ActionNotificationShow( |
||||
|
{ |
||||
|
message: this.tooltipMessage, |
||||
|
type: 'success', |
||||
|
duration: 750, |
||||
|
verticalPosition: 'bottom', |
||||
|
horizontalPosition: 'right' |
||||
|
})); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue