Improve UI/UX of the Key Backup section in User Settings

[maskedriotuser]

Hello,

This is a follow up on #14414. Thank you again for your work on Riot!

Here are the interrogations I had while discovering this section:

The title is about key backup, but the text basically explains the principle of E2E encryption. What is the relation with backups?

What does the text of the checkbox mean? What keys exactly are backed up? Matrix/Riot use a lot of keys, so which ones? Considering the text above, I suppose it's the keys encrypting the messages I exchange? Why do they need to be backed up? And where are they backed up? On the servers? Is it necessary? When I click on "Advanced" it says they are backed up in the secure storage. What is this? With a smartphone application it could mean the trust zone / secure enclave, but inside a browser on a desktop computer it can't be the case. Does it mean a secure location on your servers?

If I'm not mistaken, those keys are backed up on servers so that conversation history can become available on a new device. Then why not say that? Something like: "Keys encrypting the messages you exchange with other users are backed up on our servers, so that conversation history becomes available when you log in on a new device. Those keys are them self encrypted with your recovery key, so that nobody can access them, not even us".

Finally, what does the 2 buttons do?

What will I loose if I click on "Delete backup"? Just the ability to get the conversation history on a new device? Is it reversible (at least for future messages)? When is the backup performed anyway? In real-time as long as the checkbox is checked?

What "Restore from Backup" really does? Usually when you restore a backup, you go back a little bit in time, and you might loose the most recent modifications. Is it the same here? Will I risk loosing the most recent messages? Moreover, clicking on the button isn't really more helpful. Some keys are apparently restored, and then what? I can't see any change.

So I think it would be nice to make clear what is the purpose of these backups, and what clicking on the buttons will imply from the user's perspective.

[toby63]

I second this request, I consider myself an experienced user, but even I was totally confused about this concept.

What is the security key for? What does it have to do with encryption etc.?

I know that it is not easy to explain encryption to people, but you could at least try to explain things a bit better.

Here are some basic things I would explain:

1. Each login is a session, if you logout and log back in it is a new session.
2. Sessions need to be verified and this either works with verification from another active session (e.g. another device you are logged in) or with a security key.
3. Explain why sessions should be verified.

[richvdh]

I think most of the issues here were fixed in matrix-org/matrix-react-sdk#5182, though there remain significant problems with the backup settings UI, which I have raised as #26468