dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactoring

Browse Source
This commit is contained in:
Artem Dzhereleiko 2023-05-03 15:59:31 +03:00
parent 45b6a738ca
commit 4a53707124
8 changed files with 56 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
View File

@ -26,18 +26,19 @@
matTooltip="{{ 'device.generate-client-id' | translate }}"
matTooltipPosition="above"
(click)="generate('clientId')"
*ngIf="!deviceCredentialsMqttFormGroup.get('clientId').value">
*ngIf="!deviceCredentialsMqttFormGroup.get('clientId').value; else copyClientId">
<mat-icon>autorenew</mat-icon>
</button>
<tb-copy-button
matSuffix
inputAction
*ngIf="deviceCredentialsMqttFormGroup.get('clientId').value"
[copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"
tooltipText="{{ 'device.copy-client-id' | translate }}"
tooltipPosition="above"
icon="content_copy">
</tb-copy-button>
<ng-template #copyClientId>
<tb-copy-button
matSuffix
[miniButton]="false"
[copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"
tooltipText="{{ 'device.copy-client-id' | translate }}"
tooltipPosition="above"
icon="content_copy">
</tb-copy-button>
</ng-template>
<mat-error *ngIf="deviceCredentialsMqttFormGroup.get('clientId').hasError('pattern')">
{{ 'device.client-id-pattern' | translate }}
</mat-error>
@ -52,18 +53,20 @@
matTooltip="{{ 'device.generate-user-name' | translate }}"
matTooltipPosition="above"
(click)="generate('userName')"
*ngIf="!deviceCredentialsMqttFormGroup.get('userName').value">
*ngIf="!deviceCredentialsMqttFormGroup.get('userName').value; else copyUserName">
<mat-icon>autorenew</mat-icon>
</button>
<tb-copy-button
matSuffix
inputAction
*ngIf="deviceCredentialsMqttFormGroup.get('userName').value"
[copyText]="deviceCredentialsMqttFormGroup.get('userName').value"
tooltipText="{{ 'device.copy-user-name' | translate }}"
tooltipPosition="above"
icon="content_copy">
</tb-copy-button>
<ng-template #copyUserName>
<tb-copy-button
matSuffix
[miniButton]="false"
*ngIf="deviceCredentialsMqttFormGroup.get('userName').value"
[copyText]="deviceCredentialsMqttFormGroup.get('userName').value"
tooltipText="{{ 'device.copy-user-name' | translate }}"
tooltipPosition="above"
icon="content_copy">
</tb-copy-button>
</ng-template>
<mat-error *ngIf="deviceCredentialsMqttFormGroup.get('userName').hasError('required')">
{{ 'device.user-name-required' | translate }}
</mat-error>
@ -82,18 +85,20 @@
matTooltip="{{ 'device.generate-password' | translate }}"
matTooltipPosition="above"
(click)="generate('password')"
*ngIf="!deviceCredentialsMqttFormGroup.get('password').value">
*ngIf="!deviceCredentialsMqttFormGroup.get('password').value; else copyPassword">
<mat-icon>autorenew</mat-icon>
</button>
<tb-copy-button
matSuffix
inputAction
*ngIf="deviceCredentialsMqttFormGroup.get('password').value"
[copyText]="deviceCredentialsMqttFormGroup.get('password').value"
tooltipText="{{ 'device.copy-password' | translate }}"
tooltipPosition="above"
icon="content_copy">
</tb-copy-button>
<ng-template #copyPassword>
<tb-copy-button
matSuffix
[miniButton]="false"
*ngIf="deviceCredentialsMqttFormGroup.get('password').value"
[copyText]="deviceCredentialsMqttFormGroup.get('password').value"
tooltipText="{{ 'device.copy-password' | translate }}"
tooltipPosition="above"
icon="content_copy">
</tb-copy-button>
</ng-template>
</mat-form-field>
<tb-error style="margin-top: -12px; display: block;"
[error]="deviceCredentialsMqttFormGroup.hasError('atLeastOne') ?

2
ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
View File

@ -130,6 +130,6 @@ export class DeviceCredentialsMqttBasicComponent implements ControlValueAccessor
}
public generate(formControlName: string) {
this.deviceCredentialsMqttFormGroup.get(formControlName).patchValue(generateSecret(12));
this.deviceCredentialsMqttFormGroup.get(formControlName).patchValue(generateSecret(20));
}
}

