UI: Refactoring sysadmin Two-factor authentication page

ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html

@@ -64,14 +64,14 @@
               <div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px"
                    *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value">
                 <mat-form-field fxFlex class="mat-block">
-                  <mat-label translate>admin.2fa.number-of-attempts</mat-label>
+                  <mat-label translate>admin.2fa.number-of-send-attempts</mat-label>
                   <input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required>
                   <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')">
-                    {{ 'admin.2fa.number-of-attempts-required' | translate }}
+                    {{ 'admin.2fa.number-of-send-attempts-required' | translate }}
                   </mat-error>
                   <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('pattern')
                     || twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('min')">
-                    {{ 'admin.2fa.number-of-attempts-pattern' | translate }}
+                    {{ 'admin.2fa.number-of-send-attempts-pattern' | translate }}
                   </mat-error>
                 </mat-form-field>
                 <mat-form-field fxFlex class="mat-block">
@@ -92,14 +92,14 @@
               <div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px"
                    *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value">
                 <mat-form-field fxFlex class="mat-block">
-                  <mat-label translate>admin.2fa.number-of-attempts</mat-label>
+                  <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
                   <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
                   <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
-                    {{ 'admin.2fa.number-of-attempts-required' | translate }}
+                    {{ 'admin.2fa.number-of-checking-attempts-required' | translate }}
                   </mat-error>
                   <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')
                     || twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('min')">
-                    {{ 'admin.2fa.number-of-attempts-pattern' | translate }}
+                    {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
                   </mat-error>
                 </mat-form-field>
                 <mat-form-field fxFlex class="mat-block">
@@ -122,7 +122,7 @@
                   <mat-expansion-panel-header>
                     <mat-panel-title fxLayoutAlign="start center">
                       <mat-slide-toggle
-                        (click)="toggleProviders($event)"
+                        (click)="toggleProviders($event, i)"
                         formControlName="enable">
                       </mat-slide-toggle>
                       {{ provider.value.providerType }}

ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 import { Store } from '@ngrx/store';
@@ -29,6 +29,8 @@ import {
 import { deepClone, isNotEmptyStr } from '@core/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { MatStepper } from '@angular/material/stepper';
+import { MatExpansionPanel } from '@angular/material/expansion';
 
 @Component({
   selector: 'tb-2fa-settings',
@@ -42,6 +44,8 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
   twoFaFormGroup: FormGroup;
   twoFactorAuthProviderType = TwoFactorAuthProviderType;
 
+  @ViewChildren(MatExpansionPanel) expansionPanel: QueryList<MatExpansionPanel>;
+
   constructor(protected store: Store<AppState>,
               private twoFaService: TwoFactorAuthenticationService,
               private fb: FormBuilder) {
@@ -87,10 +91,15 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
     }
   }
 
-  toggleProviders($event: Event): void {
+  toggleProviders($event: Event, i: number): void {
     if ($event) {
       $event.stopPropagation();
     }
+    if (this.providersForm.at(i).get('enable').value) {
+      this.getByIndexPanel(i).close();
+    } else {
+      this.getByIndexPanel(i).open();
+    }
   }
 
   trackByElement(i: number, item: any) {
@@ -162,10 +171,11 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
       verificationCodeSendRateLimitTime: sendRateLimitTime || 60,
       providers: []
     });
-    Object.values(TwoFactorAuthProviderType).forEach(provider => {
+    Object.values(TwoFactorAuthProviderType).forEach((provider, index) => {
-      const index = allowProvidersConfig.indexOf(provider);
+      const findIndex = allowProvidersConfig.indexOf(provider);
-      if (index > -1) {
+      if (findIndex > -1) {
-        processFormValue.providers.push(Object.assign(settings.providers[index], {enable: true}));
+        processFormValue.providers.push(Object.assign(settings.providers[findIndex], {enable: true}));
+        this.getByIndexPanel(index).open();
       } else {
         processFormValue.providers.push({enable: false});
       }
@@ -216,6 +226,10 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
     this.providersForm.push(newProviders);
   }
 
+  private getByIndexPanel(index: number) {
+    return this.expansionPanel.find((_, i) => i === index);
+  }
+
   private splitRateLimit(setting: string): [number, number] {
     if (isNotEmptyStr(setting)) {
       const [attemptNumber, time] = setting.split(':');

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

@@ -321,9 +321,12 @@
             "max-verification-failures-before-user-lockout": "Max verification failures before user lockout",
             "max-verification-failures-before-user-lockout-pattern": "Max verification failures must be a positive integer.",
             "max-verification-failures-before-user-lockout-required": "Max verification failures is required.",
-            "number-of-attempts": "Number of attempts",
+            "number-of-checking-attempts": "Number of checking attempts",
-            "number-of-attempts-pattern": "Number of attempts must be a positive integer.",
+            "number-of-checking-attempts-pattern": "Number of checking attempts must be a positive integer.",
-            "number-of-attempts-required": "Number of attempts is required.",
+            "number-of-checking-attempts-required": "Number of checking attempts is required.",
+            "number-of-send-attempts": "Number of send attempts",
+            "number-of-send-attempts-pattern": "Number of send attempts must be a positive integer.",
+            "number-of-send-attempts-required": "Number of send attempts is required.",
             "provider": "Provider",
             "total-allowed-time-for-verification": "Total allowed time for verification (sec)",
             "total-allowed-time-for-verification-pattern": "Total allowed time must be a positive integer.",