Add UI in settings to change ID Server

.stylelintrc.js

@@ -15,6 +15,9 @@ module.exports = {
         "number-leading-zero": null,
         "selector-list-comma-newline-after": null,
         "at-rule-no-unknown": null,
-        "scss/at-rule-no-unknown": true,
+        "scss/at-rule-no-unknown": [true, {
+            // https://github.com/vector-im/riot-web/issues/10544
+            "ignoreAtRules": ["define-mixin"],
+        }],
     }
 }

res/css/_common.scss

@@ -559,3 +559,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 .mx_Username_color8 {
     color: $username-variant8-color;
 }
+
+@define-mixin mx_Settings_fullWidthField {
+    margin-right: 200px;
+}

res/css/_components.scss

@@ -168,6 +168,7 @@
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
 @import "./views/settings/_ProfileSettings.scss";
+@import "./views/settings/_SetIdServer.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
 @import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";

res/css/views/elements/_Tooltip.scss

@@ -55,7 +55,7 @@ limitations under the License.
     border-radius: 4px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     background-color: $menu-bg-color;
-    z-index: 2000;
+    z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
     padding: 10px;
     pointer-events: none;
     line-height: 14px;

res/css/views/settings/_ProfileSettings.scss

@@ -26,6 +26,10 @@ limitations under the License.
     height: 4em;
 }
 
+.mx_ProfileSettings_controls .mx_Field {
+    margin-right: 100px;
+}
+
 .mx_ProfileSettings_controls .mx_Field:first-child {
     margin-top: 0;
 }

res/css/views/settings/_SetIdServer.scss

@@ -0,0 +1,19 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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_SetIdServer .mx_Field_input {
+    @mixin mx_Settings_fullWidthField;
+}

res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_GeneralUserSettingsTab_changePassword .mx_Field,
 .mx_GeneralUserSettingsTab_themeSection .mx_Field {
-    margin-right: 100px; // Align with the other fields on the page
+    @mixin mx_Settings_fullWidthField;
 }
 
 .mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
@@ -26,5 +26,5 @@ limitations under the License.
 .mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
 .mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
 .mx_GeneralUserSettingsTab_languageInput {
-    margin-right: 100px; // Align with the other fields on the page
+    @mixin mx_Settings_fullWidthField;
 }

res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss

@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 .mx_PreferencesUserSettingsTab .mx_Field {
-    margin-right: 100px; // Align with the rest of the controls
+    @mixin mx_Settings_fullWidthField;
 }