23
ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
View File

@ -36,18 +36,19 @@
matTooltip="{{ 'device.generate-access-token' | translate }}"
matTooltipPosition="above"
(click)="generate('credentialsId')"
*ngIf="!deviceCredentialsFormGroup.get('credentialsId').value">
*ngIf="!deviceCredentialsFormGroup.get('credentialsId').value; else copyAccessToken">
<mat-icon>autorenew</mat-icon>
</button>
<tb-copy-button
matSuffix
inputAction
*ngIf="deviceCredentialsFormGroup.get('credentialsId').value"
[copyText]="deviceCredentialsFormGroup.get('credentialsId').value"
tooltipText="{{ 'device.copy-access-token' | translate }}"
tooltipPosition="above"
icon="content_copy">
</tb-copy-button>
<ng-template #copyAccessToken>
<tb-copy-button
matSuffix
[miniButton]="false"
[copyText]="deviceCredentialsFormGroup.get('credentialsId').value"
tooltipText="{{ 'device.copy-access-token' | translate }}"
tooltipPosition="above"
icon="content_copy">
</tb-copy-button>
</ng-template>
<mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsId').hasError('required')">
{{ 'device.access-token-required' | translate }}
</mat-error>
@ -62,7 +63,7 @@
<textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
<tb-copy-button
matSuffix
inputAction
[miniButton]="false"
*ngIf="deviceCredentialsFormGroup.get('credentialsValue').value"
[copyText]="deviceCredentialsFormGroup.get('credentialsValue').value"
tooltipText="{{ 'device.copy-certificate' | translate }}"

2
ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
View File

@ -183,6 +183,6 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
}
public generate(formControlName: string) {
this.deviceCredentialsFormGroup.get(formControlName).patchValue(generateSecret(12));
this.deviceCredentialsFormGroup.get(formControlName).patchValue(generateSecret(20));
}
}

6
ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
View File

@ -95,7 +95,7 @@
<input matInput [value]="redirectURI(domainInfo)" readonly>
<tb-copy-button
matSuffix
inputAction
[miniButton]="false"
color="primary"
[copyText]="redirectURI(domainInfo)"
tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@ -107,7 +107,7 @@
<input matInput [value]="redirectURIMixed(domainInfo)" readonly>
<tb-copy-button
matSuffix
inputAction
[miniButton]="false"
color="primary"
[copyText]="redirectURIMixed(domainInfo)"
tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@ -166,7 +166,7 @@
<textarea matInput formControlName="appSecret" rows="1" required></textarea>
<tb-copy-button
matSuffix
inputAction
[miniButton]="false"
color="primary"
[copyText]="mobileInfo.get('appSecret').value"
tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}"

2
ui-ngx/src/app/shared/components/button/copy-button.component.html
View File

@ -17,7 +17,7 @@
-->
<button mat-icon-button
type="button"
[ngClass]="{'table-cell-action': !inputAction}"
[ngClass]="{'mini-button': miniButton}"
[color]="color"
[disabled]="disabled"
[matTooltip]="matTooltipText"

2
ui-ngx/src/app/shared/components/button/copy-button.component.scss
View File

@ -16,7 +16,7 @@
@import "../../../../theme";
:host {
.table-cell-action {
.mini-button {
height: 32px;
width: 32px;
line-height: 32px;

3
ui-ngx/src/app/shared/components/button/copy-button.component.ts
View File

@ -36,6 +36,7 @@ export class CopyButtonComponent {
copyText: string;
@Input()
@coerceBoolean()
disabled = false;
@Input()
@ -58,7 +59,7 @@ export class CopyButtonComponent {
@Input()
@coerceBoolean()
inputAction = false;
miniButton = true;
@Output()
successCopied = new EventEmitter<string>();