nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Hide recovery key when re-entering it while creating or changing it (#30499)

Browse Source 
* Hide recovery key when asked to re-enter it when creating or changing key

* Use align-self to centre the eye icon

Co-authored-by: R Midhun Suresh <hi@midhun.dev>

* Use CSS vars for padding

Co-authored-by: R Midhun Suresh <hi@midhun.dev>

* Use CSS classes to avoid needing the highly specific rule

* Use a Compound variable for border width

* Add classes to snapshots

* Update screenshots

---------

Co-authored-by: R Midhun Suresh <hi@midhun.dev>
This commit is contained in:
Andy Balaam
2025-08-14 16:02:10 +01:00
committed by GitHub
parent 0c498a66b1
commit 362c7d2aac
6 changed files with 99 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-2-encryption-tab-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-3-encryption-tab-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 26 KiB

23
res/css/views/settings/encryption/_ChangeRecoveryKey.pcss
View File

@@ -68,5 +68,28 @@
display: flex;
flex-direction: column;
gap: var(--cpd-space-8x);
.mx_KeyForm_password {
> input[name="recoveryKey"] {
/*
* From figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77506&t=d82NdRBDoKsUe1C9-4
*/
height: 70px;
padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x);
border: var(--cpd-border-width-1) solid;
border-radius: 8px;
margin: 0px;
}
> button {
/*
* See figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77506&t=d82NdRBDoKsUe1C9-4
* Avoid stretching the hide/show symbol to the height of the input, and centre it vertically.
*/
height: 24.5px;
padding: var(--cpd-space-1x);
align-self: center;
}
}
}
}

8
src/components/views/settings/encryption/ChangeRecoveryKey.tsx
View File

