Improve device list in Security & Privacy settings (#7004)

Overhaul the device list in the "Security and Privacy" settings tab to include device trust status, provide buttons for verifying unverified devices, and improve overall usability and style. This should now be the primary interface for checking and changing the trust status of your own devices, rather than looking at your own user profile in the right panel.
This commit is contained in:
Faye Duxovni 2021-10-29 18:11:39 -04:00 committed by GitHub
parent ea54ea89d4
commit d88b8efd19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 489 additions and 130 deletions

View file

@ -326,23 +326,15 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
return (
<div className="mx_SettingsTab mx_SecurityUserSettingsTab">
{ warning }
<div className="mx_SettingsTab_heading">{ _t("Where youre logged in") }</div>
<div className="mx_SettingsTab_heading">{ _t("Where youre signed in") }</div>
<div className="mx_SettingsTab_section">
<span>
{ _t(
"Manage the names of and sign out of your sessions below or " +
"<a>verify them in your User Profile</a>.", {},
{
a: sub => <AccessibleButton kind="link" onClick={this.onGoToUserProfileClick}>
{ sub }
</AccessibleButton>,
},
"Manage your signed-in devices below. " +
"A device's name is visible to people you communicate with.",
) }
</span>
<div className='mx_SettingsTab_subsectionText'>
{ _t("A session's public name is visible to people you communicate with") }
<DevicesPanel />
</div>
<DevicesPanel />
</div>
<div className="mx_SettingsTab_heading">{ _t("Encryption") }</div>
<div className="mx_SettingsTab_section">