From 0a352839d31b208d10e65a8b69c090ec9e082c70 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <adzhereleiko@thingsboard.io>
Date: Wed, 19 Nov 2025 18:07:11 +0200
Subject: [PATCH] UI: Add error msg to send code card for twoFA enforce

---
 ...force-two-factor-auth-login.component.html | 15 +++++--
 .../force-two-factor-auth-login.component.ts  | 42 ++++++++++++-------
 .../assets/locale/locale.constant-en_US.json  |  2 +
 3 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
index 39236ef8e2..94bd0b2cf0 100644
--- a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
@@ -262,9 +262,18 @@
                  inputmode="numeric" pattern="[0-9]*"
                  autocomplete="off"
                  placeholder="{{ 'login.verification-code' | translate }}">
-          <mat-error *ngIf="configForm.get('verificationCode').invalid">
-            {{ 'login.verification-code-invalid' | translate }}
-          </mat-error>
+          @if (configForm.get('verificationCode').getError('required') ||
+          configForm.get('verificationCode').getError('minlength') ||
+          configForm.get('verificationCode').getError('maxlength') ||
+          configForm.get('verificationCode').getError('pattern')) {
+            <mat-error>{{ 'login.verification-code-invalid' | translate }}</mat-error>
+          }
+          @if (configForm.get('verificationCode').getError('incorrectCode')) {
+            <mat-error>{{ 'login.verification-code-incorrect' | translate }}</mat-error>
+          }
+          @if (configForm.get('verificationCode').getError('tooManyRequest')) {
+            <mat-error>{{ 'login.verification-code-many-request' | translate }}</mat-error>
+          }
         </mat-form-field>
         <div class="flex flex-col items-center justify-start gap-2 w-full">
           <button type="button" mat-flat-button color="accent" [disabled]="(isLoading$ | async) || configForm.invalid || !configForm.dirty" class="navigation w-full" (click)="saveConfig(providerType)">
diff --git a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.ts b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.ts
index ef1917ba24..2e3e5a32fe 100644
--- a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.ts
+++ b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.ts
@@ -32,13 +32,14 @@ import {
   TwoFactorAuthProviderType
 } from '@shared/models/two-factor-auth.models';
 import { phoneNumberPattern } from '@shared/models/settings.models';
-import { deepClone, isDefinedAndNotNull, unwrapModule } from '@core/utils';
+import { deepClone, isDefinedAndNotNull, isEqual, unwrapModule } from '@core/utils';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import printTemplate from '@home/pages/security/authentication-dialog/backup-code-print-template.raw';
 import { ImportExportService } from '@shared/import-export/import-export.service';
 import { mergeMap, tap } from 'rxjs/operators';
+import { ActionNotificationShow } from "@core/notification/notification.actions";
 
 enum ForceTwoFAState {
   SETUP = 'setup',
@@ -239,22 +240,31 @@ export class ForceTwoFactorAuthLoginComponent extends PageComponent implements O
   saveConfig(type: TwoFactorAuthProviderType) {
     if (this.configForm.valid) {
       this.twoFaService.verifyAndSaveTwoFaAccountConfig(this.authAccountConfig,
-        this.configForm.get('verificationCode').value).subscribe((config) => {
-        switch (type) {
-          case TwoFactorAuthProviderType.TOTP:
-            this.appState.set(ProvidersState.SUCCESS);
-            break;
-          case TwoFactorAuthProviderType.SMS:
-            this.smsState.set(ProvidersState.SUCCESS);
-            break;
-          case TwoFactorAuthProviderType.EMAIL:
-            this.emailState.set(ProvidersState.SUCCESS);
-            break;
+        this.configForm.get('verificationCode').value).subscribe({
+        next: (config) => {
+          switch (type) {
+            case TwoFactorAuthProviderType.TOTP:
+              this.appState.set(ProvidersState.SUCCESS);
+              break;
+            case TwoFactorAuthProviderType.SMS:
+              this.smsState.set(ProvidersState.SUCCESS);
+              break;
+            case TwoFactorAuthProviderType.EMAIL:
+              this.emailState.set(ProvidersState.SUCCESS);
+              break;
+          }
+          this.config = config;
+          this.authAccountConfig = null;
+          this.allowedProviders();
+        },
+        error: error => {
+          if (error.status === 400) {
+            this.configForm.get('verificationCode').setErrors({incorrectCode: true});
+          } else if (error.status === 429) {
+            this.configForm.get('verificationCode').setErrors({tooManyRequest: true});
+          }
         }
-        this.config = config;
-        this.authAccountConfig = null;
-        this.allowedProviders();
-      });
+      })
     }
   }
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 8e152eca4b..28651910e8 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4256,6 +4256,8 @@
         "print": "Print",
         "verification-code": "6-digit code",
         "verification-code-invalid": "Invalid verification code format",
+        "verification-code-incorrect": "Verification code is incorrect",
+        "verification-code-many-request": "Too many requests check verification code",
         "scan-qr-code": "Scan this QR code with your verification app",
         "phone-input": {
             "phone-input-label": "Phone number",