Merge pull request #3300 from matrix-org/dbkr/change_is
Add UI in settings to change ID Server
This commit is contained in:
David Baker
GitHub
commit
e2c5dc6bac
13 changed files with 273 additions and 20 deletions
|
|
@ -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;
|
||||
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}
|
||||
/>;
|
||||
}
|
||||
|
||||
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
196
src/components/views/settings/SetIdServer.js
Normal file
196
src/components/views/settings/SetIdServer.js
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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");
|
||||
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 = {
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue