Merge pull request #3300 from matrix-org/dbkr/change_is

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,12 +168,12 @@ export default class Field extends React.PureComponent {
 
         // Handle displaying feedback on validity
         const Tooltip = sdk.getComponent("elements.Tooltip");
-        let tooltip;
+        let fieldTooltip;
-        if (this.state.feedback) {
+        if (tooltipContent || this.state.feedback) {
-            tooltip = <Tooltip
+            fieldTooltip = <Tooltip
                 tooltipClassName="mx_Field_tooltip"
                 visible={this.state.feedbackVisible}
-                label={this.state.feedback}
+                label={tooltipContent || this.state.feedback}
             />;
         }
 
@@ -178,7 +181,7 @@ export default class Field extends React.PureComponent {
             {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>
+        );
+    }
+}

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -28,11 +28,11 @@ import AccessibleButton from "../../../elements/AccessibleButton";
 import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog";
 import PropTypes from "prop-types";
 import {THEMES} from "../../../../../themes";
-const PlatformPeg = require("../../../../../PlatformPeg");
+import PlatformPeg from "../../../../../PlatformPeg";
-const MatrixClientPeg = require("../../../../../MatrixClientPeg");
+import MatrixClientPeg from "../../../../../MatrixClientPeg";
-const sdk = require('../../../../..');
+import sdk from "../../../../..";
-const Modal = require("../../../../../Modal");
+import Modal from "../../../../../Modal";
-const dis = require("../../../../../dispatcher");
+import dis from "../../../../../dispatcher";
 
 export default class GeneralUserSettingsTab extends React.Component {
     static propTypes = {
@@ -45,9 +45,22 @@ export default class GeneralUserSettingsTab extends React.Component {
         this.state = {
             language: languageHandler.getCurrentLanguage(),
             theme: SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme"),
+            haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()),
         };
+
+        this.dispatcherRef = dis.register(this._onAction);
     }
 
+    componentWillUnmount() {
+        dis.unregister(this.dispatcherRef);
+    }
+
+    _onAction = (payload) => {
+        if (payload.action === 'id_server_changed') {
+            this.setState({haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl())});
+        }
+    };
+
     _onLanguageChange = (newLanguage) => {
         if (this.state.language === newLanguage) return;
 
@@ -124,7 +137,7 @@ export default class GeneralUserSettingsTab extends React.Component {
                 onFinished={this._onPasswordChanged} />
         );
 
-        const threepidSection = MatrixClientPeg.get().getIdentityServerUrl() ? <div>
+        const threepidSection = this.state.haveIdServer ? <div>
             <span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
             <EmailAddresses />
 
@@ -174,6 +187,7 @@ export default class GeneralUserSettingsTab extends React.Component {
     _renderDiscoverySection() {
         const EmailAddresses = sdk.getComponent("views.settings.discovery.EmailAddresses");
         const PhoneNumbers = sdk.getComponent("views.settings.discovery.PhoneNumbers");
+        const SetIdServer = sdk.getComponent("views.settings.SetIdServer");
 
         return (
             <div className="mx_SettingsTab_section">
@@ -182,6 +196,8 @@ export default class GeneralUserSettingsTab extends React.Component {
 
                 <span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
                 <PhoneNumbers />
+                { /* has its own heading as it includes the current ID server */ }
+                <SetIdServer />
             </div>
         );
     }

src/i18n/strings/en_EN.json

@@ -539,6 +539,15 @@
     "<a>Upgrade</a> to your own domain": "<a>Upgrade</a> to your own domain",
     "Display Name": "Display Name",
     "Save": "Save",
+    "Identity Server URL must be HTTPS": "Identity Server URL must be HTTPS",
+    "Not a valid Identity Server (status code %(code)s)": "Not a valid Identity Server (status code %(code)s)",
+    "Could not connect to Identity Server": "Could not connect to Identity Server",
+    "Checking server": "Checking server",
+    "Identity Server (%(server)s)": "Identity Server (%(server)s)",
+    "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.": "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.",
+    "Identity Server": "Identity Server",
+    "You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.": "You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.",
+    "Change": "Change",
     "Flair": "Flair",
     "Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?",
     "Success": "Success",
@@ -1276,7 +1285,6 @@
     "Missing session data": "Missing session data",
     "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.",
     "Your browser likely removed this data when running low on disk space.": "Your browser likely removed this data when running low on disk space.",
-    "Identity Server": "Identity Server",
     "Integrations Manager": "Integrations Manager",
     "Find others by phone or email": "Find others by phone or email",
     "Be found by phone or email": "Be found by phone or email",
@@ -1396,7 +1404,6 @@
     "Not sure of your password? <a>Set a new one</a>": "Not sure of your password? <a>Set a new one</a>",
     "Sign in to your Matrix account on %(serverName)s": "Sign in to your Matrix account on %(serverName)s",
     "Sign in to your Matrix account on <underlinedServerName />": "Sign in to your Matrix account on <underlinedServerName />",
-    "Change": "Change",
     "Sign in with": "Sign in with",
     "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
     "No Identity Server is configured so you cannot add add an email address in order to reset your password in the future.": "No Identity Server is configured so you cannot add add an email address in order to reset your password in the future.",