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

@@ -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;

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 <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, 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 = <Tooltip
+        let fieldTooltip;
+        if (this.props.tooltip || this.state.feedback) {
+            fieldTooltip = <Tooltip
                 tooltipClassName="mx_Field_tooltip"
                 visible={this.state.feedbackVisible}
-                label={this.state.feedback}
+                label={this.props.tooltip || 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/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 (
             <div className="mx_SettingsTab_section">
@@ -179,6 +180,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

@@ -537,6 +537,17 @@
     "<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",
+    "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 <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.",
+    "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? <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.",