[PM-12998] View Cipher: Color Password (#12354)

* show color password for visible passwords in vault view

- The password input will be visually hidden
- Adds tests for the login credentials component

* formatting

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -28,17 +28,34 @@
       ></button>
     </bit-form-field>
     <bit-form-field *ngIf="cipher.login.password">
-      <bit-label [appTextDrag]="cipher.login.password">{{ "password" | i18n }}</bit-label>
+      <bit-label [appTextDrag]="cipher.login.password" id="password-label">
+        {{ "password" | i18n }}
+      </bit-label>
       <input
         id="password"
+        [ngClass]="{ 'tw-hidden': passwordRevealed }"
         readonly
         bitInput
         type="password"
         [value]="cipher.login.password"
         aria-readonly="true"
         data-testid="login-password"
-        class="tw-font-mono"
       />
+      <!-- Use a wrapping span to "recreate" a readonly input as close as possible -->
+      <span
+        *ngIf="passwordRevealed"
+        role="textbox"
+        tabindex="0"
+        data-testid="login-password-color"
+        aria-readonly="true"
+        [attr.aria-label]="cipher.login.password"
+        aria-labelledby="password-label"
+      >
+        <bit-color-password
+          class="tw-font-mono"
+          [password]="cipher.login.password"
+        ></bit-color-password>
+      </span>
       <button
         *ngIf="cipher.viewPassword && passwordRevealed"
         bitIconButton="bwi-numbered-list"
@@ -74,7 +91,7 @@
     </bit-form-field>
     <div
       *ngIf="showPasswordCount && passwordRevealed"
-      [ngClass]="{ 'tw-mt-3': !cipher.login.totp }"
+      [ngClass]="{ 'tw-mt-3': !cipher.login.totp, 'tw-mb-2': true }"
     >
       <bit-color-password
         [password]="cipher.login.password"