From bb296c7f8db6534b7dd1eabdaf300834a74a097e Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Thu, 31 Oct 2024 08:06:32 -0500
Subject: [PATCH] [PM-13145] Hidden fields font (#11764)

* display card number and security code with mono font

* display hidden custom fields with mono font

* display passwords with mono font
---
 .../card-details-section.component.html                | 10 ++++++++--
 .../custom-fields/custom-fields.component.html         |  1 +
 .../login-details-section.component.html               |  4 ++--
 .../card-details/card-details-view.component.html      |  2 ++
 .../custom-fields/custom-fields-v2.component.html      |  9 ++++++++-
 .../login-credentials-view.component.html              |  1 +
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.html b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.html
index 44d8a21d3c..485f8f7985 100644
--- a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.html
+++ b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.html
@@ -12,7 +12,13 @@
 
     <bit-form-field>
       <bit-label>{{ "number" | i18n }}</bit-label>
-      <input id="cardNumber" bitInput formControlName="number" type="password" />
+      <input
+        id="cardNumber"
+        bitInput
+        formControlName="number"
+        type="password"
+        class="tw-font-mono"
+      />
       <button
         type="button"
         bitIconButton
@@ -54,7 +60,7 @@
 
     <bit-form-field disableMargin>
       <bit-label>{{ "securityCode" | i18n }}</bit-label>
-      <input id="cardCode" bitInput formControlName="code" type="password" />
+      <input id="cardCode" bitInput formControlName="code" type="password" class="tw-font-mono" />
       <button
         type="button"
         bitIconButton
diff --git a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
index 0ab059b09c..63941c6a46 100644
--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
+++ b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
@@ -38,6 +38,7 @@
             formControlName="value"
             type="password"
             data-testid="custom-hidden-field"
+            class="tw-font-mono"
           />
           <button
             type="button"
diff --git a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html
index b91258a218..e31be492f9 100644
--- a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html
+++ b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html
@@ -22,7 +22,7 @@
 
     <bit-form-field>
       <bit-label>{{ "password" | i18n }}</bit-label>
-      <input bitInput formControlName="password" type="password" />
+      <input bitInput formControlName="password" type="password" class="tw-font-mono" />
       <bit-hint *ngIf="loginDetailsForm.controls.password.enabled">
         <ng-container *ngIf="newPasswordGenerated">
           {{ "securePasswordGenerated" | i18n }}
@@ -106,7 +106,7 @@
           <p>{{ (canCaptureTotp ? "totpHelperWithCapture" : "totpHelper") | i18n }}</p>
         </bit-popover>
       </bit-label>
-      <input bitInput formControlName="totp" type="password" />
+      <input bitInput formControlName="totp" type="password" class="tw-font-mono" />
       <button
         type="button"
         bitIconButton
diff --git a/libs/vault/src/cipher-view/card-details/card-details-view.component.html b/libs/vault/src/cipher-view/card-details/card-details-view.component.html
index 051a812888..4f4a509c0a 100644
--- a/libs/vault/src/cipher-view/card-details/card-details-view.component.html
+++ b/libs/vault/src/cipher-view/card-details/card-details-view.component.html
@@ -23,6 +23,7 @@
         [value]="card.number"
         aria-readonly="true"
         data-testid="cardholder-number"
+        class="tw-font-mono"
       />
       <button
         bitSuffix
@@ -63,6 +64,7 @@
         [value]="card.code"
         aria-readonly="true"
         data-testid="cardholder-code"
+        class="tw-font-mono"
       />
       <button
         bitSuffix
diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
index bd2c6e7223..b82b2e7a8a 100644
--- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
+++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
@@ -25,7 +25,14 @@
       </bit-form-field>
       <bit-form-field *ngIf="field.type === fieldType.Hidden" [disableReadOnlyBorder]="last">
         <bit-label>{{ field.name }}</bit-label>
-        <input readonly bitInput type="password" [value]="field.value" aria-readonly="true" />
+        <input
+          readonly
+          bitInput
+          type="password"
+          [value]="field.value"
+          aria-readonly="true"
+          class="tw-font-mono"
+        />
         <button
           bitSuffix
           type="button"
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
index 423bd57dfb..0bee6d30eb 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
@@ -35,6 +35,7 @@
         [value]="cipher.login.password"
         aria-readonly="true"
         data-testid="login-password"
+        class="tw-font-mono"
       />
       <button
         *ngIf="cipher.viewPassword && passwordRevealed"