Show invite reasons

Displays the reason for invitation in the invitation dialog, requiring a
click to reveal the message.

Signed-off-by: Robin Townsend <robin@robin.town>

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
+import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { enumerateThemes } from "../../../../../theme";
 import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
@@ -62,6 +63,10 @@ interface IState extends IThemeState {
     systemFont: string;
     showAdvanced: boolean;
     layout: Layout;
+    // User profile data for the message preview
+    userId: string;
+    displayName: string;
+    avatarUrl: string;
 }
 
 
@@ -83,9 +88,25 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             systemFont: SettingsStore.getValue("systemFont"),
             showAdvanced: false,
             layout: SettingsStore.getValue("layout"),
+            userId: "@erim:fink.fink",
+            displayName: "Erimayas Fink",
+            avatarUrl: null,
         };
     }
 
+    async componentDidMount() {
+        // Fetch the current user profile for the message preview
+        const client = MatrixClientPeg.get();
+        const userId = client.getUserId();
+        const profileInfo = await client.getProfileInfo(userId);
+
+        this.setState({
+            userId,
+            displayName: profileInfo.displayname,
+            avatarUrl: profileInfo.avatar_url,
+        });
+    }
+
     private calculateThemeState(): IThemeState {
         // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
         // show the right values for things.
@@ -306,6 +327,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 className="mx_AppearanceUserSettingsTab_fontSlider_preview"
                 message={this.MESSAGE_PREVIEW_TEXT}
                 layout={this.state.layout}
+                userId={this.state.userId}
+                displayName={this.state.displayName}
+                avatarUrl={this.state.avatarUrl}
             />
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>