From 095851897aa6d5f4a067416a3f60337d6f5b1000 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 27 May 2022 16:02:32 +0300
Subject: [PATCH] UI: Fixed 2fa auth.guard and setting style

---
 ui-ngx/src/app/core/guards/auth.guard.ts      | 19 ++++++++++---------
 .../two-factor-auth-settings.component.html   | 18 +++++++++---------
 .../two-factor-auth-settings.component.ts     |  6 +++---
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/ui-ngx/src/app/core/guards/auth.guard.ts b/ui-ngx/src/app/core/guards/auth.guard.ts
index 4fe53d7bdc..fb424b06e3 100644
--- a/ui-ngx/src/app/core/guards/auth.guard.ts
+++ b/ui-ngx/src/app/core/guards/auth.guard.ts
@@ -78,7 +78,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
         const params = lastChild.params || {};
         const isPublic = data.module === 'public';
 
-        if (!authState.isAuthenticated) {
+        if (!authState.isAuthenticated || isPublic) {
           if (publicId && publicId.length > 0) {
             this.authService.setUserFromJwtToken(null, null, false);
             this.authService.reloadUser();
@@ -95,7 +95,15 @@ export class AuthGuard implements CanActivate, CanActivateChild {
                 })
               );
             } else if (path === 'login.mfa') {
-              return of(this.router.parseUrl('/login'));
+              if (authState.authUser?.authority === Authority.PRE_VERIFICATION_TOKEN) {
+                return this.authService.getAvailableTwoFaLoginProviders().pipe(
+                  map(() => {
+                    return true;
+                  })
+                );
+              }
+              this.authService.logout();
+              return of(this.authService.defaultUrl(false));
             } else {
               return of(true);
             }
@@ -117,13 +125,6 @@ export class AuthGuard implements CanActivate, CanActivateChild {
             return of(false);
           }
           if (authState.authUser.authority === Authority.PRE_VERIFICATION_TOKEN) {
-            if (path === 'login.mfa') {
-              return this.authService.getAvailableTwoFaLoginProviders().pipe(
-                map(() => {
-                  return true;
-                })
-              );
-            }
             this.authService.logout();
             return of(false);
           }
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 dde38b21f6..9e0f54243f 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
@@ -30,7 +30,7 @@
     <mat-card-content>
       <form [formGroup]="twoFaFormGroup" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
-          <ng-container>
+          <div>
             <fieldset class="fields-group" formArrayName="providers">
               <legend class="group-title" translate>admin.2fa.available-providers</legend>
               <ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
@@ -186,14 +186,14 @@
                 </ng-template>
               </mat-expansion-panel>
             </fieldset>
-            <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
-              <button mat-button mat-raised-button color="primary"
-                      [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
-                      type="submit">
-                {{'action.save' | translate}}
-              </button>
-            </div>
-          </ng-container>
+          </div>
+          <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+            <button mat-button mat-raised-button color="primary"
+                    [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
+                    type="submit">
+              {{'action.save' | translate}}
+            </button>
+          </div>
         </fieldset>
       </form>
     </mat-card-content>
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 72480b4d44..98beae21cf 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
@@ -147,9 +147,9 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
   }
 
   private setAuthConfigFormValue(settings: TwoFactorAuthSettings) {
-    const [checkRateLimitNumber, checkRateLimitTime] = this.splitRateLimit(settings.verificationCodeCheckRateLimit);
-    const allowProvidersConfig = settings.providers.map(provider => provider.providerType);
-    const processFormValue: TwoFactorAuthSettingsForm = Object.assign(deepClone(settings), {
+    const [checkRateLimitNumber, checkRateLimitTime] = this.splitRateLimit(settings?.verificationCodeCheckRateLimit);
+    const allowProvidersConfig = settings?.providers.map(provider => provider.providerType) || [];
+    const processFormValue: TwoFactorAuthSettingsForm = Object.assign({}, settings, {
       verificationCodeCheckRateLimitEnable: checkRateLimitNumber > 0,
       verificationCodeCheckRateLimitNumber: checkRateLimitNumber || 3,
       verificationCodeCheckRateLimitTime: checkRateLimitTime || 900,