Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MidhunSureshR merged 7 commits into from
Aug 14, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
12c1d6c
Hide recovery key when asked to re-enter it when creating or changing…
andybalaam Aug 5, 2025
1df18e7
Use align-self to centre the eye icon
andybalaam Aug 8, 2025
fc78edd
Use CSS vars for padding
andybalaam Aug 8, 2025
792e438
Use CSS classes to avoid needing the highly specific rule
andybalaam Aug 8, 2025
68e3ec9
Use a Compound variable for border width
andybalaam Aug 8, 2025
6af21d6
Add classes to snapshots
andybalaam Aug 8, 2025
11cde4d
Update screenshots
andybalaam Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...ings/encryption-user-tab/recovery.spec.ts/change-key-2-encryption-tab-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ings/encryption-user-tab/recovery.spec.ts/set-up-key-3-encryption-tab-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions res/css/views/settings/encryption/_ChangeRecoveryKey.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 6 additions & 2 deletions src/components/views/settings/encryption/ChangeRecoveryKey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>
)}
Expand Down
4 changes: 2 additions & 2 deletions test/unit-tests/components/views/settings/encryption/ChangeRecoveryKey-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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);

Expand Down
86 changes: 68 additions & 18 deletions ...-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading