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

andybalaam · 2025-08-05T13:39:18Z

Designs: https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=3138-22732&t=XruM5iERz9LXrEZu-4

More specifically, https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77504&t=yyPcsX3MT0JYSeXz-0

Followup to #30471. Completes the Web part of element-hq/element-meta#2888

… key

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

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

MidhunSureshR

Looks like the screenshot no longer matches

MidhunSureshR

Looks great!

richvdh

From the screenshots in the description, it looks like the text is centered vertically within the box, which looks strange to me. Shouldn't it be at the top, and allow wrapping onto a second line? That seems to be what the Figma designs show.

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

richvdh · 2025-08-13T11:50:54Z

The third screenshot seems to show the control greyed out -- what's that about?

andybalaam · 2025-08-13T11:53:32Z

From the screenshots in the description, it looks like the text is centered vertically within the box, which looks strange to me. Shouldn't it be at the top, and allow wrapping onto a second line? That seems to be what the Figma designs show.

Yes, but to do that I would need to create a new Compound component, which would be a lot more work.

andybalaam · 2025-08-13T11:54:19Z

The third screenshot seems to show the control greyed out -- what's that about?

It's not greyed out - that is just how this component displays text when it is revealed.

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

richvdh

Yes, but to do that I would need to create a new Compound component, which would be a lot more work.

