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>

res/css/views/settings/encryption/_ChangeRecoveryKey.pcss

@@ -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;
+            }
+        }
     }
 }

src/components/views/settings/encryption/ChangeRecoveryKey.tsx

@@ -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>
                 )}

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

@@ -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);
 

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

@@ -260,13 +260,38 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
         >
           Enter recovery key
         </label>
-        <input
+        <div
-          class="_control_sqdq4_10"
+          class="_container_1s836_8 mx_KeyForm_password mx_no_textinput"
-          id="radix-«r0»"
+          id="«r1»"
-          name="recoveryKey"
+        >
-          required=""
+          <input
-          title=""
+            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
+        <div
-          aria-describedby="radix-«r1»"
+          class="_container_1s836_8 mx_KeyForm_password mx_no_textinput"
-          aria-invalid="true"
+          id="«r1»"
-          class="_control_sqdq4_10"
+        >
-          data-invalid="true"
+          <input
-          id="radix-«r0»"
+            aria-describedby="radix-«r8»"
-          name="recoveryKey"
+            aria-invalid="true"
-          required=""
+            class="_control_sqdq4_10 _control_1s836_13"
-          title=""
+            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"