res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_VoiceUserSettingsTab .mx_Field {
-    margin-right: 100px; // align with the rest of the fields
+    @mixin mx_Settings_fullWidthField;
 }
 
 .mx_VoiceUserSettingsTab_missingMediaPermissions {

src/components/views/elements/Field.js

@@ -46,6 +46,9 @@ export default class Field extends React.PureComponent {
         // and a `feedback` react component field to provide feedback
         // to the user.
         onValidate: PropTypes.func,
+        // If specified, contents will appear as a tooltip on the element and
+        // validation feedback tooltips will be suppressed.
+        tooltipContent: PropTypes.node,
         // All other props pass through to the <input>.
     };
 
@@ -134,7 +137,7 @@ export default class Field extends React.PureComponent {
     }, VALIDATION_THROTTLE_MS);
 
     render() {
-        const { element, prefix, onValidate, children, ...inputProps } = this.props;
+        const { element, prefix, onValidate, children, tooltipContent, ...inputProps } = this.props;
 
         const inputElement = element || "input";
 
@@ -165,20 +168,20 @@ export default class Field extends React.PureComponent {
 
         // Handle displaying feedback on validity
         const Tooltip = sdk.getComponent("elements.Tooltip");
-        let tooltip;
-        if (this.state.feedback) {
-            tooltip = <Tooltip
+        let fieldTooltip;
+        if (tooltipContent || this.state.feedback) {
+            fieldTooltip = <Tooltip
                 tooltipClassName="mx_Field_tooltip"
                 visible={this.state.feedbackVisible}
-                label={this.state.feedback}
+                label={tooltipContent || this.state.feedback}
             />;
         }
 
         return <div className={fieldClasses}>
             {prefixContainer}
             {fieldInput}
             <label htmlFor={this.props.id}>{this.props.label}</label>
-            {tooltip}
+            {fieldTooltip}
         </div>;
     }
 }

src/components/views/settings/SetIdServer.js

@@ -0,0 +1,196 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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 url from 'url';
+import React from 'react';
+import {_t} from "../../../languageHandler";
+import sdk from '../../../index';
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import SdkConfig from "../../../SdkConfig";
+import dis from "../../../dispatcher";
+
+/**
+ * If a url has no path component, etc. abbreviate it to just the hostname
+ *
+ * @param {string} u The url to be abbreviated
+ * @returns {string} The abbreviated url
+ */
+function abbreviateUrl(u) {
+    if (!u) return '';
+
+    const parsedUrl = url.parse(u);
+    // if it's something we can't parse as a url then just return it
+    if (!parsedUrl) return u;
+
+    if (parsedUrl.path == '/') {
+        // we ignore query / hash parts: these aren't relevant for IS server URLs
+        return parsedUrl.host;
+    }
+
+    return u;
+}
+
+function unabbreviateUrl(u) {
+    if (!u) return '';
+
+    let longUrl = u;
+    if (!u.startsWith('https://')) longUrl = 'https://' + u;
+    const parsed = url.parse(longUrl);
+    if (parsed.hostname === null) return u;
+
+    return longUrl;
+}
+
+/**
+ * Check an IS URL is valid, including liveness check
+ *
+ * @param {string} u The url to check
+ * @returns {string} null if url passes all checks, otherwise i18ned error string
+ */
+async function checkIdentityServerUrl(u) {
+    const parsedUrl = url.parse(u);
+
+    if (parsedUrl.protocol !== 'https:') return _t("Identity Server URL must be HTTPS");
+
+    // XXX: duplicated logic from js-sdk but it's quite tied up in the validation logic in the
+    // js-sdk so probably as easy to duplicate it than to separate it out so we can reuse it
+    try {
+        const response = await fetch(u + '/_matrix/identity/api/v1');
+        if (response.ok) {
+            return null;
+        } else if (response.status < 200 || response.status >= 300) {
+            return _t("Not a valid Identity Server (status code %(code)s)", {code: response.status});
+        } else {
+            return _t("Could not connect to Identity Server");
+        }
+    } catch (e) {
+        return _t("Could not connect to Identity Server");
+    }
+}
+
+export default class SetIdServer extends React.Component {
+    constructor() {
+        super();
+
+        let defaultIdServer = '';
+        if (!MatrixClientPeg.get().getIdentityServerUrl() && SdkConfig.get()['validated_server_config']['isUrl']) {
+            // If no ID server is configured but there's one in the config, prepopulate
+            // the field to help the user.
+            defaultIdServer = abbreviateUrl(SdkConfig.get()['validated_server_config']['isUrl']);
+        }
+
+        this.state = {
+            currentClientIdServer: MatrixClientPeg.get().getIdentityServerUrl(),
+            idServer: defaultIdServer,
+            error: null,
+            busy: false,
+        };
+    }
+
+    _onIdentityServerChanged = (ev) => {
+        const u = ev.target.value;
+
+        this.setState({idServer: u});
+    };
+
+    _getTooltip = () => {
+        if (this.state.busy) {
+            const InlineSpinner = sdk.getComponent('views.elements.InlineSpinner');
+            return <div>
+                <InlineSpinner />
+                { _t("Checking server") }
+            </div>;
+        } else if (this.state.error) {
+            return this.state.error;
+        } else {
+            return null;
+        }
+    };
+
+    _idServerChangeEnabled = () => {
+        return !!this.state.idServer && !this.state.busy;
+    };
+
+    _saveIdServer = async (e) => {
+        e.preventDefault();
+
+        this.setState({busy: true});
+
+        const fullUrl = unabbreviateUrl(this.state.idServer);
+
+        const errStr = await checkIdentityServerUrl(fullUrl);
+
+        let newFormValue = this.state.idServer;
+        if (!errStr) {
+            MatrixClientPeg.get().setIdentityServerUrl(fullUrl);
+            localStorage.removeItem("mx_is_access_token");
+            localStorage.setItem("mx_is_url", fullUrl);
+            dis.dispatch({action: 'id_server_changed'});
+            newFormValue = '';
+        }
+        this.setState({
+            busy: false,
+            error: errStr,
+            currentClientIdServer: MatrixClientPeg.get().getIdentityServerUrl(),
+            idServer: newFormValue,
+        });
+    };
+
+    render() {
+        const idServerUrl = this.state.currentClientIdServer;
+        let sectionTitle;
+        let bodyText;
+        if (idServerUrl) {
+            sectionTitle = _t("Identity Server (%(server)s)", { server: abbreviateUrl(idServerUrl) });
+            bodyText = _t(
+                "You are currently using <server></server> to discover and be discoverable by " +
+                "existing contacts you know. You can change your identity server below.",
+                {},
+                { server: sub => <b>{abbreviateUrl(idServerUrl)}</b> },
+            );
+        } else {
+            sectionTitle = _t("Identity Server");
+            bodyText = _t(
+                "You are not currently using an identity server. " +
+                "To discover and be discoverable by existing contacts you know, " +
+                "add one below.",
+            );
+        }
+
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const Field = sdk.getComponent('elements.Field');
+        return (
+            <form className="mx_SettingsTab_section mx_SetIdServer" onSubmit={this._saveIdServer}>
+                <span className="mx_SettingsTab_subheading">
+                    {sectionTitle}
+                </span>
+                <span className="mx_SettingsTab_subsectionText">
+                    {bodyText}
+                </span>
+                <Field label={_t("Identity Server")}
+                    id="mx_SetIdServer_idServer"
+                    type="text" value={this.state.idServer} autoComplete="off"
+                    onChange={this._onIdentityServerChanged}
+                    tooltipContent={this._getTooltip()}
+                />
+                <AccessibleButton type="submit" kind="primary_sm"
+                    disabled={!this._idServerChangeEnabled()}
+                    onClick={this._saveIdServer}
+                >{_t("Change")}</AccessibleButton>
+            </form>
+        );
+    }
+}