UI: Move resend code in login 2fa page

application/src/main/java/org/thingsboard/server/service/mail/DefaultMailService.java

@@ -316,7 +316,7 @@ public class DefaultMailService implements MailService {
         String subject = messages.getMessage("2fa.verification.code.subject", null, Locale.US);
         String message = mergeTemplateIntoString("2fa.verification.code.ftl", Map.of(
                 TARGET_EMAIL, email,
-                "сode", verificationCode,
+                "code", verificationCode,
                 "expirationTimeSeconds", expirationTimeSeconds
         ));
 

application/src/main/resources/templates/2fa.verification.code.ftl

@@ -76,7 +76,7 @@
                                 </tr>
                                 <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
                                     <td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #348eda; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top" align="center">
-                                        <h2 style="margin-top: 8px;">${сode}</h2>
+                                        <h2 style="margin-top: 8px;">${code}</h2>
                                     </td>
                                 </tr>
                                 <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">

ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html

@@ -46,33 +46,32 @@
                        [attr.inputmode]="inputMode" [pattern]="pattern"
                        autocomplete="off"
                        placeholder="{{ providersData.get(selectedProvider).placeholder | translate }}"/>
-                <button *ngIf="showResendButton"
-                        mat-button matSuffix
-                        (click)="sendCode($event)"
-                        [disabled]="disabledResendButton"
-                        type="button" tabindex="-1">
-                  {{ 'login.resend-code' | translate }}
-                </button>
-                <mat-error *ngIf="verificationForm.get('verificationCode').invalid" style="margin-bottom: 8px">
+                <mat-error *ngIf="verificationForm.get('verificationCode').invalid">
                   {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
                 </mat-error>
-                <mat-error *ngIf="verificationForm.get('verificationCode').invalid && showResendButton && countDownTime" class="timer">
-                  {{ 'login.resend-code-wait' | translate : {time: countDownTime} }}
-                </mat-error>
-                <mat-hint *ngIf="showResendButton && countDownTime" class="timer">
-                  {{ 'login.resend-code-wait' | translate : {time: countDownTime} }}
-                </mat-hint>
               </mat-form-field>
             </div>
             <span style="height: 50px;"></span>
-            <div fxLayout="column" fxLayoutGap="8px">
-              <button mat-raised-button
-                      color="accent"
-                      [disabled]="(isLoading$ | async) || verificationForm.invalid"
-                      type="submit">
-                {{ 'action.continue' | translate }}
-              </button>
-              <button mat-button
+            <button mat-raised-button
+                    color="accent"
+                    [disabled]="(isLoading$ | async) || verificationForm.invalid"
+                    type="submit">
+              {{ 'action.continue' | translate }}
+            </button>
+            <span style="height: 16px;"></span>
+            <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
+              <div *ngIf="showResendButton" fxFlex="50" fxLayoutAlign="center center">
+                <div *ngIf="countDownTime" class="timer">
+                  {{ 'login.resend-code-wait' | translate : {time: countDownTime} }}
+                </div>
+                <button *ngIf="!disabledResendButton"
+                        mat-button fxFlex
+                        (click)="sendCode($event)"
+                        type="button">
+                  {{ 'login.resend-code' | translate }}
+                </button>
+              </div>
+              <button mat-button fxFlex
                       type="button"
                       (click)="selectProvider(null)">
                 {{ 'login.try-another-way' | translate }}

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

@@ -57,8 +57,7 @@
       }
 
       .timer {
-        font: 400 12px / 14px Roboto, "Helvetica Neue", sans-serif;
-        letter-spacing: 0.4px;
+        font: 500 12px / 14px Roboto, "Helvetica Neue", sans-serif;
         color: rgba(255, 255, 255, 0.8);
       }
     }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2499,7 +2499,7 @@
         "verify-your-identity": "Verify your identity",
         "select-way-to-verify": "Select a way to verify",
         "resend-code": "Resend code",
-        "resend-code-wait": "Resend code wait { time, plural, 1 {1 second} other {# seconds} }",
+        "resend-code-wait": "Resend code in { time, plural, 1 {1 second} other {# seconds} }",
         "try-another-way": "Try another way",
         "totp-auth-description": "Please enter the security code from your authenticator app.",
         "totp-auth-placeholder": "Code",