From 5dd8608086b7f1e8420c1d6259a5f147ca3da722 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <adzhereleiko@thingsboard.io>
Date: Wed, 19 Nov 2025 18:05:31 +0200
Subject: [PATCH] UI: Add validation for twoFA settings

---
 .../pages/admin/two-factor-auth-settings.component.html    | 5 ++++-
 .../home/pages/admin/two-factor-auth-settings.component.ts | 7 +++++++
 ui-ngx/src/assets/locale/locale.constant-en_US.json        | 1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
index d1192cace4..c7ad6f373a 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
@@ -90,6 +90,9 @@
 
             <section class="tb-form-panel stroked" formArrayName="providers">
               <div class="tb-form-panel-title" translate>admin.2fa.available-providers</div>
+              @if (!atListOneProvider) {
+                <tb-error noMargin error="{{ 'admin.2fa.available-providers-required' | translate }}" class="flex h-4 items-center pl-3"/>
+              }
               <ng-container *ngFor="let provider of providersForm.controls; let i = index; trackBy: trackByElement">
                   <div class="tb-form-panel stroked tb-slide-toggle">
                     <mat-expansion-panel class="tb-settings" [formGroupName]="i">
@@ -243,7 +246,7 @@
           </div>
           <div class="flex flex-row items-center justify-end gap-2">
             <button mat-button mat-raised-button color="primary"
-                    [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
+                    [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty || !atListOneProvider"
                     type="submit">
               {{'action.save' | translate}}
             </button>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
index 2770f904bb..ecd564632a 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
@@ -184,6 +184,13 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
     });
   }
 
+  get atListOneProvider():boolean {
+    if (this.twoFaFormGroup.get('enforceTwoFa').value) {
+      return this.providersForm.value.some(value => value.enable);
+    }
+    return true;
+  }
+
   private setAuthConfigFormValue(settings: TwoFactorAuthSettings) {
     const [checkRateLimitNumber, checkRateLimitTime] = this.splitRateLimit(settings?.verificationCodeCheckRateLimit);
     const allowProvidersConfig = settings?.providers.map(provider => provider.providerType) || [];
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 60e279d7e6..8e152eca4b 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -485,6 +485,7 @@
         "2fa":  {
             "2fa": "Two-factor authentication",
             "available-providers": "Available providers",
+            "available-providers-required": "At least one 2FA provider should be configured.",
             "issuer-name": "Issuer name",
             "issuer-name-required": "Issuer name is required.",
             "max-verification-failures-before-user-lockout": "Max verification failures before user lockout",