From bd43ebc2044fdc2b868d9ade8cd5063106e53f1d Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Tue, 17 May 2022 18:06:35 +0300 Subject: [PATCH] UI: Refactoring sysadmin Two-factor authentication page --- .../two-factor-auth-settings.component.html | 14 +++++----- .../two-factor-auth-settings.component.ts | 26 ++++++++++++++----- .../assets/locale/locale.constant-en_US.json | 9 ++++--- 3 files changed, 33 insertions(+), 16 deletions(-) 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 bcc5a695e2..656f6d7c3b 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 @@ -64,14 +64,14 @@
- admin.2fa.number-of-attempts + admin.2fa.number-of-send-attempts - {{ 'admin.2fa.number-of-attempts-required' | translate }} + {{ 'admin.2fa.number-of-send-attempts-required' | translate }} - {{ 'admin.2fa.number-of-attempts-pattern' | translate }} + {{ 'admin.2fa.number-of-send-attempts-pattern' | translate }} @@ -92,14 +92,14 @@
- admin.2fa.number-of-attempts + admin.2fa.number-of-checking-attempts - {{ 'admin.2fa.number-of-attempts-required' | translate }} + {{ 'admin.2fa.number-of-checking-attempts-required' | translate }} - {{ 'admin.2fa.number-of-attempts-pattern' | translate }} + {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }} @@ -122,7 +122,7 @@ {{ provider.value.providerType }} 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 b23576f549..c866612049 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 @@ -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; + constructor(protected store: Store, 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 => { - const index = allowProvidersConfig.indexOf(provider); - if (index > -1) { - processFormValue.providers.push(Object.assign(settings.providers[index], {enable: true})); + Object.values(TwoFactorAuthProviderType).forEach((provider, index) => { + const findIndex = allowProvidersConfig.indexOf(provider); + if (findIndex > -1) { + 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(':'); 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 8f56f1c3a0..80064c88f9 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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-attempts-pattern": "Number of attempts must be a positive integer.", - "number-of-attempts-required": "Number of attempts is required.", + "number-of-checking-attempts": "Number of checking attempts", + "number-of-checking-attempts-pattern": "Number of checking attempts must be a positive integer.", + "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.",