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 });
             },

src/components/views/context_menus/TopLeftMenu.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import LogoutDialog from "../dialogs/LogoutDialog";
@@ -23,6 +24,12 @@ import SdkConfig from '../../../SdkConfig';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export class TopLeftMenu extends React.Component {
+    static propTypes = {
+        displayName: PropTypes.string.isRequired,
+        userId: PropTypes.string.isRequired,
+        onFinished: PropTypes.func,
+    };
+
     constructor() {
         super();
         this.viewHomePage = this.viewHomePage.bind(this);
@@ -46,27 +53,48 @@ export class TopLeftMenu extends React.Component {
     render() {
         const isGuest = MatrixClientPeg.get().isGuest();
 
+        const hostingSignupLink = SdkConfig.get().hosting_signup_link;
+        let hostingSignup = null;
+        if (hostingSignupLink) {
+            hostingSignup = <div className="mx_TopLeftMenu_upgradeLink">
+                {_t(
+                    "<a>Upgrade</a> to your own domain", {},
+                    {
+                        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>
+        }
+
         let homePageSection = null;
         if (this.hasHomePage()) {
-            homePageSection = <ul className="mx_TopLeftMenu_section">
+            homePageSection = <ul className="mx_TopLeftMenu_section_withIcon">
                 <li className="mx_TopLeftMenu_icon_home" onClick={this.viewHomePage}>{_t("Home")}</li>
             </ul>;
         }
 
         let signInOutSection;
         if (isGuest) {
-            signInOutSection = <ul className="mx_TopLeftMenu_section">
+            signInOutSection = <ul className="mx_TopLeftMenu_section_withIcon">
                 <li className="mx_TopLeftMenu_icon_signin" onClick={this.signIn}>{_t("Sign in")}</li>
             </ul>;
         } else {
-            signInOutSection = <ul className="mx_TopLeftMenu_section">
+            signInOutSection = <ul className="mx_TopLeftMenu_section_withIcon">
                 <li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
             </ul>;
         }
 
         return <div className="mx_TopLeftMenu">
+            <div className="mx_TopLeftMenu_section_noIcon">
+                <div>{this.props.displayName}</div>
+                <div className="mx_TopLeftMenu_greyedText">{this.props.userId}</div>
+                {hostingSignup}
+            </div>
             {homePageSection}
-            <ul className="mx_TopLeftMenu_section">
+            <ul className="mx_TopLeftMenu_section_withIcon">
                 <li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
             </ul>
             {signInOutSection}

src/components/views/settings/ProfileSettings.js

@@ -20,6 +20,8 @@ import MatrixClientPeg from "../../../MatrixClientPeg";
 import Field from "../elements/Field";
 import AccessibleButton from "../elements/AccessibleButton";
 import classNames from 'classnames';
+import {User} from "matrix-js-sdk";
+import SdkConfig from '../../../SdkConfig';
 
 export default class ProfileSettings extends React.Component {
     constructor() {
@@ -129,13 +131,32 @@ export default class ProfileSettings extends React.Component {
             </div>
         );
 
+        const hostingSignupLink = SdkConfig.get().hosting_signup_link;
+        let hostingSignup = null;
+        if (hostingSignupLink) {
+            hostingSignup = <span className="mx_ProfileSettings_hostingSignup">
+                {_t(
+                    "<a>Upgrade</a> to your own domain", {},
+                    {
+                        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>
+            </span>
+        }
+
         return (
             <form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
                 <input type="file" ref="avatarUpload" className="mx_ProfileSettings_avatarUpload"
                        onChange={this._onAvatarChanged} accept="image/*" />
                 <div className="mx_ProfileSettings_profile">
                     <div className="mx_ProfileSettings_controls">
-                        <p>{this.state.userId}</p>
+                        <p>
+                            {this.state.userId}
+                            {hostingSignup}
+                        </p>
                         <Field id="profileDisplayName" label={_t("Display Name")}
                                type="text" value={this.state.displayName} autoComplete="off"
                                onChange={this._onDisplayNameChanged} />