Merge pull request #4499 from matrix-org/dbkr/link_from_settings_to_userprofile_rel

Add a link from settings / devices to your user profile

src/components/views/dialogs/UserSettingsDialog.js

@@ -89,7 +89,7 @@ export default class UserSettingsDialog extends React.Component {
         tabs.push(new Tab(
             _td("Security & Privacy"),
             "mx_UserSettingsDialog_securityIcon",
-            <SecurityUserSettingsTab />,
+            <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
         if (SdkConfig.get()['showLabsSettings'] || SettingsStore.getLabsFeatures().length > 0) {
             tabs.push(new Tab(

src/components/views/settings/tabs/user/SecurityUserSettingsTab.js

@@ -50,6 +50,10 @@ export class IgnoredUser extends React.Component {
 }
 
 export default class SecurityUserSettingsTab extends React.Component {
+    static propTypes = {
+        closeSettingsFn: PropTypes.func.isRequired,
+    };
+
     constructor() {
         super();
 
@@ -85,6 +89,11 @@ export default class SecurityUserSettingsTab extends React.Component {
         );
     };
 
+    _onGoToUserProfileClick = () => {
+        // close the settings dialog & let the default action run (ie. navigate to the link)
+        this.props.closeSettingsFn();
+    }
+
     _onUserUnignored = async (userId) => {
         // Don't use this.state to get the ignored user list as it might be
         // ever so slightly outdated. Instead, prefer to get a fresh list and
@@ -284,7 +293,18 @@ export default class SecurityUserSettingsTab extends React.Component {
             <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
                 <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Sessions")}</span>
+                    <span className="mx_SettingsTab_subheading">{_t("Where you’re logged in")}</span>
+                    <span>
+                        {_t(
+                            "Manage the names of and sign out of your sessions below or " +
+                            "<a>verify them in your User Profile</a>.", {},
+                            {
+                                a: sub => <a href={"#/user/" + MatrixClientPeg.get().getUserId()}
+                                    onClick={this._onGoToUserProfileClick}
+                                >{sub}</a>,
+                            },
+                        )}
+                    </span>
                     <div className='mx_SettingsTab_subsectionText'>
                         {_t("A session's public name is visible to people you communicate with")}
                         <DevicesPanel />