Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-23 21:31:29 +01:00
Code Issues Projects Releases Wiki Activity

PM-15591 UI is showing when mp reprompt is on (#12515)

Browse Source 
* 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.
This commit is contained in:
Daniel Riera 2024-12-27 09:27:53 -05:00 committed by GitHub
parent f434334a88
commit 7d772f1165
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
View File

@ -5,7 +5,7 @@ import "lit/polyfill-support.js";
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status"; import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
import { EVENTS, UPDATE_PASSKEYS_HEADINGS_ON_SCROLL } from "@bitwarden/common/autofill/constants"; 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 { InlineMenuCipherData } from "../../../../background/abstractions/overlay.background";
import { InlineMenuFillTypes } from "../../../../enums/autofill-overlay.enum"; import { InlineMenuFillTypes } from "../../../../enums/autofill-overlay.enum";
@ -1186,7 +1186,7 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
} }
if (cipher.login?.totpField && cipher.login?.totp) { 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 subTitleText = this.getSubTitleText(cipher);
const cipherSubtitleElement = this.buildCipherSubtitleElement(subTitleText); const cipherSubtitleElement = this.buildCipherSubtitleElement(subTitleText);
@ -1214,7 +1214,11 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
* @param totp - The TOTP code to display. * @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) { if (!totpCode) {
return null; return null;
} }
@ -1236,8 +1240,9 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
} }
const totpCodeSpan = document.createElement("span"); const totpCodeSpan = document.createElement("span");
totpCodeSpan.classList.add("cipher-subtitle"); totpCodeSpan.classList.toggle("cipher-subtitle");
totpCodeSpan.textContent = formattedTotpCode; totpCodeSpan.classList.toggle("masked-totp", !!reprompt);
totpCodeSpan.textContent = reprompt ? "●●●●●●" : formattedTotpCode;
totpCodeSpan.setAttribute("aria-label", this.getTranslation("totpCodeAria")); totpCodeSpan.setAttribute("aria-label", this.getTranslation("totpCodeAria"));
totpCodeSpan.setAttribute("data-testid", "totp-code"); totpCodeSpan.setAttribute("data-testid", "totp-code");
containerElement.appendChild(totpCodeSpan); containerElement.appendChild(totpCodeSpan);

5
apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss
View File

@ -404,6 +404,11 @@ body * {
color: themed("mutedTextColor"); color: themed("mutedTextColor");
} }
&.masked-totp {
font-size: 0.875rem;
letter-spacing: 0.2rem;
}
&--passkey { &--passkey {
display: flex; display: flex;
align-content: center; align-content: center;