Merge branch 'travis/feature/wellknown2' into travis/wk/mxid

res/css/_components.scss

@@ -97,6 +97,7 @@
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_Spinner.scss";
 @import "./views/elements/_SyntaxHighlight.scss";
+@import "./views/elements/_TextWithTooltip.scss";
 @import "./views/elements/_ToggleSwitch.scss";
 @import "./views/elements/_ToolTipButton.scss";
 @import "./views/elements/_Tooltip.scss";

res/css/structures/auth/_Login.scss

@@ -79,3 +79,7 @@ limitations under the License.
 .mx_Login_type_dropdown {
     min-width: 200px;
 }
+
+.mx_Login_underlinedServerName {
+    border-bottom: 1px dashed $accent-color;
+}

res/css/views/elements/_TextWithTooltip.scss

@@ -0,0 +1,19 @@
+/*
+Copyright 2019 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_TextWithTooltip_tooltip {
+    display: none;
+}

src/components/structures/MatrixChat.js

@@ -203,9 +203,12 @@ export default React.createClass({
         };
     },
 
-    // TODO: TravisR - Remove this or put it somewhere else
     getFallbackHsUrl: function() {
+        if (this.props.serverConfig.isDefault) {
             return this.props.config.fallback_hs_url;
+        } else {
+            return null;
+        }
     },
 
     getServerProperties() {

src/components/structures/auth/ForgotPassword.js

@@ -124,13 +124,7 @@ module.exports = React.createClass({
         });
     },
 
-    async onServerDetailsNextPhaseClick(ev) {
+    async onServerDetailsNextPhaseClick() {
-        ev.stopPropagation();
-        // TODO: TravisR - Capture the user's input somehow else
-        if (this._serverConfigRef) {
-            // Just to make sure the user's input gets captured
-            await this._serverConfigRef.validateServer();
-        }
         this.setState({
             phase: PHASE_FORGOT,
         });
@@ -160,25 +154,19 @@ module.exports = React.createClass({
 
     renderServerDetails() {
         const ServerConfig = sdk.getComponent("auth.ServerConfig");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
         if (SdkConfig.get()['disable_custom_urls']) {
             return null;
         }
 
-        // TODO: TravisR - Pull out server discovery from ServerConfig to disable the next button?
+        return <ServerConfig
-        return <div>
-            <ServerConfig
-                ref={r => this._serverConfigRef = r}
             serverConfig={this.props.serverConfig}
             onServerConfigChange={this.props.onServerConfigChange}
-                delayTimeMs={0} />
+            delayTimeMs={0}
-            <AccessibleButton className="mx_Login_submit"
+            onAfterSubmit={this.onServerDetailsNextPhaseClick}
-                onClick={this.onServerDetailsNextPhaseClick}
+            submitText={_t("Next")}
-            >
+            submitClass="mx_Login_submit"
-                {_t("Next")}
+        />;
-            </AccessibleButton>
-        </div>;
     },
 
     renderForgot() {
@@ -194,9 +182,17 @@ module.exports = React.createClass({
             serverName: this.props.serverConfig.hsName,
         });
         if (this.props.serverConfig.hsNameIsDifferent) {
-            // TODO: TravisR - Use tooltip to underline
+            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
+
             yourMatrixAccountText = _t('Your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => <u>{this.props.serverConfig.hsName}</u>,
+                'underlinedServerName': () => {
+                    return <TextWithTooltip
+                        class="mx_Login_underlinedServerName"
+                        tooltip={this.props.serverConfig.hsUrl}
+                    >
+                        {this.props.serverConfig.hsName}
+                    </TextWithTooltip>;
+                },
             });
         }
 

src/components/structures/auth/Login.js

@@ -287,13 +287,7 @@ module.exports = React.createClass({
         this.props.onRegisterClick();
     },
 
-    async onServerDetailsNextPhaseClick(ev) {
+    async onServerDetailsNextPhaseClick() {
-        ev.stopPropagation();
-        // TODO: TravisR - Capture the user's input somehow else
-        if (this._serverConfigRef) {
-            // Just to make sure the user's input gets captured
-            await this._serverConfigRef.validateServer();
-        }
         this.setState({
             phase: PHASE_LOGIN,
         });
@@ -425,7 +419,6 @@ module.exports = React.createClass({
 
     renderServerComponent() {
         const ServerConfig = sdk.getComponent("auth.ServerConfig");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
         if (SdkConfig.get()['disable_custom_urls']) {
             return null;
@@ -435,26 +428,19 @@ module.exports = React.createClass({
             return null;
         }
 
-        const serverDetails = <ServerConfig
+        const serverDetailsProps = {};
-            ref={r => this._serverConfigRef = r}
+        if (PHASES_ENABLED) {
+            serverDetailsProps.onAfterSubmit = this.onServerDetailsNextPhaseClick;
+            serverDetailsProps.submitText = _t("Next");
+            serverDetailsProps.submitClass = "mx_Login_submit";
+        }
+
+        return <ServerConfig
             serverConfig={this.props.serverConfig}
             onServerConfigChange={this.props.onServerConfigChange}
             delayTimeMs={250}
+            {...serverDetailsProps}
         />;
-
-        let nextButton = null;
-        if (PHASES_ENABLED) {
-            // TODO: TravisR - Pull out server discovery from ServerConfig to disable the next button?
-            nextButton = <AccessibleButton className="mx_Login_submit"
-                onClick={this.onServerDetailsNextPhaseClick}>
-                {_t("Next")}
-            </AccessibleButton>;
-        }
-
-        return <div>
-            {serverDetails}
-            {nextButton}
-        </div>;
     },
 
     renderLoginComponentForStep() {

src/components/structures/auth/Registration.js

@@ -286,13 +286,7 @@ module.exports = React.createClass({
         });
     },
 
-    async onServerDetailsNextPhaseClick(ev) {
+    async onServerDetailsNextPhaseClick() {
-        ev.stopPropagation();
-        // TODO: TravisR - Capture the user's input somehow else
-        if (this._serverConfigRef) {
-            // Just to make sure the user's input gets captured
-            await this._serverConfigRef.validateServer();
-        }
         this.setState({
             phase: PHASE_REGISTRATION,
         });
@@ -337,7 +331,6 @@ module.exports = React.createClass({
         const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
         const ServerConfig = sdk.getComponent("auth.ServerConfig");
         const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
         if (SdkConfig.get()['disable_custom_urls']) {
             return null;
@@ -354,45 +347,41 @@ module.exports = React.createClass({
             </div>;
         }
 
+        const serverDetailsProps = {};
+        if (PHASES_ENABLED) {
+            serverDetailsProps.onAfterSubmit = this.onServerDetailsNextPhaseClick;
+            serverDetailsProps.submitText = _t("Next");
+            serverDetailsProps.submitClass = "mx_Login_submit";
+        }
+
         let serverDetails = null;
         switch (this.state.serverType) {
             case ServerType.FREE:
                 break;
             case ServerType.PREMIUM:
                 serverDetails = <ModularServerConfig
-                    ref={r => this._serverConfigRef = r}
                     serverConfig={this.props.serverConfig}
                     onServerConfigChange={this.props.onServerConfigChange}
                     delayTimeMs={250}
+                    {...serverDetailsProps}
                 />;
                 break;
             case ServerType.ADVANCED:
                 serverDetails = <ServerConfig
-                    ref={r => this._serverConfigRef = r}
                     serverConfig={this.props.serverConfig}
                     onServerConfigChange={this.props.onServerConfigChange}
                     delayTimeMs={250}
+                    {...serverDetailsProps}
                 />;
                 break;
         }
 
-        let nextButton = null;
-        if (PHASES_ENABLED) {
-            // TODO: TravisR - Pull out server discovery from ServerConfig to disable the next button?
-            nextButton = <AccessibleButton className="mx_Login_submit"
-                onClick={this.onServerDetailsNextPhaseClick}
-            >
-                {_t("Next")}
-            </AccessibleButton>;
-        }
-
         return <div>
             <ServerTypeSelector
                 selected={this.state.serverType}
                 onChange={this.onServerTypeChange}
             />
             {serverDetails}
-            {nextButton}
         </div>;
     },
 

src/components/views/auth/ModularServerConfig.js

@@ -41,6 +41,16 @@ export default class ModularServerConfig extends React.PureComponent {
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
 
         delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
+
+        // Called after the component calls onServerConfigChange
+        onAfterSubmit: PropTypes.func,
+
+        // Optional text for the submit button. If falsey, no button will be shown.
+        submitText: PropTypes.string,
+
+        // Optional class for the submit button. Only applies if the submit button
+        // is to be rendered.
+        submitClass: PropTypes.string,
     };
 
     static defaultProps = {
@@ -119,6 +129,16 @@ export default class ModularServerConfig extends React.PureComponent {
         this.setState({ hsUrl });
     };
 
+    onSubmit = async (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        await this.validateServer();
+
+        if (this.props.onAfterSubmit) {
+            this.props.onAfterSubmit();
+        }
+    };
+
     _waitThenInvoke(existingTimeoutId, fn) {
         if (existingTimeoutId) {
             clearTimeout(existingTimeoutId);
@@ -128,6 +148,16 @@ export default class ModularServerConfig extends React.PureComponent {
 
     render() {
         const Field = sdk.getComponent('elements.Field');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        const submitButton = this.props.submitText
+            ? <AccessibleButton
+                element="button"
+                type="submit"
+                className={this.props.submitClass}
+                onClick={this.onSubmit}
+                disabled={this.state.busy}>{this.props.submitText}</AccessibleButton>
+            : null;
 
         return (
             <div className="mx_ServerConfig">
@@ -141,6 +171,7 @@ export default class ModularServerConfig extends React.PureComponent {
                         </a>,
                     },
                 )}
+                <form onSubmit={this.onSubmit} autoComplete={false} action={null}>
                     <div className="mx_ServerConfig_fields">
                         <Field id="mx_ServerConfig_hsUrl"
                             label={_t("Server Name")}
@@ -150,6 +181,8 @@ export default class ModularServerConfig extends React.PureComponent {
                             onChange={this.onHomeserverChange}
                         />
                     </div>
+                    {submitButton}
+                </form>
             </div>
         );
     }

src/components/views/auth/PasswordLogin.js

@@ -279,9 +279,17 @@ export default class PasswordLogin extends React.Component {
             serverName: this.props.serverConfig.hsName,
         });
         if (this.props.serverConfig.hsNameIsDifferent) {
-            // TODO: TravisR - Use tooltip to underline
+            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
+
             signInToText = _t('Sign in to your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => <u>{this.props.serverConfig.hsName}</u>,
+                'underlinedServerName': () => {
+                    return <TextWithTooltip
+                        class="mx_Login_underlinedServerName"
+                        tooltip={this.props.serverConfig.hsUrl}
+                    >
+                        {this.props.serverConfig.hsName}
+                    </TextWithTooltip>;
+                },
             });
         }
 

src/components/views/auth/RegistrationForm.js

@@ -516,9 +516,17 @@ module.exports = React.createClass({
             serverName: this.props.serverConfig.hsName,
         });
         if (this.props.serverConfig.hsNameIsDifferent) {
-            // TODO: TravisR - Use tooltip to underline
+            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
+
             yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => <u>{this.props.serverConfig.hsName}</u>,
+                'underlinedServerName': () => {
+                    return <TextWithTooltip
+                        class="mx_Login_underlinedServerName"
+                        tooltip={this.props.serverConfig.hsUrl}
+                    >
+                        {this.props.serverConfig.hsName}
+                    </TextWithTooltip>;
+                },
             });
         }
 

src/components/views/auth/ServerConfig.js

@@ -30,12 +30,22 @@ import SdkConfig from "../../../SdkConfig";
 
 export default class ServerConfig extends React.PureComponent {
     static propTypes = {
-        onServerConfigChange: PropTypes.func,
+        onServerConfigChange: PropTypes.func.isRequired,
 
         // The current configuration that the user is expecting to change.
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
 
         delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
+
+        // Called after the component calls onServerConfigChange
+        onAfterSubmit: PropTypes.func,
+
+        // Optional text for the submit button. If falsey, no button will be shown.
+        submitText: PropTypes.string,
+
+        // Optional class for the submit button. Only applies if the submit button
+        // is to be rendered.
+        submitClass: PropTypes.string,
     };
 
     static defaultProps = {
@@ -124,6 +134,16 @@ export default class ServerConfig extends React.PureComponent {
         this.setState({ isUrl });
     };
 
+    onSubmit = async (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        await this.validateServer();
+
+        if (this.props.onAfterSubmit) {
+            this.props.onAfterSubmit();
+        }
+    };
+
     _waitThenInvoke(existingTimeoutId, fn) {
         if (existingTimeoutId) {
             clearTimeout(existingTimeoutId);
@@ -138,11 +158,21 @@ export default class ServerConfig extends React.PureComponent {
 
     render() {
         const Field = sdk.getComponent('elements.Field');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const errorText = this.state.errorText
             ? <span className='mx_ServerConfig_error'>{this.state.errorText}</span>
             : null;
 
+        const submitButton = this.props.submitText
+            ? <AccessibleButton
+                  element="button"
+                  type="submit"
+                  className={this.props.submitClass}
+                  onClick={this.onSubmit}
+                  disabled={this.state.busy}>{this.props.submitText}</AccessibleButton>
+            : null;
+
         return (
             <div className="mx_ServerConfig">
                 <h3>{_t("Other servers")}</h3>
@@ -152,6 +182,7 @@ export default class ServerConfig extends React.PureComponent {
                     </a>,
                 })}
                 {errorText}
+                <form onSubmit={this.onSubmit} autoComplete={false} action={null}>
                     <div className="mx_ServerConfig_fields">
                         <Field id="mx_ServerConfig_hsUrl"
                             label={_t("Homeserver URL")}
@@ -170,6 +201,8 @@ export default class ServerConfig extends React.PureComponent {
                             disabled={this.state.busy}
                         />
                     </div>
+                    {submitButton}
+                </form>
             </div>
         );
     }

src/components/views/elements/TextWithTooltip.js

@@ -0,0 +1,56 @@
+/*
+ Copyright 2019 New Vector Ltd.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+
+export default class TextWithTooltip extends React.Component {
+    static propTypes = {
+        class: PropTypes.string,
+        tooltip: PropTypes.string.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onMouseOver = () => {
+        this.setState({hover: true});
+    };
+
+    onMouseOut = () => {
+        this.setState({hover: false});
+    };
+
+    render() {
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+
+        return (
+            <span onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={this.props.class}>
+                {this.props.children}
+                <Tooltip
+                    label={this.props.tooltip}
+                    visible={this.state.hover}
+                    className={"mx_TextWithTooltip_tooltip"} />
+            </span>
+        );
+    }
+}

src/components/views/elements/Tooltip.js

@@ -79,6 +79,10 @@ module.exports = React.createClass({
         let offset = 0;
         if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
             offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2);
+        } else {
+            // The tooltip is larger than the parent height: figure out what offset
+            // we need so that we're still centered.
+            offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
         style.top = (parentBox.top - 2) + window.pageYOffset + offset;
         style.left = 6 + parentBox.right + window.pageXOffset;

src/utils/AutoDiscoveryUtils.js

@@ -26,6 +26,8 @@ export class ValidatedServerConfig {
 
     isUrl: string;
     identityEnabled: boolean;
+
+    isDefault: boolean;
 }
 
 export default class AutoDiscoveryUtils {
@@ -99,6 +101,7 @@ export default class AutoDiscoveryUtils {
             hsNameIsDifferent: url.hostname !== preferredHomeserverName,
             isUrl: preferredIdentityUrl,
             identityEnabled: !SdkConfig.get()['disable_identity_server'],
+            isDefault: false,
         });
     }
 }