Andrii Shvaika
6 years ago
11 changed files with 208 additions and 33 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