From 8abb23087d5e690efc5001e252d6930d144d016c Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 19 May 2022 17:04:55 +0300 Subject: [PATCH] UI: Change radio button to checkbox in Security page 2FA --- .../pages/security/security.component.html | 41 ++++++++-------- .../pages/security/security.component.scss | 2 +- .../home/pages/security/security.component.ts | 47 +++++++++++++++---- 3 files changed, 58 insertions(+), 32 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html index 19d414535e..6d5f57213f 100644 --- a/ui-ngx/src/app/modules/home/pages/security/security.component.html +++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html @@ -52,28 +52,27 @@

security.2fa.authenticate-with

-
- - -
-

{{ providersData.get(provider).name | translate }}

-
-
- {{ providersData.get(provider).description | translate }} -
- - -
- - security.2fa.main-2fa-method - + +
+

{{ providersData.get(provider).name | translate }}

+
+
+ {{ providersData.get(provider).description | translate }}
- - - -
+ + + + + security.2fa.main-2fa-method + + + +
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.scss b/ui-ngx/src/app/modules/home/pages/security/security.component.scss index b14b2ebd18..b95909c356 100644 --- a/ui-ngx/src/app/modules/home/pages/security/security.component.scss +++ b/ui-ngx/src/app/modules/home/pages/security/security.component.scss @@ -108,7 +108,7 @@ opacity: 0.87; } - .mat-radio-button { + .mat-checkbox { margin-top: 8px; } } diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.ts b/ui-ngx/src/app/modules/home/pages/security/security.component.ts index d5ded5f4f8..412bc305a3 100644 --- a/ui-ngx/src/app/modules/home/pages/security/security.component.ts +++ b/ui-ngx/src/app/modules/home/pages/security/security.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { User } from '@shared/models/user.model'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; @@ -34,18 +34,24 @@ import { TwoFactorAuthProviderType } from '@shared/models/two-factor-auth.models'; import { authenticationDialogMap } from '@home/pages/security/authentication-dialog/authentication-dialog.map'; +import { takeUntil, tap } from 'rxjs/operators'; +import { Subject } from 'rxjs'; @Component({ selector: 'tb-security', templateUrl: './security.component.html', styleUrls: ['./security.component.scss'] }) -export class SecurityComponent extends PageComponent implements OnInit { +export class SecurityComponent extends PageComponent implements OnInit, OnDestroy { + + private readonly destroy$ = new Subject(); twoFactorAuth: FormGroup; user: User; allowTwoFactorProviders: TwoFactorAuthProviderType[] = []; providersData = twoFactorAuthProvidersData; + useByDefault: TwoFactorAuthProviderType = null; + activeSingleProvider = true; get jwtToken(): string { return `Bearer ${localStorage.getItem('jwt_token')}`; @@ -78,16 +84,23 @@ export class SecurityComponent extends PageComponent implements OnInit { this.twoFactorLoad(this.route.snapshot.data.providers); } + ngOnDestroy() { + super.ngOnDestroy(); + this.destroy$.next(); + this.destroy$.complete(); + } + private buildTwoFactorForm() { this.twoFactorAuth = this.fb.group({ TOTP: [false], SMS: [false], - EMAIL: [false], - useByDefault: [null] + EMAIL: [false] }); - this.twoFactorAuth.get('useByDefault').valueChanges.subscribe(value => { - this.twoFaService.updateTwoFaAccountConfig(value, true, {ignoreLoading: true}) - .subscribe(data => this.processTwoFactorAuthConfig(data)); + this.twoFactorAuth.valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe((value: {TwoFactorAuthProviderType: boolean}) => { + const formActiveValue = Object.values(value).filter(item => item); + this.activeSingleProvider = formActiveValue.length < 2; }); } @@ -108,7 +121,7 @@ export class SecurityComponent extends PageComponent implements OnInit { if (configs[provider]) { this.twoFactorAuth.get(provider).setValue(true); if (configs[provider].useByDefault) { - this.twoFactorAuth.get('useByDefault').setValue(provider, {emitEvent: false}); + this.useByDefault = provider; } } else { this.twoFactorAuth.get(provider).setValue(false); @@ -151,7 +164,10 @@ export class SecurityComponent extends PageComponent implements OnInit { this.translate.instant('security.2fa.disable-2fa-provider-text', {name: providerName}), ).subscribe(res => { if (res) { - this.twoFaService.deleteTwoFaAccountConfig(provider).subscribe(data => this.processTwoFactorAuthConfig(data)); + this.twoFactorAuth.disable({emitEvent: false}); + this.twoFaService.deleteTwoFaAccountConfig(provider) + .pipe(tap(() => this.twoFactorAuth.enable({emitEvent: false}))) + .subscribe(data => this.processTwoFactorAuthConfig(data)); } }); } else { @@ -163,9 +179,20 @@ export class SecurityComponent extends PageComponent implements OnInit { }).afterClosed().subscribe(res => { if (res) { this.twoFactorAuth.get(provider).setValue(res); - this.twoFactorAuth.get('useByDefault').setValue(provider, {emitEvent: false}); + this.useByDefault = provider; } }); } } + + changeDefaultProvider(event: MouseEvent, provider: TwoFactorAuthProviderType) { + event.stopPropagation(); + event.preventDefault(); + if (this.useByDefault !== provider) { + this.twoFactorAuth.disable({emitEvent: false}); + this.twoFaService.updateTwoFaAccountConfig(provider, true) + .pipe(tap(() => this.twoFactorAuth.enable({emitEvent: false}))) + .subscribe(data => this.processTwoFactorAuthConfig(data)); + } + } }