From 4a87a76f7dbbb319f94a45a20ce1c4b5918a7643 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <adzhereleiko@thingsboard.io>
Date: Mon, 8 Dec 2025 10:12:19 +0200
Subject: [PATCH] UI: Add error and progress bar for 2fa cards

---
 .../login/force-two-factor-auth-login.component.html  | 11 +++++++----
 .../login/force-two-factor-auth-login.component.scss  |  6 ++++++
 .../login/force-two-factor-auth-login.component.ts    |  8 ++++++++
 3 files changed, 21 insertions(+), 4 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 94bd0b2cf0..24f9ec1bd7 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
@@ -15,8 +15,11 @@
     limitations under the License.
 
 -->
-<div class="tb-two-factor-auth-login-content mat-app-background tb-dark flex flex-row items-center justify-center"
+<div class="tb-two-factor-auth-login-content mat-app-background tb-dark flex flex-col items-center justify-center"
      style="width: 100%;">
+  @if (isLoading$ | async) {
+    <mat-progress-bar color="warn" class="progress-bar" mode="indeterminate"></mat-progress-bar>
+  }
   @switch (state()) {
     @case (ForceTwoFAState.SETUP) {
       <mat-card appearance="raised" class="tb-two-factor-auth-login-card flex-initial">
@@ -59,7 +62,7 @@
               </mat-card-title>
             </mat-card-header>
             <mat-card-content>
-              <div class="flex flex-col items-center justify-start">
+              <div tb-toast class="flex flex-col items-center justify-start">
                 <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>
@@ -109,7 +112,7 @@
               </mat-card-title>
             </mat-card-header>
             <mat-card-content>
-              <div class="flex flex-col items-center justify-start">
+              <div tb-toast class="flex flex-col items-center justify-start">
                 <form [formGroup]="smsConfigForm" class="mb-12">
                   <p class="mat-body step-description input" translate>login.sms-description</p>
                   <div class="flex flex-row items-center justify-between gap-3.75">
@@ -156,7 +159,7 @@
               </mat-card-title>
             </mat-card-header>
             <mat-card-content>
-              <div class="flex flex-col items-center justify-start">
+              <div tb-toast class="flex flex-col items-center justify-start">
                 <form [formGroup]="emailConfigForm" class="mb-8 w-full">
                   <p class="mat-body step-description input" translate>login.email-description</p>
                   <mat-form-field class="mat-block input-container flex-1">
diff --git a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss
index d62d7f1628..f1ea95d639 100644
--- a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss
@@ -24,6 +24,12 @@
   .tb-two-factor-auth-login-content {
     background-color: #eee;
 
+    .progress-bar {
+      z-index: 10;
+      margin-bottom: -4px;
+      width: 450px;
+    }
+
     .tb-two-factor-auth-login-card {
       max-height: 100vh;
       overflow: auto;
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 4cc5f27737..6088c07928 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
@@ -39,6 +39,7 @@ 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',
@@ -261,6 +262,13 @@ export class ForceTwoFactorAuthLoginComponent extends PageComponent implements O
             this.configForm.get('verificationCode').setErrors({incorrectCode: true});
           } else if (error.status === 429) {
             this.configForm.get('verificationCode').setErrors({tooManyRequest: true});
+          } else {
+            this.store.dispatch(new ActionNotificationShow({
+              message: error.error.message,
+              type: 'error',
+              verticalPosition: 'top',
+              horizontalPosition: 'left'
+            }));
           }
         }
       })