Skip to content

Conversation

@andybalaam
Copy link
Member

Improve one of the cases for Web described in element-hq/element-meta#2888

When prompting the user for a recovery key in order to verify (either on login or later), hide the key by default and allow the user to show it:

image image image

We do this by using the Compound PasswordInput component.

The designs for this are here: https://www.figma.com/design/ZodBLtGnKmRTGJo5SGLnH3/ER-137--Excluding-Insecure-Devices?node-id=102-43729&t=QmewENUd7f6Tmw9U-1

This PR does not bring us fully into line with the designs, but I think it is a step forward:

  • Improvement: hides the recovery key and allows showing it
  • Improvement: when the localazy PR is merged, shows the correct title "Enter your recovery key" instead of just "Recovery key"
  • Worse: restricts text entry to a single line
  • Still wrong: does not show the text "Recovery key" above the entry box
  • Still wrong: does not make the box text red when the recovery key is invalid

I think fixing the remaining problems would require creating a new Compound component, which is probably out of my scope for this task.

(With thanks to @meramsey for working on this under #30393 , which this PR supersedes.)

@andybalaam andybalaam added the T-Task Tasks for the team like planning label Aug 4, 2025
@andybalaam
Copy link
Member Author

Related: #30174

Copy link
Member

@uhoreg uhoreg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks OK code-wise from a crypto standpoint. In the screenshots, it looks like the border around the input is missing sometimes, but I assume that's either a bad screenshot, or my computer is displaying it weirdly. (The screenshots look a bit blurry in general.)

@andybalaam
Copy link
Member Author

In the screenshots, it looks like the border around the input is missing sometimes

Thanks, fixed in c6400ca

@andybalaam andybalaam force-pushed the andybalaam/hide-recovery-key branch from c6400ca to 0e192d9 Compare August 5, 2025 13:31
@andybalaam andybalaam enabled auto-merge August 5, 2025 13:31
@andybalaam andybalaam added this pull request to the merge queue Aug 5, 2025
Merged via the queue into develop with commit c1a163c Aug 5, 2025
35 checks passed
@andybalaam andybalaam deleted the andybalaam/hide-recovery-key branch August 5, 2025 15:18
Dileep9999 pushed a commit to hemanth-nag/element-web that referenced this pull request Oct 8, 2025
* Separate security_key_title from security_key_label since they differ in designs

See https://www.figma.com/design/ZodBLtGnKmRTGJo5SGLnH3/ER-137--Excluding-Insecure-Devices?node-id=92-8818&t=02JILBe2n7sx7ljU-1

In parallel with this, I have updated security_key_title in localazy.

* Hide recovery key on entry screen after login
snowping pushed a commit to Novaloop-AG/element-web that referenced this pull request Dec 30, 2025
* Separate security_key_title from security_key_label since they differ in designs

See https://www.figma.com/design/ZodBLtGnKmRTGJo5SGLnH3/ER-137--Excluding-Insecure-Devices?node-id=92-8818&t=02JILBe2n7sx7ljU-1

In parallel with this, I have updated security_key_title in localazy.

* Hide recovery key on entry screen after login
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

T-Task Tasks for the team like planning

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants