feat(2FA-Setup/Recovery-Dialogs): [Auth/PM-11701] Refactor dialogs to properly use title & subtitle inputs for consistent styling (#13493)

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

@@ -1,8 +1,8 @@
-<bit-dialog dialogSize="default">
-  <span bitDialogTitle>
-    {{ "twoStepLogin" | i18n }}
-    <span bitTypography="body1">{{ "recoveryCodeTitle" | i18n }}</span>
-  </span>
+<bit-dialog
+  dialogSize="default"
+  [title]="'twoStepLogin' | i18n"
+  [subtitle]="'recoveryCodeTitle' | i18n"
+>
   <ng-container *ngIf="authed" bitDialogContent>
     <ng-container *ngIf="code">
       <p bitTypography="body1" class="tw-text-center">{{ "twoFactorRecoveryYourCode" | i18n }}:</p>

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

@@ -1,9 +1,9 @@
 <form *ngIf="authed" [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-dialog dialogSize="default">
-    <span bitDialogTitle>
-      {{ "twoStepLogin" | i18n }}
-      <span bitTypography="body1">{{ "authenticatorAppTitle" | i18n }}</span>
-    </span>
+  <bit-dialog
+    dialogSize="default"
+    [title]="'twoStepLogin' | i18n"
+    [subtitle]="'authenticatorAppTitle' | i18n"
+  >
     <ng-container bitDialogContent>
       <ng-container *ngIf="enabled">
         <bit-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi-check-circle">

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

@@ -1,9 +1,5 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit" *ngIf="authed" autocomplete="off">
-  <bit-dialog>
-    <span bitDialogTitle>
-      {{ "twoStepLogin" | i18n }}
-      <span bitTypography="body1">Duo</span>
-    </span>
+  <bit-dialog [title]="'twoStepLogin' | i18n" [subtitle]="'Duo'">
     <ng-container bitDialogContent>
       <ng-container *ngIf="enabled">
         <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">

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

@@ -1,9 +1,5 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit" *ngIf="authed">
-  <bit-dialog>
-    <span bitDialogTitle>
-      {{ "twoStepLogin" | i18n }}
-      <span bitTypography="body1">{{ "emailTitle" | i18n }}</span>
-    </span>
+  <bit-dialog [title]="'twoStepLogin' | i18n" [subtitle]="'emailTitle' | i18n">
     <ng-container bitDialogContent>
       <ng-container *ngIf="enabled">
         <bit-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi-check-circle">

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

@@ -1,9 +1,9 @@
 <form *ngIf="authed" [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-dialog dialogSize="large">
-    <span bitDialogTitle>
-      {{ "twoStepLogin" | i18n }}
-      <span bitTypography="body1">{{ "webAuthnTitle" | i18n }}</span>
-    </span>
+  <bit-dialog
+    dialogSize="large"
+    [title]="'twoStepLogin' | i18n"
+    [subtitle]="'webAuthnTitle' | i18n"
+  >
     <ng-container bitDialogContent>
       <app-callout
         type="success"

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

@@ -1,9 +1,5 @@
 <form *ngIf="authed" [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-dialog dialogSize="large">
-    <span bitDialogTitle>
-      {{ "twoStepLogin" | i18n }}
-      <span bitTypography="body1">YubiKey</span>
-    </span>
+  <bit-dialog dialogSize="large" [title]="'twoStepLogin' | i18n" [subtitle]="'YubiKey'">
     <ng-container bitDialogContent>
       <app-callout
         *ngIf="enabled"

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

@@ -1,9 +1,5 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-dialog dialogSize="default">
-    <span bitDialogTitle>
-      {{ "twoStepLogin" | i18n }}
-      <small class="tw-text-muted">{{ dialogTitle }}</small>
-    </span>
+  <bit-dialog dialogSize="default" [title]="'twoStepLogin' | i18n" [subtitle]="dialogTitle">
     <ng-container bitDialogContent>
       <app-user-verification-form-input
         formControlName="secret"