From c76514fceb78b91688fd7fee4345a25f9490a225 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 9 Aug 2019 18:07:58 +0100 Subject: [PATCH 01/11] Add UI in settings to change ID Server Just changes the current ID server being used To come in subsequent PRs: * Store this in account data * Check for terms or support the proper UI for accepting terms when setting * Support disconnecting Part 1 of https://github.com/vector-im/riot-web/issues/10094 Requires https://github.com/matrix-org/matrix-js-sdk/pull/1013 --- res/css/_components.scss | 1 + res/css/views/elements/_Tooltip.scss | 2 +- src/components/views/elements/Field.js | 15 +++++++++------ .../settings/tabs/user/GeneralUserSettingsTab.js | 13 ++++++++----- src/i18n/strings/en_EN.json | 13 +++++++++++-- 5 files changed, 30 insertions(+), 14 deletions(-) diff --git a/res/css/_components.scss b/res/css/_components.scss index dff174e943..abfce47916 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 8f6204c942..cc4eb409df 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/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; diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js index e920bdb0fd..554d5d6181 100644 --- a/src/components/views/elements/Field.js +++ b/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. + tooltip: PropTypes.node, // All other props pass through to the . }; @@ -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, tooltip, ...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; - if (this.state.feedback) { - tooltip = ; } @@ -178,7 +181,7 @@ export default class Field extends React.PureComponent { {prefixContainer} {fieldInput} - {tooltip} + {fieldTooltip} ; } } diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index a9c010b6b4..4c0ebef3f3 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -26,11 +26,11 @@ import LanguageDropdown from "../../../elements/LanguageDropdown"; import AccessibleButton from "../../../elements/AccessibleButton"; import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog"; import PropTypes from "prop-types"; -const PlatformPeg = require("../../../../../PlatformPeg"); -const MatrixClientPeg = require("../../../../../MatrixClientPeg"); -const sdk = require('../../../../..'); -const Modal = require("../../../../../Modal"); -const dis = require("../../../../../dispatcher"); +import PlatformPeg from "../../../../../PlatformPeg"; +import MatrixClientPeg from "../../../../../MatrixClientPeg"; +import sdk from "../../../../.."; +import Modal from "../../../../../Modal"; +import dis from "../../../../../dispatcher"; export default class GeneralUserSettingsTab extends React.Component { static propTypes = { @@ -171,6 +171,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 (
@@ -179,6 +180,8 @@ export default class GeneralUserSettingsTab extends React.Component { {_t("Phone numbers")} + { /* has its own heading as it includes the current ID server */ } +
); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 8173051c30..1d7051e361 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -537,6 +537,17 @@ "Upgrade to your own domain": "Upgrade to your own domain", "Display Name": "Display Name", "Save": "Save", + "Identity Server URL must be HTTPS": "Identity Server URL must be HTTPS", + "Could not connect to ID Server": "Could not connect to ID Server", + "Not a valid ID Server (status code %(code)s)": "Not a valid ID Server (status code %(code)s)", + "Identity Server": "Identity Server", + "Enter the URL of the Identity Server to use": "Enter the URL of the Identity Server to use", + "Looks good": "Looks good", + "Checking Server": "Checking Server", + "Identity Server (%(server)s)": "Identity Server (%(server)s)", + "You are currently using to discover and be discoverable by existing contacts you know. You can change your identity server below.": "You are currently using to discover and be discoverable by existing contacts you know. You can change your identity server below.", + "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 +1287,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 +1406,6 @@ "Not sure of your password? Set a new one": "Not sure of your password? Set a new one", "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 ": "Sign in to your Matrix account on ", - "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.", From 4075cdde7fd094f14996cd9abb3d157bb6761f19 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 9 Aug 2019 18:59:57 +0100 Subject: [PATCH 02/11] lint --- src/components/views/elements/Field.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js index 554d5d6181..b432bd0b8f 100644 --- a/src/components/views/elements/Field.js +++ b/src/components/views/elements/Field.js @@ -138,6 +138,7 @@ export default class Field extends React.PureComponent { render() { const { element, prefix, onValidate, children, tooltip, ...inputProps } = this.props; + !tooltip; // needs to be removed from props but we don't need it here, so otherwise unused variable const inputElement = element || "input"; From 417d9b6af84994cfee7781c1face8e174d076fe5 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 11:50:11 +0100 Subject: [PATCH 03/11] nicer way to appease linter --- src/components/views/elements/Field.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js index b432bd0b8f..c414c35b0b 100644 --- a/src/components/views/elements/Field.js +++ b/src/components/views/elements/Field.js @@ -138,7 +138,7 @@ export default class Field extends React.PureComponent { render() { const { element, prefix, onValidate, children, tooltip, ...inputProps } = this.props; - !tooltip; // needs to be removed from props but we don't need it here, so otherwise unused variable + delete inputProps.tooltip; // needs to be removed from props but we don't need it here const inputElement = element || "input"; From 1067457d63e4b7f3b013233ce6ece343ee306fa0 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 11:51:08 +0100 Subject: [PATCH 04/11] rerun i18n --- src/i18n/strings/en_EN.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 1d7051e361..61d9fbc49e 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -540,12 +540,10 @@ "Identity Server URL must be HTTPS": "Identity Server URL must be HTTPS", "Could not connect to ID Server": "Could not connect to ID Server", "Not a valid ID Server (status code %(code)s)": "Not a valid ID Server (status code %(code)s)", - "Identity Server": "Identity Server", - "Enter the URL of the Identity Server to use": "Enter the URL of the Identity Server to use", - "Looks good": "Looks good", "Checking Server": "Checking Server", "Identity Server (%(server)s)": "Identity Server (%(server)s)", "You are currently using to discover and be discoverable by existing contacts you know. You can change your identity server below.": "You are currently using 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", From bf9caa7fd891a8cde178fb8236a07f4c292d63ce Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 11:51:44 +0100 Subject: [PATCH 05/11] add the rest of the files --- res/css/views/settings/_SetIdServer.scss | 19 ++ src/components/views/settings/SetIdServer.js | 188 +++++++++++++++++++ 2 files changed, 207 insertions(+) create mode 100644 res/css/views/settings/_SetIdServer.scss create mode 100644 src/components/views/settings/SetIdServer.js diff --git a/res/css/views/settings/_SetIdServer.scss b/res/css/views/settings/_SetIdServer.scss new file mode 100644 index 0000000000..c6fcfc8af5 --- /dev/null +++ b/res/css/views/settings/_SetIdServer.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_SetIdServer .mx_Field_input { + width: 300px; +} diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js new file mode 100644 index 0000000000..ba51de46d3 --- /dev/null +++ b/src/components/views/settings/SetIdServer.js @@ -0,0 +1,188 @@ +/* +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 request from 'browser-request'; +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 Field from "../elements/Field"; + +/** + * 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} isUrl The url to check + * @returns {string} null if url passes all checks, otherwise i18ned error string + */ +async function checkIsUrl(isUrl) { + const parsedUrl = url.parse(isUrl); + + 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 + return new Promise((resolve) => { + request( + { method: "GET", url: isUrl + '/_matrix/identity/api/v1' }, + (err, response, body) => { + if (err) { + resolve(_t("Could not connect to ID Server")); + } else if (response.status < 200 || response.status >= 300) { + resolve(_t("Not a valid ID Server (status code %(code)s)", {code: response.status})); + } else { + resolve(null); + } + }, + ); + }); +} + +export default class SetIdServer extends React.Component { + constructor() { + super(); + + let defaultIdServer = MatrixClientPeg.get().getIdentityServerUrl(); + if (!defaultIdServer) { + defaultIdServer = SdkConfig.get()['validated_server_config']['idServer'] || ''; + } + + 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
+ + { _t("Checking Server") } +
; + } else if (this.state.error) { + return this.state.error; + } else { + return null; + } + }; + + _idServerChangeEnabled = () => { + return !!this.state.idServer && !this.state.busy; + }; + + _saveIdServer = async () => { + this.setState({busy: true}); + + const fullUrl = unabbreviateUrl(this.state.idServer); + + const errStr = await checkIsUrl(fullUrl); + if (!errStr) { + MatrixClientPeg.get().setIdentityServerUrl(fullUrl); + localStorage.setItem("mx_is_url", fullUrl); + } + this.setState({ + busy: false, + error: errStr, + currentClientIdServer: MatrixClientPeg.get().getIdentityServerUrl(), + idServer: '', + }); + }; + + 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 to discover and be discoverable by " + + "existing contacts you know. You can change your identity server below.", + {}, + { server: sub => {abbreviateUrl(idServerUrl)} }, + ); + } 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", + ); + } + + return ( +
+ + {sectionTitle} + + + {bodyText} + + + + + ); + } +} From 06905bc5bbddafad6a5c746fa901b785d81ce7bf Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 12:05:25 +0100 Subject: [PATCH 06/11] Actually appease linter --- src/components/views/elements/Field.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js index c414c35b0b..084ec1bd6a 100644 --- a/src/components/views/elements/Field.js +++ b/src/components/views/elements/Field.js @@ -137,7 +137,7 @@ export default class Field extends React.PureComponent { }, VALIDATION_THROTTLE_MS); render() { - const { element, prefix, onValidate, children, tooltip, ...inputProps } = this.props; + const { element, prefix, onValidate, children, ...inputProps } = this.props; delete inputProps.tooltip; // needs to be removed from props but we don't need it here const inputElement = element || "input"; From bc66545fd0e4c9449e149dc495859ae752a878fc Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 13:11:05 +0100 Subject: [PATCH 07/11] shorten url by default --- src/components/views/settings/SetIdServer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js index ba51de46d3..b86b255079 100644 --- a/src/components/views/settings/SetIdServer.js +++ b/src/components/views/settings/SetIdServer.js @@ -88,9 +88,9 @@ export default class SetIdServer extends React.Component { constructor() { super(); - let defaultIdServer = MatrixClientPeg.get().getIdentityServerUrl(); + let defaultIdServer = abbreviateUrl(MatrixClientPeg.get().getIdentityServerUrl()); if (!defaultIdServer) { - defaultIdServer = SdkConfig.get()['validated_server_config']['idServer'] || ''; + defaultIdServer = abbreviateUrl(SdkConfig.get()['validated_server_config']['idServer']) || ''; } this.state = { From 10b19622db3f73c7b009418829283af5c0a6540d Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 13:29:52 +0100 Subject: [PATCH 08/11] Don't clear field on failure --- src/components/views/settings/SetIdServer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js index b86b255079..0140695838 100644 --- a/src/components/views/settings/SetIdServer.js +++ b/src/components/views/settings/SetIdServer.js @@ -131,15 +131,18 @@ export default class SetIdServer extends React.Component { const fullUrl = unabbreviateUrl(this.state.idServer); const errStr = await checkIsUrl(fullUrl); + + let newFormValue = this.state.idServer; if (!errStr) { MatrixClientPeg.get().setIdentityServerUrl(fullUrl); localStorage.setItem("mx_is_url", fullUrl); + newFormValue = ''; } this.setState({ busy: false, error: errStr, currentClientIdServer: MatrixClientPeg.get().getIdentityServerUrl(), - idServer: '', + idServer: newFormValue, }); }; From bc088e447212fc846052fae40bcc2e4721c28d21 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 13:31:31 +0100 Subject: [PATCH 09/11] add comment --- src/components/views/settings/SetIdServer.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js index 0140695838..466ac01dd0 100644 --- a/src/components/views/settings/SetIdServer.js +++ b/src/components/views/settings/SetIdServer.js @@ -70,6 +70,8 @@ async function checkIsUrl(isUrl) { // js-sdk so probably as easy to duplicate it than to separate it out so we can reuse it return new Promise((resolve) => { request( + // also XXX: we don't really know whether to hit /v1 or /v2 for this: we + // probably want a /versions endpoint like the C/S API. { method: "GET", url: isUrl + '/_matrix/identity/api/v1' }, (err, response, body) => { if (err) { From f358b6162ddf4d227a84096e8bfc0429e0f1a5ca Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 14:38:49 +0100 Subject: [PATCH 10/11] Remove the access token for the old IS Pretty important that we don't send that to the new IS... --- src/components/views/settings/SetIdServer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js index 466ac01dd0..393b7aa59d 100644 --- a/src/components/views/settings/SetIdServer.js +++ b/src/components/views/settings/SetIdServer.js @@ -137,6 +137,7 @@ export default class SetIdServer extends React.Component { let newFormValue = this.state.idServer; if (!errStr) { MatrixClientPeg.get().setIdentityServerUrl(fullUrl); + localStorage.removeItem("mx_is_access_token", fullUrl); localStorage.setItem("mx_is_url", fullUrl); newFormValue = ''; } From 4d33438acb9f2e0de9541129cef490b37f46fad1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 12 Aug 2019 14:46:04 +0100 Subject: [PATCH 11/11] c+p fail --- src/components/views/settings/SetIdServer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js index 393b7aa59d..a87fe034a1 100644 --- a/src/components/views/settings/SetIdServer.js +++ b/src/components/views/settings/SetIdServer.js @@ -137,7 +137,7 @@ export default class SetIdServer extends React.Component { let newFormValue = this.state.idServer; if (!errStr) { MatrixClientPeg.get().setIdentityServerUrl(fullUrl); - localStorage.removeItem("mx_is_access_token", fullUrl); + localStorage.removeItem("mx_is_access_token"); localStorage.setItem("mx_is_url", fullUrl); newFormValue = ''; }