[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

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

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"

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

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

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"

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"