Hrm, sounds like the existing one should be fixed to support multiple lines with correct text and button alignment. (And fix the greying out of the border, while we're there.)

That could happen separately though.

andybalaam · 2025-08-13T12:21:57Z

Hrm, sounds like the existing one should be fixed to support multiple lines with correct text and button alignment. (And fix the greying out of the border, while we're there.)

Yeah, although we'd need a new component specifically for recovery keys, since passwords are intentionally single-line, I assume.

@andybalaam

https://build.opensuse.org/request/show/1302166 by user dheidler + anag_factory - Version 1.11.110 ## ✨ Features * Hide recovery key when re-entering it while creating or changing it (element-hq/element-web#30499). Contributed by @andybalaam. * Add `?no_universal_links=true` to OIDC url so EX doesn't try to handle it (element-hq/element-web#29439). Contributed by @t3chguy. * Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms (element-hq/element-web#30440). Contributed by @langleyd. * Add support for Module API 1.4 (element-hq/element-web#30185). Contributed by @t3chguy. * MVVM - Introduce some helpers for snapshot management (element-hq/element-web#30398). Contributed by @MidhunSureshR. ## 🐛 Bug Fixes *

@andybalaam

https://build.opensuse.org/request/show/1302167 by user dheidler + anag_factory - Version 1.11.110 ## ✨ Features * Hide recovery key when re-entering it while creating or changing it (element-hq/element-web#30499). Contributed by @andybalaam. * Add `?no_universal_links=true` to OIDC url so EX doesn't try to handle it (element-hq/element-web#29439). Contributed by @t3chguy. * Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms (element-hq/element-web#30440). Contributed by @langleyd. * Add support for Module API 1.4 (element-hq/element-web#30185). Contributed by @t3chguy. * MVVM - Introduce some helpers for snapshot management (element-hq/element-web#30398). Contributed by @MidhunSureshR. ## 🐛 Bug Fixes *

@andybalaam

Changes in [1.11.110](https://github.com/element-hq/element-web/releases/tag/v1.11.110) (2025-08-27) ==================================================================================================== * Hide recovery key when re-entering it while creating or changing it ([#30499](element-hq/element-web#30499)). Contributed by @andybalaam. * Add `?no_universal_links=true` to OIDC url so EX doesn't try to handle it ([#29439](element-hq/element-web#29439)). Contributed by @t3chguy. * Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms ([#30440](element-hq/element-web#30440)). Contributed by @langleyd. * Add support for Module API 1.4 ([#30185](element-hq/element-web#30185)). Contributed by @t3chguy. * MVVM - Introduce some helpers for snapshot management ([#30398](element-hq/element-web#30398)). Contributed by @MidhunSureshR. * A11y: move focus to right panel when opened ([#30553](element-hq/element-web#30553)). Contributed by @florianduros. * Fix e2e warning icon should be white ([#30539](element-hq/element-web#30539)). Contributed by @florianduros. * Remove NoOneHere disabled reason. ([#30524](element-hq/element-web#30524)). Contributed by @toger5. * Fix downloading files with authenticated media API ([#30520](element-hq/element-web#30520)). Contributed by @t3chguy. * Fix call permissions check confusion around element call ([#30521](element-hq/element-web#30521)). Contributed by @t3chguy. * Fix line wrap around emoji verification ([#30523](element-hq/element-web#30523)). Contributed by @t3chguy. * Don't highlight redacted events ([#30519](element-hq/element-web#30519)). Contributed by @t3chguy. * Fix matrix.to links not being handled in the app ([#30522](element-hq/element-web#30522)). Contributed by @t3chguy. * Fix issue of new room list taking up the full width ([#30459](element-hq/element-web#30459)). Contributed by @langleyd. * Fix widget persistence in React development mode ([#30509](element-hq/element-web#30509)). Contributed by @robintown. * Fix widget initialization in React development mode ([#30463](element-hq/element-web#30463)). Contributed by @robintown. Changes in [1.11.109](https://github.com/element-hq/element-web/releases/tag/v1.11.109) (2025-08-11) ==================================================================================================== This release supports the upcoming v12 ("hydra") Matrix room version and is necessary to view and participate in these rooms. * [Backport staging] Allow /upgraderoom command without developer mode enabled ([#30529](element-hq/element-web#30529)). Contributed by @RiotRobot. * [Backport staging] Support for creator/owner power level ([#30526](element-hq/element-web#30526)). Contributed by @RiotRobot. * New room list: change icon and label of menu item for to start a DM ([#30470](element-hq/element-web#30470)). Contributed by @florianduros. * Implement the member list with virtuoso ([#29869](element-hq/element-web#29869)). Contributed by @langleyd. * Add labs option for history sharing on invite ([#30313](element-hq/element-web#30313)). Contributed by @richvdh. * Bump wysiwyg to 2.39.0 adding support for pasting rich text content in the Rich Text Edtior ([#30421](element-hq/element-web#30421)). Contributed by @langleyd. * Support `EventShieldReason.MISMATCHED_SENDER` ([#30403](element-hq/element-web#30403)). Contributed by @richvdh. * Change unencrypted and public pills to blue ([#30399](element-hq/element-web#30399)). Contributed by @florianduros. * Change color of public room icon ([#30390](element-hq/element-web#30390)). Contributed by @florianduros. * Script for updating storybook screenshots ([#30340](element-hq/element-web#30340)). Contributed by @dbkr. * Add toggle to hide empty state in devtools ([#30352](element-hq/element-web#30352)). Contributed by @toger5. * [Backport staging] Use userId to filter users in non-federated rooms when showing the InviteDialog ([#30537](element-hq/element-web#30537)). Contributed by @RiotRobot. * [Backport staging] Catch error when encountering invalid m.room.pinned\_events event ([#30536](element-hq/element-web#30536)). Contributed by @RiotRobot. * Update for compatibility with v12 rooms ([#30452](element-hq/element-web#30452)). Contributed by @dbkr. * New room list: fix tooltip on presence ([#30474](element-hq/element-web#30474)). Contributed by @florianduros. * New room list: add tooltip for presence and room status ([#30472](element-hq/element-web#30472)). Contributed by @florianduros. * Fix: Clicking on an item in the member list causes it to scroll to the top rather than show the profile view ([#30455](element-hq/element-web#30455)). Contributed by @langleyd. * Put the 'decrypting' tooltip back ([#30446](element-hq/element-web#30446)). Contributed by @dbkr. * Use server name explicitly for via. ([#30362](element-hq/element-web#30362)). Contributed by @Half-Shot. * fix: replace hardcoded string in poll history dialog ([#30402](element-hq/element-web#30402)). Contributed by @florianduros. * fix: replace hardcoded string on qr code back button ([#30401](element-hq/element-web#30401)). Contributed by @florianduros. * Fix color of icon button with outline ([#30361](element-hq/element-web#30361)). Contributed by @florianduros. Changes in [1.11.108](https://github.com/element-hq/element-web/releases/tag/v1.11.108) (2025-07-30) ==================================================================================================== * [Backport staging] Fix downloaded attachments not being decrypted ([#30434](element-hq/element-web#30434)). Contributed by @RiotRobot. Changes in [1.11.107](https://github.com/element-hq/element-web/releases/tag/v1.11.107) (2025-07-29) ==================================================================================================== * Message preview should show tooltip with the full message on hover ([#30265](element-hq/element-web#30265)). Contributed by @MidhunSureshR. * Support rendering notification badges on platforms that do their own icon overlays ([#30315](element-hq/element-web#30315)). Contributed by @Half-Shot. * Add SubscriptionViewModel base class ([#30297](element-hq/element-web#30297)). Contributed by @dbkr. * Enhancement: Save image on CTRL+S ([#30330](element-hq/element-web#30330)). Contributed by @ioalexander. * Add quote functionality to MessageContextMenu (#29893) ([#30323](element-hq/element-web#30323)). Contributed by @AlirezaMrtz. * Initial structure for shared component views ([#30216](element-hq/element-web#30216)). Contributed by @dbkr. * [Backport staging] Fix e2e shield being invisible in white mode for encrypted room ([#30411](element-hq/element-web#30411)). Contributed by @RiotRobot. * Force ED titlebar color for new room list ([#30332](element-hq/element-web#30332)). Contributed by @florianduros. * Add a background color to left panel for macos titlebar in element desktop ([#30328](element-hq/element-web#30328)). Contributed by @florianduros. * Fix: Prevent page refresh on Enter key in right panel member search ([#30312](element-hq/element-web#30312)). Contributed by @AlirezaMrtz.

…lement-hq#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>

github-actions bot deployed to Netlify August 5, 2025 14:23 View deployment

github-actions bot deployed to EndToEndTests August 5, 2025 14:47 View deployment

Base automatically changed from andybalaam/hide-recovery-key to develop August 5, 2025 15:18

andybalaam added the T-Story label Aug 6, 2025

andybalaam force-pushed the andybalaam/hide-recovery-key-creation branch from 4220e40 to 34b95bc Compare August 6, 2025 09:50

github-actions bot deployed to Netlify August 6, 2025 09:53 View deployment

github-actions bot deployed to EndToEndTests August 6, 2025 10:03 View deployment

andybalaam added T-Enhancement and removed T-Story labels Aug 7, 2025

andybalaam force-pushed the andybalaam/hide-recovery-key-creation branch from 34b95bc to 53000e6 Compare August 7, 2025 10:01

github-actions bot deployed to Netlify August 7, 2025 10:04 View deployment

github-actions bot deployed to EndToEndTests August 7, 2025 10:15 View deployment

Hide recovery key when asked to re-enter it when creating or changing…

12c1d6c

… key

andybalaam force-pushed the andybalaam/hide-recovery-key-creation branch from 53000e6 to 12c1d6c Compare August 7, 2025 10:31

andybalaam marked this pull request as ready for review August 7, 2025 10:31

andybalaam requested review from a team as code owners August 7, 2025 10:31

andybalaam requested review from MidhunSureshR and richvdh August 7, 2025 10:31

github-actions bot deployed to Netlify August 7, 2025 10:35 View deployment

github-actions bot deployed to EndToEndTests August 7, 2025 10:44 View deployment

MidhunSureshR reviewed Aug 8, 2025

View reviewed changes

andybalaam and others added 2 commits August 8, 2025 10:23

Use align-self to centre the eye icon

1df18e7

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

Use CSS vars for padding

fc78edd

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

github-actions bot deployed to Netlify August 8, 2025 09:28 View deployment

github-actions bot deployed to EndToEndTests August 8, 2025 09:38 View deployment

Use CSS classes to avoid needing the highly specific rule

792e438

github-actions bot deployed to Netlify August 8, 2025 14:30 View deployment

Use a Compound variable for border width

68e3ec9

github-actions bot deployed to Netlify August 8, 2025 14:33 View deployment

MidhunSureshR requested changes Aug 11, 2025

View reviewed changes

Update screenshots

11cde4d

github-actions bot deployed to Netlify August 11, 2025 11:16 View deployment

github-actions bot deployed to EndToEndTests August 11, 2025 11:28 View deployment

andybalaam requested a review from MidhunSureshR August 11, 2025 12:09

MidhunSureshR approved these changes Aug 13, 2025

View reviewed changes

MidhunSureshR enabled auto-merge August 13, 2025 09:20

richvdh requested changes Aug 13, 2025

View reviewed changes

res/css/views/settings/encryption/_ChangeRecoveryKey.pcss Show resolved Hide resolved

andybalaam requested a review from richvdh August 13, 2025 11:58

richvdh reviewed Aug 13, 2025

View reviewed changes

res/css/views/settings/encryption/_ChangeRecoveryKey.pcss Show resolved Hide resolved

richvdh reviewed Aug 13, 2025

View reviewed changes

andybalaam requested a review from richvdh August 13, 2025 12:30

richvdh approved these changes Aug 14, 2025

View reviewed changes

MidhunSureshR added this pull request to the merge queue Aug 14, 2025

Merged via the queue into develop with commit 362c7d2 Aug 14, 2025
51 checks passed

MidhunSureshR deleted the andybalaam/hide-recovery-key-creation branch August 14, 2025 15:17

andybalaam mentioned this pull request Aug 15, 2025

Mask recovery key and passphrase input element-hq/element-meta#2888

Closed

t3chguy mentioned this pull request Aug 20, 2025

Hide recovery key when signing in #30603

Closed

This was referenced Oct 6, 2025

New Element Web release v1.12.0 grueneschweiz/element-web-apache#1

Closed

New Element Web release v1.12.0 grueneschweiz/element-web-apache#2

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

andybalaam commented Aug 5, 2025 •

edited by richvdh

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MidhunSureshR left a comment

Uh oh!

MidhunSureshR left a comment

Uh oh!

richvdh left a comment

Uh oh!

Uh oh!

richvdh commented Aug 13, 2025

Uh oh!

andybalaam commented Aug 13, 2025

Uh oh!

andybalaam commented Aug 13, 2025

Uh oh!

Uh oh!

richvdh left a comment

Uh oh!

andybalaam commented Aug 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

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

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

Uh oh!

Conversation

andybalaam commented Aug 5, 2025 • edited by richvdh Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MidhunSureshR left a comment

Choose a reason for hiding this comment

Uh oh!

MidhunSureshR left a comment

Choose a reason for hiding this comment

Uh oh!

richvdh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

richvdh commented Aug 13, 2025

Uh oh!

andybalaam commented Aug 13, 2025

Uh oh!

andybalaam commented Aug 13, 2025

Uh oh!

Uh oh!

richvdh left a comment

Choose a reason for hiding this comment

Uh oh!

andybalaam commented Aug 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

andybalaam commented Aug 5, 2025 •

edited by richvdh

Loading