Support linking to hosting providers

From link in app config

src/components/structures/GroupView.js

@@ -21,6 +21,7 @@ import Promise from 'bluebird';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import sdk from '../../index';
 import dis from '../../dispatcher';
+import SdkConfig from '../../SdkConfig';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t, _td } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
@@ -816,6 +817,23 @@ export default React.createClass({
         });
 
         const header = this.state.editing ? <h2> { _t('Community Settings') } </h2> : <div />;
+
+        const hostingSignupLink = SdkConfig.get().hosting_signup_link;
+        let hostingSignup = null;
+        if (hostingSignupLink) {
+            hostingSignup = <div className="mx_GroupView_hostingSignup">
+                {_t(
+                    "Want more than a community? <a>Get your own server</a>", {},
+                    {
+                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
+                    },
+                )}
+                <a href={hostingSignupLink} target="_blank" rel="noopener">
+                    <img src={require("../../../res/img/external-link.svg")} width="11" height="10" alt='' />
+                </a>
+            </div>
+        }
+
         const changeDelayWarning = this.state.editing && this.state.isUserPrivileged ?
             <div className="mx_GroupView_changeDelayWarning">
                 { _t(
@@ -830,6 +848,7 @@ export default React.createClass({
             </div> : <div />;
         return <div className={groupSettingsSectionClasses}>
             { header }
+            { hostingSignup }
             { changeDelayWarning }
             { this._getJoinableNode() }
             { this._getLongDescriptionNode() }

src/components/structures/TopLeftMenuButton.js

@@ -68,17 +68,18 @@ export default class TopLeftMenuButton extends React.Component {
         }
     }
 
-    render() {
-        const fallbackUserId = MatrixClientPeg.get().getUserId();
-        const profileInfo = this.state.profileInfo;
-        let name;
+    _getDisplayName() {
         if (MatrixClientPeg.get().isGuest()) {
-            name = _t("Guest");
-        } else if (profileInfo) {
-            name = profileInfo.name;
+            return _t("Guest");
+        } else if (this.state.profileInfo) {
+            return this.state.profileInfo.name;
         } else {
-            name = fallbackUserId;
+            return MatrixClientPeg.get().getUserId();
         }
+    }
+
+    render() {
+        const name = this._getDisplayName();
         let nameElement;
         if (!this.props.collapsed) {
             nameElement = <div className="mx_TopLeftMenuButton_name">
@@ -89,9 +90,9 @@ export default class TopLeftMenuButton extends React.Component {
         return (
             <AccessibleButton className="mx_TopLeftMenuButton" onClick={this.onToggleMenu}>
                 <BaseAvatar
-                    idName={fallbackUserId}
+                    idName={MatrixClientPeg.get().getUserId()}
                     name={name}
-                    url={profileInfo && profileInfo.avatarUrl}
+                    url={this.state.profileInfo && this.state.profileInfo.avatarUrl}
                     width={AVATAR_SIZE}
                     height={AVATAR_SIZE}
                     resizeMethod="crop"
@@ -114,6 +115,8 @@ export default class TopLeftMenuButton extends React.Component {
             chevronFace: "none",
             left: x,
             top: y,
+            userId: MatrixClientPeg.get().getUserId(),
+            displayName: this._getDisplayName(),
             onFinished: () => {
                 this.setState({ menuDisplayed: false });
             },