From 62d3fe21a6f4a2826636e3936d532fa61ef7300d Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Mon, 24 Feb 2025 15:48:09 -0500
Subject: [PATCH] feat(2FA-Setup/Recovery-Dialogs): [Auth/PM-11701] Refactor
 dialogs to properly use title & subtitle inputs for consistent styling
 (#13493)

---
 .../two-factor/two-factor-recovery.component.html      | 10 +++++-----
 .../two-factor-setup-authenticator.component.html      | 10 +++++-----
 .../two-factor/two-factor-setup-duo.component.html     |  6 +-----
 .../two-factor/two-factor-setup-email.component.html   |  6 +-----
 .../two-factor-setup-webauthn.component.html           | 10 +++++-----
 .../two-factor/two-factor-setup-yubikey.component.html |  6 +-----
 .../two-factor/two-factor-verify.component.html        |  6 +-----
 7 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-recovery.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-recovery.component.html
index 98676509078..413432e5a02 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-recovery.component.html
+++ b/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>
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html
index c9214d59caa..a31d4c33458 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html
+++ b/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">
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.html
index f20bd4f5f70..3a62ec91a8e 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.html
+++ b/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">
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.html
index f79a3bc7b0a..5861d1fba4f 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.html
+++ b/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">
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html
index c9e2e111481..8e7a789d9d0 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html
+++ b/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"
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html
index 098669d7522..112982b4971 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html
+++ b/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"
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-verify.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-verify.component.html
index 288a096c23f..d064de08e19 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-verify.component.html
+++ b/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"