mirror of
https://github.com/bitwarden/browser.git
synced 2025-01-02 18:17:46 +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>
|
</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`] = `
|
exports[`AutofillInlineMenuList initAutofillInlineMenuList the locked inline menu for an unauthenticated user creates the views for the locked inline menu 1`] = `
|
||||||
<div
|
<div
|
||||||
class="inline-menu-list-container theme_light"
|
class="inline-menu-list-container theme_light"
|
||||||
|
|||||||
@ -140,6 +140,47 @@ describe("AutofillInlineMenuList", () => {
|
|||||||
expect(autofillInlineMenuList["inlineMenuListContainer"]).toMatchSnapshot();
|
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", () => {
|
it("creates the view for a totp field", () => {
|
||||||
postWindowMessage(
|
postWindowMessage(
|
||||||
createInitAutofillInlineMenuListMessageMock({
|
createInitAutofillInlineMenuListMessageMock({
|
||||||
|
|||||||
@ -1163,7 +1163,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);
|
return this.buildTotpElement(cipher.login?.totp, cipher.login?.username);
|
||||||
}
|
}
|
||||||
const subTitleText = this.getSubTitleText(cipher);
|
const subTitleText = this.getSubTitleText(cipher);
|
||||||
const cipherSubtitleElement = this.buildCipherSubtitleElement(subTitleText);
|
const cipherSubtitleElement = this.buildCipherSubtitleElement(subTitleText);
|
||||||
@ -1174,13 +1174,24 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
|
|||||||
return cipherDetailsElement;
|
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.
|
* Builds a TOTP element for a given TOTP code.
|
||||||
*
|
*
|
||||||
* @param totp - The TOTP code to display.
|
* @param totp - The TOTP code to display.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
private buildTotpElement(totpCode: string): HTMLDivElement | null {
|
private buildTotpElement(totpCode: string, username?: string): HTMLDivElement | null {
|
||||||
if (!totpCode) {
|
if (!totpCode) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -1196,12 +1207,17 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
|
|||||||
|
|
||||||
containerElement.appendChild(totpHeading);
|
containerElement.appendChild(totpHeading);
|
||||||
|
|
||||||
const subtitleElement = document.createElement("span");
|
if (this.multipleTotpElements() && username) {
|
||||||
subtitleElement.classList.add("cipher-subtitle");
|
const usernameSubtitle = this.buildCipherSubtitleElement(username);
|
||||||
subtitleElement.textContent = formattedTotpCode;
|
containerElement.appendChild(usernameSubtitle);
|
||||||
subtitleElement.setAttribute("aria-label", this.getTranslation("totpCodeAria"));
|
}
|
||||||
subtitleElement.setAttribute("data-testid", "totp-code");
|
|
||||||
containerElement.appendChild(subtitleElement);
|
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;
|
return containerElement;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user