Use page header for 2FA setup comp on org settings page to match other org settings pages but use tabbed header class on user account settings > security > Two-step login tab. (#4890)

apps/web/src/app/organizations/settings/two-factor-setup.component.ts

@@ -17,6 +17,7 @@ import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from "../../..
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
+  tabbedHeader = false;
   constructor(
     apiService: ApiService,
     modalService: ModalService,

apps/web/src/auth/settings/two-factor-setup.component.html

@@ -1,6 +1,6 @@
 <!-- Please remove this disable statement when editing this file! -->
 <!-- eslint-disable @angular-eslint/template/button-has-type -->
-<div class="page-header">
+<div [ngClass]="tabbedHeader ? 'tabbed-header' : 'page-header'">
   <h1 *ngIf="!organizationId">{{ "twoStepLogin" | i18n }}</h1>
   <h1 *ngIf="organizationId">{{ "twoStepLoginEnforcement" | i18n }}</h1>
 </div>

apps/web/src/auth/settings/two-factor-setup.component.ts

@@ -43,6 +43,8 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
   modal: ModalRef;
   formPromise: Promise<any>;
 
+  tabbedHeader = true;
+
   private destroy$ = new Subject<void>();
   private twoFactorAuthPolicyAppliesToActiveUser: boolean;