From 7d772f116576f07af1d2f482a44fada3eb446d2e Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Fri, 27 Dec 2024 09:27:53 -0500
Subject: [PATCH] PM-15591 UI is showing when mp reprompt is on (#12515)

* enhancement: UI for multiple totp elements

* add tests

* update snapshots

* update obsolete snapshots

* PM-15593
- Added conditional statement for text displayed in the totp code span
- Added styling to the returned text

* remove method, hard code string.
---
 .../pages/list/autofill-inline-menu-list.ts       | 15 ++++++++++-----
 .../overlay/inline-menu/pages/list/list.scss      |  5 +++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts b/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
index 826612ecbb4..acb01594cc6 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
@@ -5,7 +5,7 @@ import "lit/polyfill-support.js";
 
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { EVENTS, UPDATE_PASSKEYS_HEADINGS_ON_SCROLL } from "@bitwarden/common/autofill/constants";
-import { CipherType } from "@bitwarden/common/vault/enums";
+import { CipherRepromptType, CipherType } from "@bitwarden/common/vault/enums";
 
 import { InlineMenuCipherData } from "../../../../background/abstractions/overlay.background";
 import { InlineMenuFillTypes } from "../../../../enums/autofill-overlay.enum";
@@ -1186,7 +1186,7 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
     }
 
     if (cipher.login?.totpField && cipher.login?.totp) {
-      return this.buildTotpElement(cipher.login?.totp, cipher.login?.username);
+      return this.buildTotpElement(cipher.login?.totp, cipher.login?.username, cipher.reprompt);
     }
     const subTitleText = this.getSubTitleText(cipher);
     const cipherSubtitleElement = this.buildCipherSubtitleElement(subTitleText);
@@ -1214,7 +1214,11 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
    * @param totp - The TOTP code to display.
    */
 
-  private buildTotpElement(totpCode: string, username?: string): HTMLDivElement | null {
+  private buildTotpElement(
+    totpCode: string,
+    username: string,
+    reprompt: CipherRepromptType,
+  ): HTMLDivElement | null {
     if (!totpCode) {
       return null;
     }
@@ -1236,8 +1240,9 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
     }
 
     const totpCodeSpan = document.createElement("span");
-    totpCodeSpan.classList.add("cipher-subtitle");
-    totpCodeSpan.textContent = formattedTotpCode;
+    totpCodeSpan.classList.toggle("cipher-subtitle");
+    totpCodeSpan.classList.toggle("masked-totp", !!reprompt);
+    totpCodeSpan.textContent = reprompt ? "●●●●●●" : formattedTotpCode;
     totpCodeSpan.setAttribute("aria-label", this.getTranslation("totpCodeAria"));
     totpCodeSpan.setAttribute("data-testid", "totp-code");
     containerElement.appendChild(totpCodeSpan);
diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss b/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss
index 0d1bf3358cd..d0875cfe427 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss
@@ -404,6 +404,11 @@ body * {
       color: themed("mutedTextColor");
     }
 
+    &.masked-totp {
+      font-size: 0.875rem;
+      letter-spacing: 0.2rem;
+    }
+
     &--passkey {
       display: flex;
       align-content: center;