style(profile): responsive design for detail mfa settings

* Buttons which hide/show other toggles were not responsive for mobile devices.
* Refactor: deprecated parameters for subscribe method were replaced by recommended observer parameter.

apps/user-profile/src/app/pages/settings-page/settings-authorization/mfa-settings/mfa-settings.component.html

@@ -1,20 +1,25 @@
 <mat-spinner class="ml-auto mr-auto mt-2" *ngIf="loadingMfa"></mat-spinner>
 <div [hidden]="loadingMfa">
   <span
+    class="toggle-and-button"
     [matTooltip]="'AUTHENTICATION.MFA_DISABLED' | customTranslate | translate"
     [matTooltipDisabled]="mfaAvailable"
     matTooltipPosition="right">
-    <mat-slide-toggle [disabled]="!mfaAvailable" (toggleChange)="toggleEnableMfa()" #toggle
+    <mat-slide-toggle
+      class="toggle-ellipsis"
+      [disabled]="!mfaAvailable"
+      (toggleChange)="toggleEnableMfa()"
+      #toggle
       >{{'AUTHENTICATION.MFA_TOGGLE' | customTranslate | translate}}
-      <button
-        mat-icon-button
-        class="ml-2"
-        (click)="showDetailSettings()"
-        [hidden]="!enableDetailSettings"
-        [disabled]="!mfaAvailable">
-        <mat-icon>{{showDetail ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>
-      </button>
     </mat-slide-toggle>
+    <button
+      class="show-button"
+      mat-icon-button
+      (click)="showDetailSettings()"
+      [hidden]="!enableDetailSettings"
+      [disabled]="!mfaAvailable">
+      <mat-icon>{{showDetail ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>
+    </button>
   </span>
   <button
     mat-flat-button
@@ -26,15 +31,22 @@
   </button>
   <div *ngIf="showDetail">
     <div *ngFor="let category of categories | keyvalue">
-      <mat-slide-toggle
-        [checked]="category.value.value"
-        class="ml-4"
-        (toggleChange)="toggleCategory(category.value)">
-        {{category.value.label[this.translate.currentLang]}}
-        <button mat-icon-button (click)="category.value.show = !category.value.show">
-          <mat-icon>{{category.value.show ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>
+      <span class="toggle-and-button">
+        <mat-slide-toggle
+          class="ml-4 toggle-ellipsis"
+          [checked]="category.value.value"
+          (toggleChange)="toggleCategory(category.value)">
+          {{category.value.label[this.translate.currentLang]}}
+        </mat-slide-toggle>
+        <button
+          class="show-button"
+          mat-icon-button
+          (click)="category.value.show = !category.value.show">
+          <mat-icon>
+            {{category.value.show ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}
+          </mat-icon>
         </button>
-      </mat-slide-toggle>
+      </span>
       <div *ngIf="category.value.show">
         <div *ngFor="let rps of category?.value['rps'] | keyvalue">
           <mat-slide-toggle

apps/user-profile/src/app/pages/settings-page/settings-authorization/mfa-settings/mfa-settings.component.scss

@@ -0,0 +1,15 @@
+.toggle-and-button {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.toggle-ellipsis {
+  height: 40px;
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+}
+
+.show-button {
+  white-space: nowrap;
+}

apps/user-profile/src/app/pages/settings-page/settings-authorization/mfa-settings/mfa-settings.component.ts

@@ -49,20 +49,20 @@ export class MfaSettingsComponent implements OnInit {
   ngOnInit(): void {
     this.loadingMfa = true;
     this.enableDetailSettings = this.store.getProperty('mfa').enable_detail_settings;
-    this.mfaApiService.isMfaAvailable().subscribe(
-      (isAvailable) => {
+    this.mfaApiService.isMfaAvailable().subscribe({
+      next: (isAvailable) => {
         this.mfaAvailable = isAvailable;
         if (isAvailable) {
           this.loadMfa();
         } else {
           this.loadingMfa = false;
         }
       },
-      (err) => {
+      error: (err) => {
         console.error(err);
         this.loadingMfa = false;
-      }
-    );
+      },
+    });
   }
 
   /**
@@ -86,8 +86,8 @@ export class MfaSettingsComponent implements OnInit {
       const enforceMfaAttributeName = this.store.get('mfa', 'enforce_mfa_attribute') as string;
       this.attributesManagerService
         .getUserAttributeByName(this.store.getPerunPrincipal().userId, enforceMfaAttributeName)
-        .subscribe(
-          (attr) => {
+        .subscribe({
+          next: (attr) => {
             if (attr.value) {
               this.enforceMfa = true;
               this.toggle.toggle();
@@ -96,11 +96,11 @@ export class MfaSettingsComponent implements OnInit {
             }
             this.loadingMfa = false;
           },
-          (e) => {
+          error: (e) => {
             console.error(e);
             this.loadingMfa = false;
-          }
-        );
+          },
+        });
     }
   }
 
@@ -109,16 +109,16 @@ export class MfaSettingsComponent implements OnInit {
    */
   getCategoriesAndSettings(): void {
     this.loadingCategories = true;
-    this.mfaApiService.getCategories().subscribe(
-      (categories) => {
+    this.mfaApiService.getCategories().subscribe({
+      next: (categories) => {
         this.categories = categories;
         this.getSettings();
       },
-      (err) => {
+      error: (err) => {
         console.error(err);
         this.loadingCategories = false;
-      }
-    );
+      },
+    });
   }
 
   /**
@@ -133,8 +133,8 @@ export class MfaSettingsComponent implements OnInit {
       this.showDetail = !this.showDetail;
       this.loadingCategories = false;
     } else {
-      this.mfaApiService.getSettings().subscribe(
-        (settings) => {
+      this.mfaApiService.getSettings().subscribe({
+        next: (settings) => {
           if (settings.length !== 0) {
             if (settings.all) {
               this.allCategories = true;
@@ -149,11 +149,11 @@ export class MfaSettingsComponent implements OnInit {
           this.showDetail = !this.showDetail;
           this.loadingCategories = false;
         },
-        (err) => {
+        error: (err) => {
           console.error(err);
           this.loadingCategories = false;
-        }
-      );
+        },
+      });
     }
   }
 
@@ -380,8 +380,8 @@ export class MfaSettingsComponent implements OnInit {
    * @param enforceMfa turn on/off mfa for all services according to toggle
    */
   changeEnforceMfa(enforceMfa: boolean): void {
-    this.mfaApiService.enforceMfaForAllServices(enforceMfa).subscribe(
-      () => {
+    this.mfaApiService.enforceMfaForAllServices(enforceMfa).subscribe({
+      next: () => {
         if (enforceMfa) {
           this.enforceMfa = true;
           if (!this.toggle.checked) {
@@ -396,15 +396,15 @@ export class MfaSettingsComponent implements OnInit {
         sessionStorage.removeItem('mfa_route');
         this.loadingMfa = false;
       },
-      (err) => {
+      error: (err) => {
         // when token is valid, but user is logged in without MFA -> enforce MFA
         if (err.error.error === 'MFA is required') {
           this.saveSettings(true);
         } else {
           this.loadingMfa = false;
         }
-      }
-    );
+      },
+    });
   }
 
   /**
@@ -413,22 +413,22 @@ export class MfaSettingsComponent implements OnInit {
   updateDetailSettings(): void {
     const body = sessionStorage.getItem('settings_mfa');
 
-    this.mfaApiService.updateDetailSettings(body).subscribe(
-      () => {
+    this.mfaApiService.updateDetailSettings(body).subscribe({
+      next: () => {
         this.unchangedSettings = true;
         this.unchangedEnforce = true;
         sessionStorage.removeItem('settings_mfa');
         sessionStorage.removeItem('mfa_route');
         this.loadingMfa = false;
       },
-      (err) => {
+      error: (err) => {
         // when token is valid, but user is logged in without MFA -> enforce MFA
         if (err.error.error === 'MFA is required') {
           this.saveSettings(true);
         } else {
           this.loadingMfa = false;
         }
-      }
-    );
+      },
+    });
   }
 }