@@ -13,9 +13,9 @@ import {
Field,
IconButton,
Label,
PasswordControl,
Root,
Text,
TextControl,
} from "@vector-im/compound-web";
import CopyIcon from "@vector-im/compound-design-tokens/assets/web/icons/copy";
import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
@@ -350,7 +350,11 @@ function KeyForm({ onCancelClick, onSubmit, recoveryKey, submitButtonLabel }: Ke
<Field name="recoveryKey" serverInvalid={isKeyInvalidAndFilled}>
<Label>{_t("settings|encryption|recovery|enter_recovery_key")}</Label>
<TextControl required={true} />
<PasswordControl
required={true}
title={_t("settings|encryption|recovery|enter_recovery_key")}
className="mx_KeyForm_password mx_no_textinput"
/>
{isKeyInvalidAndFilled && (
<ErrorMessage>{_t("settings|encryption|recovery|enter_key_error")}</ErrorMessage>
)}

4
test/unit-tests/components/views/settings/encryption/ChangeRecoveryKey-test.tsx
View File

@@ -96,7 +96,7 @@ describe("<ChangeRecoveryKey />", () => {
const finishButton = screen.getByRole("button", { name: "Finish set up" });
expect(finishButton).toHaveAttribute("aria-disabled", "true");
const input = screen.getByRole("textbox");
const input = screen.getByTitle("Enter recovery key");
// If the user enters an incorrect recovery key, the finish button should be disabled
// and we display an error message
await userEvent.type(input, "wrong recovery key");
@@ -130,7 +130,7 @@ describe("<ChangeRecoveryKey />", () => {
await waitFor(() => expect(screen.getByText("Enter your recovery key to confirm")).toBeInTheDocument());
const finishButton = screen.getByRole("button", { name: "Finish set up" });
const input = screen.getByRole("textbox");
const input = screen.getByTitle("Enter recovery key");
await userEvent.type(input, "encoded private key");
await user.click(finishButton);

86
test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
View File

@@ -260,13 +260,38 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
>
Enter recovery key
</label>
<input
class="_control_sqdq4_10"
id="radix-«r0»"
name="recoveryKey"
required=""
title=""
/>
<div
class="_container_1s836_8 mx_KeyForm_password mx_no_textinput"
id="«r1»"
>
<input
class="_control_sqdq4_10 _control_1s836_13"
id="radix-«r0»"
name="recoveryKey"
required=""
title="Enter recovery key"
type="password"
/>
<button
aria-controls="«r1»"
aria-labelledby="«r2»"
class="_action_1s836_24"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m16.1 13.3-1.45-1.45q.225-1.175-.675-2.2t-2.325-.8L10.2 7.4q.424-.2.863-.3A4.2 4.2 0 0 1 12 7q1.875 0 3.188 1.312Q16.5 9.625 16.5 11.5q0 .5-.1.938t-.3.862m3.2 3.15-1.45-1.4a11 11 0 0 0 1.688-1.588A9 9 0 0 0 20.8 11.5q-1.25-2.524-3.588-4.013Q14.875 6 12 6q-.724 0-1.425.1a10 10 0 0 0-1.375.3L7.65 4.85A11.1 11.1 0 0 1 12 4q3.575 0 6.425 1.887T22.7 10.8a.8.8 0 0 1 .1.313q.025.188.025.387a2 2 0 0 1-.125.7 10.9 10.9 0 0 1-3.4 4.25m-.2 5.45-3.5-3.45q-.874.274-1.762.413Q12.95 19 12 19q-3.575 0-6.425-1.887T1.3 12.2a.8.8 0 0 1-.1-.312 3 3 0 0 1 0-.763.8.8 0 0 1 .1-.3Q1.825 9.7 2.55 8.75A13.3 13.3 0 0 1 4.15 7L2.075 4.9a.93.93 0 0 1-.275-.688q0-.412.3-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275l17 17q.275.275.288.688a.93.93 0 0 1-.288.712.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275M5.55 8.4q-.725.65-1.325 1.425A9 9 0 0 0 3.2 11.5q1.25 2.524 3.588 4.012T12 17q.5 0 .975-.062.475-.063.975-.138l-.9-.95q-.274.075-.525.113A3.5 3.5 0 0 1 12 16q-1.875 0-3.187-1.312Q7.5 13.375 7.5 11.5q0-.274.038-.525.037-.25.112-.525z"
/>
</svg>
</button>
</div>
</div>
<div
class="mx_EncryptionCard_buttons"
@@ -396,19 +421,44 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
>
Enter recovery key
</label>
<input
aria-describedby="radix-«r1»"
aria-invalid="true"
class="_control_sqdq4_10"
data-invalid="true"
id="radix-«r0»"
name="recoveryKey"
required=""
title=""
/>
<div
class="_container_1s836_8 mx_KeyForm_password mx_no_textinput"
id="«r1»"
>
<input
aria-describedby="radix-«r8»"
aria-invalid="true"
class="_control_sqdq4_10 _control_1s836_13"
data-invalid="true"
id="radix-«r0»"
name="recoveryKey"
required=""
title="Enter recovery key"
type="password"
/>
<button
aria-controls="«r1»"
aria-labelledby="«r2»"
class="_action_1s836_24"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m16.1 13.3-1.45-1.45q.225-1.175-.675-2.2t-2.325-.8L10.2 7.4q.424-.2.863-.3A4.2 4.2 0 0 1 12 7q1.875 0 3.188 1.312Q16.5 9.625 16.5 11.5q0 .5-.1.938t-.3.862m3.2 3.15-1.45-1.4a11 11 0 0 0 1.688-1.588A9 9 0 0 0 20.8 11.5q-1.25-2.524-3.588-4.013Q14.875 6 12 6q-.724 0-1.425.1a10 10 0 0 0-1.375.3L7.65 4.85A11.1 11.1 0 0 1 12 4q3.575 0 6.425 1.887T22.7 10.8a.8.8 0 0 1 .1.313q.025.188.025.387a2 2 0 0 1-.125.7 10.9 10.9 0 0 1-3.4 4.25m-.2 5.45-3.5-3.45q-.874.274-1.762.413Q12.95 19 12 19q-3.575 0-6.425-1.887T1.3 12.2a.8.8 0 0 1-.1-.312 3 3 0 0 1 0-.763.8.8 0 0 1 .1-.3Q1.825 9.7 2.55 8.75A13.3 13.3 0 0 1 4.15 7L2.075 4.9a.93.93 0 0 1-.275-.688q0-.412.3-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275l17 17q.275.275.288.688a.93.93 0 0 1-.288.712.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275M5.55 8.4q-.725.65-1.325 1.425A9 9 0 0 0 3.2 11.5q1.25 2.524 3.588 4.012T12 17q.5 0 .975-.062.475-.063.975-.138l-.9-.95q-.274.075-.525.113A3.5 3.5 0 0 1 12 16q-1.875 0-3.187-1.312Q7.5 13.375 7.5 11.5q0-.274.038-.525.037-.25.112-.525z"
/>
</svg>
</button>
</div>
<span
class="_message_19upo_85 _error-message_19upo_95"
id="radix-«r1»"
id="radix-«r8»"
>
<svg
fill="currentColor"