Validate server URLs on blur instead of change

This commit is contained in:
J. Ryan Stinnett 2019-01-29 23:47:35 -06:00
parent f60cfe5cb2
commit 36d162cb25
4 changed files with 49 additions and 34 deletions

View file

@ -571,7 +571,7 @@ module.exports = React.createClass({
defaultHsUrl={this.props.defaultHsUrl} defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl} defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange} onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000} delayTimeMs={250}
/>; />;
break; break;
case ServerType.ADVANCED: case ServerType.ADVANCED:
@ -581,7 +581,7 @@ module.exports = React.createClass({
defaultHsUrl={this.props.defaultHsUrl} defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl} defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange} onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000} delayTimeMs={250}
/>; />;
break; break;
} }

View file

@ -151,6 +151,9 @@ module.exports = React.createClass({
}, },
_replaceClient: async function() { _replaceClient: async function() {
this.setState({
errorText: null,
});
this._matrixClient = Matrix.createClient({ this._matrixClient = Matrix.createClient({
baseUrl: this.state.hsUrl, baseUrl: this.state.hsUrl,
idBaseUrl: this.state.isUrl, idBaseUrl: this.state.isUrl,
@ -390,7 +393,7 @@ module.exports = React.createClass({
defaultHsUrl={this.props.defaultHsUrl} defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl} defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange} onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000} delayTimeMs={250}
/>; />;
break; break;
case ServerType.ADVANCED: case ServerType.ADVANCED:
@ -400,7 +403,7 @@ module.exports = React.createClass({
defaultHsUrl={this.props.defaultHsUrl} defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl} defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange} onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000} delayTimeMs={250}
/>; />;
break; break;
} }

View file

@ -77,19 +77,22 @@ export default class ModularServerConfig extends React.PureComponent {
}); });
} }
onHomeserverChanged = (ev) => { onHomeserverBlur = (ev) => {
this.setState({hsUrl: ev.target.value}, () => { this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => { let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
let hsUrl = this.state.hsUrl.trim().replace(/\/$/, ""); if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
if (hsUrl === "") hsUrl = this.props.defaultHsUrl; this.props.onServerConfigChange({
this.props.onServerConfigChange({ hsUrl: this.state.hsUrl,
hsUrl: this.state.hsUrl, isUrl: this.props.defaultIsUrl,
isUrl: this.props.defaultIsUrl,
});
}); });
}); });
} }
onHomeserverChange = (ev) => {
const hsUrl = ev.target.value;
this.setState({ hsUrl });
}
_waitThenInvoke(existingTimeoutId, fn) { _waitThenInvoke(existingTimeoutId, fn) {
if (existingTimeoutId) { if (existingTimeoutId) {
clearTimeout(existingTimeoutId); clearTimeout(existingTimeoutId);
@ -117,7 +120,8 @@ export default class ModularServerConfig extends React.PureComponent {
label={_t("Server Name")} label={_t("Server Name")}
placeholder={this.props.defaultHsUrl} placeholder={this.props.defaultHsUrl}
value={this.state.hsUrl} value={this.state.hsUrl}
onChange={this.onHomeserverChanged} onBlur={this.onHomeserverBlur}
onChange={this.onHomeserverChange}
/> />
</div> </div>
</div> </div>

View file

@ -76,32 +76,38 @@ export default class ServerConfig extends React.PureComponent {
}); });
} }
onHomeserverChanged = (ev) => { onHomeserverBlur = (ev) => {
this.setState({hsUrl: ev.target.value}, () => { this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => { let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
let hsUrl = this.state.hsUrl.trim().replace(/\/$/, ""); if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
if (hsUrl === "") hsUrl = this.props.defaultHsUrl; this.props.onServerConfigChange({
this.props.onServerConfigChange({ hsUrl: this.state.hsUrl,
hsUrl: this.state.hsUrl, isUrl: this.state.isUrl,
isUrl: this.state.isUrl,
});
}); });
}); });
} }
onIdentityServerChanged = (ev) => { onHomeserverChange = (ev) => {
this.setState({isUrl: ev.target.value}, () => { const hsUrl = ev.target.value;
this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => { this.setState({ hsUrl });
let isUrl = this.state.isUrl.trim().replace(/\/$/, ""); }
if (isUrl === "") isUrl = this.props.defaultIsUrl;
this.props.onServerConfigChange({ onIdentityServerBlur = (ev) => {
hsUrl: this.state.hsUrl, this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => {
isUrl: this.state.isUrl, let isUrl = this.state.isUrl.trim().replace(/\/$/, "");
}); if (isUrl === "") isUrl = this.props.defaultIsUrl;
this.props.onServerConfigChange({
hsUrl: this.state.hsUrl,
isUrl: this.state.isUrl,
}); });
}); });
} }
onIdentityServerChange = (ev) => {
const isUrl = ev.target.value;
this.setState({ isUrl });
}
_waitThenInvoke(existingTimeoutId, fn) { _waitThenInvoke(existingTimeoutId, fn) {
if (existingTimeoutId) { if (existingTimeoutId) {
clearTimeout(existingTimeoutId); clearTimeout(existingTimeoutId);
@ -130,13 +136,15 @@ export default class ServerConfig extends React.PureComponent {
label={_t("Homeserver URL")} label={_t("Homeserver URL")}
placeholder={this.props.defaultHsUrl} placeholder={this.props.defaultHsUrl}
value={this.state.hsUrl} value={this.state.hsUrl}
onChange={this.onHomeserverChanged} onBlur={this.onHomeserverBlur}
onChange={this.onHomeserverChange}
/> />
<Field id="mx_ServerConfig_isUrl" <Field id="mx_ServerConfig_isUrl"
label={_t("Identity Server URL")} label={_t("Identity Server URL")}
placeholder={this.props.defaultIsUrl} placeholder={this.props.defaultIsUrl}
value={this.state.isUrl} value={this.state.isUrl}
onChange={this.onIdentityServerChanged} onBlur={this.onIdentityServerBlur}
onChange={this.onIdentityServerChange}
/> />
</div> </div>
</div> </div>