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

UI: refactoring translate

Browse Source
This commit is contained in:
ArtemDzhereleiko 2025-09-25 12:47:46 +03:00
parent 4ddc8030cc
commit 37952f53dc
5 changed files with 61 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
View File

@ -60,7 +60,7 @@
</mat-card-header>
<mat-card-content>
<div class="flex flex-col items-center justify-start">
<p class="mat-body qr-code-description mb-4" translate>security.2fa.dialog.scan-qr-code</p>
<p class="mat-body qr-code-description mb-4" translate>login.scan-qr-code</p>
<canvas class="flex-1" #canvas [style.display]="totpAuthURL ? 'block' : 'none'"></canvas>
<p class="mat-body qr-code-description" translate>login.enter-key-manually</p>
<div class="flex flex-row items-center mb-8 w-full overflow-hidden">
@ -69,7 +69,7 @@
class="attribute-copy"
[disabled]="isLoading$ | async"
[copyText]="totpAuthURLSecret"
tooltipText="{{ 'attribute.copy-key' | translate }}"
tooltipText="{{ 'login.copy-key' | translate }}"
tooltipPosition="above"
icon="content_copy"
[style]="{'font-size': '24px', color: 'rgba(255,255,255,.8)'}"
@ -111,9 +111,13 @@
<mat-card-content>
<div class="flex flex-col items-center justify-start">
<form [formGroup]="smsConfigForm" class="mb-12">
<p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p>
<p class="mat-body step-description input" translate>login.sms-description</p>
<div class="flex flex-row items-center justify-between gap-3.75">
<tb-phone-input class="flex-1"
label="{{ 'login.phone-input.phone-input-label' | translate }}"
hint="login.phone-input.phone-input-hint"
requiredErrorText="{{ 'login.phone-input.phone-input-required' | translate }}"
validationErrorText="{{ 'login.phone-input.phone-input-validation' | translate }}"
formControlName="phone"
[floatLabel]="'auto'">
</tb-phone-input>
@ -121,7 +125,7 @@
</form>
<div class="flex flex-col items-center justify-start gap-2 w-full">
<button type="button" mat-stroked-button [disabled]="(isLoading$ | async) || smsConfigForm.invalid || !smsConfigForm.dirty" class="navigation w-full" (click)="sendSmsCode()">
{{ 'security.2fa.dialog.send-code' | translate }}
{{ 'login.send-code' | translate }}
</button>
<button type="button" mat-flat-button class="navigation w-full" (click)="tryAnotherWay(TwoFactorAuthProviderType.SMS)">
{{ 'login.try-another-way' | translate }}
@ -148,28 +152,28 @@
<button mat-icon-button type="button" (click)="state.set(ForceTwoFAState.SETUP)">
<mat-icon>chevron_left</mat-icon>
</button>
{{ 'login.enable-authenticator-sms' | translate }}
{{ 'login.enable-authenticator-email' | translate }}
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="flex flex-col items-center justify-start">
<form [formGroup]="emailConfigForm" class="mb-8">
<p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p>
<p class="mat-body step-description input" translate>login.email-description</p>
<mat-form-field class="mat-block input-container flex-1">
<input matInput formControlName="email"
type="email" required
placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
placeholder="{{ 'login.email-label' | translate }}" />
<mat-error *ngIf="emailConfigForm.get('email').hasError('required')">
{{ 'user.email-required' | translate }}
{{ 'login.email-required' | translate }}
</mat-error>
<mat-error *ngIf="emailConfigForm.get('email').hasError('email')">
{{ 'user.invalid-email-format' | translate }}
{{ 'login.invalid-email-format' | translate }}
</mat-error>
</mat-form-field>
</form>
<div class="flex flex-col items-center justify-start gap-2 w-full">
<button type="button" mat-stroked-button [disabled]="(isLoading$ | async) || emailConfigForm.invalid" class="navigation w-full" (click)="sendEmailCode()">
{{ 'security.2fa.dialog.send-code' | translate }}
{{ 'login.send-code' | translate }}
</button>
<button type="button" mat-flat-button class="navigation w-full" (click)="tryAnotherWay(TwoFactorAuthProviderType.EMAIL)">
{{ 'login.try-another-way' | translate }}
@ -201,7 +205,7 @@
</mat-card-header>
<mat-card-content>
<div mat-dialog-content tb-toast class="backup-code">
<p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-description</p>
<p class="mat-body-2 description" translate>login.backup-code-description</p>
<div class="container">
@for (code of backupCode?.codes; track code) {
<div class="code">{{ code }}</div>
@ -209,13 +213,13 @@
</div>
<div class="action-buttons flex flex-row items-center justify-start gap-4">
<button type="button" mat-flat-button class="provider w-full" (click)="downloadFile()">
{{ 'security.2fa.dialog.download-txt' | translate }}
{{ 'login.download-txt' | translate }}
</button>
<button type="button" mat-stroked-button class="provider w-full" (click)="printCode()">
{{ 'action.print' | translate }}
{{ 'login.print' | translate }}
</button>
</div>
<p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-warn</p>
<p class="mat-body-2 description" translate>login.backup-code-warn</p>
<button type="button" mat-raised-button color="accent" class="navigation w-full" (click)="backupCodeState.set(BackupCodeState.SUCCESS)">
{{ 'login.continue' | translate }}
</button>
@ -257,9 +261,9 @@
maxlength="6" type="text" required
inputmode="numeric" pattern="[0-9]*"
autocomplete="off"
placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
placeholder="{{ 'login.verification-code' | translate }}">
<mat-error *ngIf="configForm.get('verificationCode').invalid">
{{ 'security.2fa.dialog.verification-code-invalid' | translate }}
{{ 'login.verification-code-invalid' | translate }}
</mat-error>
</mat-form-field>
<div class="flex flex-col items-center justify-start gap-2 w-full">

10
ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
View File

@ -72,9 +72,19 @@
}
::ng-deep {
.tb-two-factor-auth-login-content {
.tb-two-factor-auth-login-card {
button.mat-mdc-icon-button {
.mat-icon {
color: rgba(255, 255, 255, 0.8);
}
}
}
}
button.provider {
text-align: start;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
&:not([disabled][disabled]) {
border-color: rgba(255, 255, 255, .8);
}

6
ui-ngx/src/app/shared/components/phone-input.component.html
View File

@ -37,12 +37,12 @@
(focus)="focus()"
autocomplete="off"
[required]="required">
<mat-hint innerHTML="{{ 'phone-input.phone-input-hint' | translate: {phoneNumber: phonePlaceholder} }}"></mat-hint>
<mat-hint innerHTML="{{ hint | translate: {phoneNumber: phonePlaceholder} }}"></mat-hint>
<mat-error *ngIf="phoneFormGroup.get('phoneNumber').hasError('required')">
{{ 'phone-input.phone-input-required' | translate }}
{{ requiredErrorText }}
</mat-error>
<mat-error *ngIf="phoneFormGroup.get('phoneNumber').hasError('invalidPhoneNumber')">
{{ 'phone-input.phone-input-validation' | translate }}
{{ validationErrorText }}
</mat-error>
</mat-form-field>
</div>

9
ui-ngx/src/app/shared/components/phone-input.component.ts
View File

@ -77,6 +77,15 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
@Input()
label = this.translate.instant('phone-input.phone-input-label');
@Input()
hint = 'phone-input.phone-input-hint';
@Input()
requiredErrorText = this.translate.instant('phone-input.phone-input-required');
@Input()
validationErrorText = this.translate.instant('phone-input.phone-input-validation');
get showFlagSelect(): boolean {
return this.enableFlagsSelect && !this.isLegacy;
}

20
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3909,7 +3909,25 @@
"authenticator-backup-code-success": "Backup code successfully enabled",
"authenticator-backup-code-success-description": "The next time you log in, you will be prompted to enter the security code or use one of backup code.",
"add-verification-method": "Add verification method",
"get-backup-code": "Get backup code"
"get-backup-code": "Get backup code",
"copy-key": "Copy key",
"send-code": "Send code",
"email-label": "Email",
"sms-description": "Enter a phone number to use as your authenticator.",
"backup-code-description": "Print out the codes so you have them handy when you need to use them to log in to your account. You can use each backup code once.",
"backup-code-warn": "Once you leave this page, these codes cannot be shown again. Store them safely using the options below.",
"download-txt": "Download (txt)",
"print": "Print",
"verification-code": "6-digit code",
"verification-code-invalid": "Invalid verification code format",
"scan-qr-code": "Scan this QR code with your verification app",
"phone-input": {
"phone-input-label": "Phone number",
"phone-input-required": "Phone number is required",
"phone-input-validation": "Phone number is invalid or not possible",
"phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. {{phoneNumber}}",
"phone-input-hint": "Phone Number in E.164 format, ex. {{phoneNumber}}"
}
},
"markdown": {
"edit": "Edit",