mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-21 16:18:28 +01:00
enhancement: UI for multiple totp elements (#12404)
* enhancement: UI for multiple totp elements * add tests * update snapshots * update obsolete snapshots * Update apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts Co-authored-by: Jonathan Prusik <jprusik@users.noreply.github.com> --------- Co-authored-by: Jonathan Prusik <jprusik@users.noreply.github.com>
This commit is contained in:
Daniel Riera
GitHub
parent
6ad35e0871
commit
cc06e1eff3
@ -2813,6 +2813,254 @@ exports[`AutofillInlineMenuList initAutofillInlineMenuList the list of ciphers f
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`AutofillInlineMenuList initAutofillInlineMenuList the list of ciphers for an authenticated user renders correctly when there are multiple TOTP elements with username displayed 1`] = `
|
||||
<div
|
||||
class="inline-menu-list-container theme_light"
|
||||
>
|
||||
<ul
|
||||
class="inline-menu-list-actions"
|
||||
role="list"
|
||||
>
|
||||
<li
|
||||
class="inline-menu-list-actions-item"
|
||||
role="listitem"
|
||||
>
|
||||
<div
|
||||
class="cipher-container"
|
||||
>
|
||||
<button
|
||||
aria-description="username: user1"
|
||||
aria-label="fillCredentialsFor website login 1"
|
||||
class="fill-cipher-button inline-menu-list-action"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="cipher-icon"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 29 29"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<circle
|
||||
class="circle-color"
|
||||
cx="14.5"
|
||||
cy="14.5"
|
||||
fill="none"
|
||||
r="12.5"
|
||||
stroke-dasharray="78.5"
|
||||
stroke-dashoffset="78.5"
|
||||
stroke-width="3"
|
||||
style="stroke-dashoffset: NaN;"
|
||||
transform="rotate(-90 14.5 14.5)"
|
||||
/>
|
||||
|
||||
|
||||
<circle
|
||||
class="circle-color"
|
||||
cx="14.5"
|
||||
cy="14.5"
|
||||
fill="none"
|
||||
r="14"
|
||||
stroke-width="1"
|
||||
/>
|
||||
|
||||
|
||||
</svg>
|
||||
<span
|
||||
aria-label=""
|
||||
bittypography="helper"
|
||||
class="totp-sec-span"
|
||||
>
|
||||
NaN
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="cipher-details"
|
||||
>
|
||||
<span
|
||||
aria-label=""
|
||||
class="cipher-name"
|
||||
/>
|
||||
<span
|
||||
class="cipher-subtitle"
|
||||
title="user1"
|
||||
>
|
||||
user1
|
||||
</span>
|
||||
<span
|
||||
aria-label=""
|
||||
class="cipher-subtitle"
|
||||
data-testid="totp-code"
|
||||
>
|
||||
123 456
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-label="view website login 1, opensInANewWindow"
|
||||
class="view-cipher-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#a)"
|
||||
>
|
||||
<path
|
||||
d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
|
||||
fill="#175DDC"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="a"
|
||||
>
|
||||
<path
|
||||
d="M0 .113h20v19.773H0z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="inline-menu-list-actions-item"
|
||||
role="listitem"
|
||||
>
|
||||
<div
|
||||
class="cipher-container"
|
||||
>
|
||||
<button
|
||||
aria-description="username: user2"
|
||||
aria-label="fillCredentialsFor website login 2"
|
||||
class="fill-cipher-button inline-menu-list-action"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="cipher-icon"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 29 29"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<circle
|
||||
class="circle-color"
|
||||
cx="14.5"
|
||||
cy="14.5"
|
||||
fill="none"
|
||||
r="12.5"
|
||||
stroke-dasharray="78.5"
|
||||
stroke-dashoffset="78.5"
|
||||
stroke-width="3"
|
||||
style="stroke-dashoffset: NaN;"
|
||||
transform="rotate(-90 14.5 14.5)"
|
||||
/>
|
||||
|
||||
|
||||
<circle
|
||||
class="circle-color"
|
||||
cx="14.5"
|
||||
cy="14.5"
|
||||
fill="none"
|
||||
r="14"
|
||||
stroke-width="1"
|
||||
/>
|
||||
|
||||
|
||||
</svg>
|
||||
<span
|
||||
aria-label=""
|
||||
bittypography="helper"
|
||||
class="totp-sec-span"
|
||||
>
|
||||
NaN
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="cipher-details"
|
||||
>
|
||||
<span
|
||||
aria-label=""
|
||||
class="cipher-name"
|
||||
/>
|
||||
<span
|
||||
class="cipher-subtitle"
|
||||
title="user2"
|
||||
>
|
||||
user2
|
||||
</span>
|
||||
<span
|
||||
aria-label=""
|
||||
class="cipher-subtitle"
|
||||
data-testid="totp-code"
|
||||
>
|
||||
654 321
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-label="view website login 2, opensInANewWindow"
|
||||
class="view-cipher-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#a)"
|
||||
>
|
||||
<path
|
||||
d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
|
||||
fill="#175DDC"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="a"
|
||||
>
|
||||
<path
|
||||
d="M0 .113h20v19.773H0z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`AutofillInlineMenuList initAutofillInlineMenuList the locked inline menu for an unauthenticated user creates the views for the locked inline menu 1`] = `
|
||||
<div
|
||||
class="inline-menu-list-container theme_light"
|
||||
|
||||
@ -140,6 +140,47 @@ describe("AutofillInlineMenuList", () => {
|
||||
expect(autofillInlineMenuList["inlineMenuListContainer"]).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders correctly when there are multiple TOTP elements with username displayed", async () => {
|
||||
const totpCipher1 = createAutofillOverlayCipherDataMock(1, {
|
||||
type: CipherType.Login,
|
||||
login: {
|
||||
totp: "123456",
|
||||
totpField: true,
|
||||
username: "user1",
|
||||
},
|
||||
});
|
||||
|
||||
const totpCipher2 = createAutofillOverlayCipherDataMock(2, {
|
||||
type: CipherType.Login,
|
||||
login: {
|
||||
totp: "654321",
|
||||
totpField: true,
|
||||
username: "user2",
|
||||
},
|
||||
});
|
||||
|
||||
postWindowMessage(
|
||||
createInitAutofillInlineMenuListMessageMock({
|
||||
inlineMenuFillType: CipherType.Login,
|
||||
ciphers: [totpCipher1, totpCipher2],
|
||||
}),
|
||||
);
|
||||
|
||||
await flushPromises();
|
||||
const checkSubtitleElement = (username: string) => {
|
||||
const subtitleElement = autofillInlineMenuList["inlineMenuListContainer"].querySelector(
|
||||
`span.cipher-subtitle[title="${username}"]`,
|
||||
);
|
||||
expect(subtitleElement).not.toBeNull();
|
||||
expect(subtitleElement.textContent).toBe(username);
|
||||
};
|
||||
|
||||
checkSubtitleElement("user1");
|
||||
checkSubtitleElement("user2");
|
||||
|
||||
expect(autofillInlineMenuList["inlineMenuListContainer"]).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("creates the view for a totp field", () => {
|
||||
postWindowMessage(
|
||||
createInitAutofillInlineMenuListMessageMock({
|
||||
|
||||
@ -1163,7 +1163,7 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
|
||||
}
|
||||
|
||||
if (cipher.login?.totpField && cipher.login?.totp) {
|
||||
return this.buildTotpElement(cipher.login?.totp);
|
||||
return this.buildTotpElement(cipher.login?.totp, cipher.login?.username);
|
||||
}
|
||||
const subTitleText = this.getSubTitleText(cipher);
|
||||
const cipherSubtitleElement = this.buildCipherSubtitleElement(subTitleText);
|
||||
@ -1174,13 +1174,24 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
|
||||
return cipherDetailsElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if there is more than one TOTP element being displayed.
|
||||
*
|
||||
* @returns {boolean} - Returns true if more than one TOTP element is displayed, otherwise false.
|
||||
*/
|
||||
private multipleTotpElements(): boolean {
|
||||
return (
|
||||
this.ciphers.filter((cipher) => cipher.login?.totpField && cipher.login?.totp).length > 1
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds a TOTP element for a given TOTP code.
|
||||
*
|
||||
* @param totp - The TOTP code to display.
|
||||
*/
|
||||
|
||||
private buildTotpElement(totpCode: string): HTMLDivElement | null {
|
||||
private buildTotpElement(totpCode: string, username?: string): HTMLDivElement | null {
|
||||
if (!totpCode) {
|
||||
return null;
|
||||
}
|
||||
@ -1196,12 +1207,17 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
|
||||
|
||||
containerElement.appendChild(totpHeading);
|
||||
|
||||
const subtitleElement = document.createElement("span");
|
||||
subtitleElement.classList.add("cipher-subtitle");
|
||||
subtitleElement.textContent = formattedTotpCode;
|
||||
subtitleElement.setAttribute("aria-label", this.getTranslation("totpCodeAria"));
|
||||
subtitleElement.setAttribute("data-testid", "totp-code");
|
||||
containerElement.appendChild(subtitleElement);
|
||||
if (this.multipleTotpElements() && username) {
|
||||
const usernameSubtitle = this.buildCipherSubtitleElement(username);
|
||||
containerElement.appendChild(usernameSubtitle);
|
||||
}
|
||||
|
||||
const totpCodeSpan = document.createElement("span");
|
||||
totpCodeSpan.classList.add("cipher-subtitle");
|
||||
totpCodeSpan.textContent = formattedTotpCode;
|
||||
totpCodeSpan.setAttribute("aria-label", this.getTranslation("totpCodeAria"));
|
||||
totpCodeSpan.setAttribute("data-testid", "totp-code");
|
||||
containerElement.appendChild(totpCodeSpan);
|
||||
|
||||
return containerElement;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user