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

* 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 15:02:10 +00:00
committed by GitHub
co-authored by R Midhun Suresh
parent 0c498a66b1
commit 362c7d2aac
6 changed files with 99 additions and 22 deletions
@@ -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);