Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Refactor "Next" button into ServerConfig components
Browse files Browse the repository at this point in the history 
TODO still remains about making ModularServerConfig extend ServerConfig instead of duplicating everything.

See element-hq/element-web#9290
  • Loading branch information
@turt2live
turt2live committed May 13, 2019
1 parent 8373765 commit ee33a4e
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 96 deletions.
30 changes: 9 additions & 21 deletions src/components/structures/auth/ForgotPassword.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,7 @@ module.exports = React.createClass({
});
},

async onServerDetailsNextPhaseClick(ev) {
ev.stopPropagation();
// TODO: TravisR - Capture the user's input somehow else
if (this._serverConfigRef) {
// Just to make sure the user's input gets captured
await this._serverConfigRef.validateServer();
}
async onServerDetailsNextPhaseClick() {
this.setState({
phase: PHASE_FORGOT,
});
Expand Down Expand Up @@ -160,25 +154,19 @@ module.exports = React.createClass({

renderServerDetails() {
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");

if (SdkConfig.get()['disable_custom_urls']) {
return null;
}

// TODO: TravisR - Pull out server discovery from ServerConfig to disable the next button?
return <div>
<ServerConfig
ref={r => this._serverConfigRef = r}
serverConfig={this.props.serverConfig}
onServerConfigChange={this.props.onServerConfigChange}
delayTimeMs={0} />
<AccessibleButton className="mx_Login_submit"
onClick={this.onServerDetailsNextPhaseClick}
>
{_t("Next")}
</AccessibleButton>
</div>;
return <ServerConfig
serverConfig={this.props.serverConfig}
onServerConfigChange={this.props.onServerConfigChange}
delayTimeMs={0}
onAfterSubmit={this.onServerDetailsNextPhaseClick}
submitText={_t("Next")}
submitClass="mx_Login_submit"
/>;
},

renderForgot() {
Expand Down
38 changes: 12 additions & 26 deletions src/components/structures/auth/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ limitations under the License.

import React from 'react';
import PropTypes from 'prop-types';
import { _t, _td } from '../../../languageHandler';
import {_t, _td} from '../../../languageHandler';
import sdk from '../../../index';
import Login from '../../../Login';
import SdkConfig from '../../../SdkConfig';
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
import {messageForResourceLimitError} from '../../../utils/ErrorUtils';
import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";

// For validating phone numbers without country codes
Expand Down Expand Up @@ -283,13 +283,7 @@ module.exports = React.createClass({
this.props.onRegisterClick();
},

async onServerDetailsNextPhaseClick(ev) {
ev.stopPropagation();
// TODO: TravisR - Capture the user's input somehow else
if (this._serverConfigRef) {
// Just to make sure the user's input gets captured
await this._serverConfigRef.validateServer();
}
async onServerDetailsNextPhaseClick() {
this.setState({
phase: PHASE_LOGIN,
});
Expand Down Expand Up @@ -421,7 +415,6 @@ module.exports = React.createClass({

renderServerComponent() {
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");

if (SdkConfig.get()['disable_custom_urls']) {
return null;
Expand All @@ -431,26 +424,19 @@ module.exports = React.createClass({
return null;
}

const serverDetails = <ServerConfig
ref={r => this._serverConfigRef = r}
const serverDetailsProps = {};
if (PHASES_ENABLED) {
serverDetailsProps.onAfterSubmit = this.onServerDetailsNextPhaseClick;
serverDetailsProps.submitText = _t("Next");
serverDetailsProps.submitClass = "mx_Login_submit";
}

return <ServerConfig
serverConfig={this.props.serverConfig}
onServerConfigChange={this.props.onServerConfigChange}
delayTimeMs={250}
{...serverDetailsProps}
/>;

let nextButton = null;
if (PHASES_ENABLED) {
// TODO: TravisR - Pull out server discovery from ServerConfig to disable the next button?
nextButton = <AccessibleButton className="mx_Login_submit"
onClick={this.onServerDetailsNextPhaseClick}>
{_t("Next")}
</AccessibleButton>;
}

return <div>
{serverDetails}
{nextButton}
</div>;
},

renderLoginComponentForStep() {
Expand Down
31 changes: 10 additions & 21 deletions src/components/structures/auth/Registration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,13 +286,7 @@ module.exports = React.createClass({
});
},

async onServerDetailsNextPhaseClick(ev) {
ev.stopPropagation();
// TODO: TravisR - Capture the user's input somehow else
if (this._serverConfigRef) {
// Just to make sure the user's input gets captured
await this._serverConfigRef.validateServer();
}
async onServerDetailsNextPhaseClick() {
this.setState({
phase: PHASE_REGISTRATION,
});
Expand Down Expand Up @@ -337,7 +331,6 @@ module.exports = React.createClass({
const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");

if (SdkConfig.get()['disable_custom_urls']) {
return null;
Expand All @@ -354,45 +347,41 @@ module.exports = React.createClass({
</div>;
}

const serverDetailsProps = {};
if (PHASES_ENABLED) {
serverDetailsProps.onAfterSubmit = this.onServerDetailsNextPhaseClick;
serverDetailsProps.submitText = _t("Next");
serverDetailsProps.submitClass = "mx_Login_submit";
}

let serverDetails = null;
switch (this.state.serverType) {
case ServerType.FREE:
break;
case ServerType.PREMIUM:
serverDetails = <ModularServerConfig
ref={r => this._serverConfigRef = r}
serverConfig={this.props.serverConfig}
onServerConfigChange={this.props.onServerConfigChange}
delayTimeMs={250}
{...serverDetailsProps}
/>;
break;
case ServerType.ADVANCED:
serverDetails = <ServerConfig
ref={r => this._serverConfigRef = r}
serverConfig={this.props.serverConfig}
onServerConfigChange={this.props.onServerConfigChange}
delayTimeMs={250}
{...serverDetailsProps}
/>;
break;
}

let nextButton = null;
if (PHASES_ENABLED) {
// TODO: TravisR - Pull out server discovery from ServerConfig to disable the next button?
nextButton = <AccessibleButton className="mx_Login_submit"
onClick={this.onServerDetailsNextPhaseClick}
>
{_t("Next")}
</AccessibleButton>;
}

return <div>
<ServerTypeSelector
selected={this.state.serverType}
onChange={this.onServerTypeChange}
/>
{serverDetails}
{nextButton}
</div>;
},

Expand Down
51 changes: 42 additions & 9 deletions src/components/views/auth/ModularServerConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,16 @@ export default class ModularServerConfig extends React.PureComponent {
serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,

delayTimeMs: PropTypes.number, // time to wait before invoking onChanged

// Called after the component calls onServerConfigChange
onAfterSubmit: PropTypes.func,

// Optional text for the submit button. If falsey, no button will be shown.
submitText: PropTypes.string,

// Optional class for the submit button. Only applies if the submit button
// is to be rendered.
submitClass: PropTypes.string,
};

static defaultProps = {
Expand Down Expand Up @@ -119,6 +129,16 @@ export default class ModularServerConfig extends React.PureComponent {
this.setState({ hsUrl });
};

onSubmit = async (ev) => {
ev.preventDefault();
ev.stopPropagation();
await this.validateServer();

if (this.props.onAfterSubmit) {
this.props.onAfterSubmit();
}
};

_waitThenInvoke(existingTimeoutId, fn) {
if (existingTimeoutId) {
clearTimeout(existingTimeoutId);
Expand All @@ -128,6 +148,16 @@ export default class ModularServerConfig extends React.PureComponent {

render() {
const Field = sdk.getComponent('elements.Field');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');

const submitButton = this.props.submitText
? <AccessibleButton
element="button"
type="submit"
className={this.props.submitClass}
onClick={this.onSubmit}
disabled={this.state.busy}>{this.props.submitText}</AccessibleButton>
: null;

return (
<div className="mx_ServerConfig">
Expand All @@ -141,15 +171,18 @@ export default class ModularServerConfig extends React.PureComponent {
</a>,
},
)}
<div className="mx_ServerConfig_fields">
<Field id="mx_ServerConfig_hsUrl"
label={_t("Server Name")}
placeholder={this.props.serverConfig.hsUrl}
value={this.state.hsUrl}
onBlur={this.onHomeserverBlur}
onChange={this.onHomeserverChange}
/>
</div>
<form onSubmit={this.onSubmit} autoComplete={false} action={null}>
<div className="mx_ServerConfig_fields">
<Field id="mx_ServerConfig_hsUrl"
label={_t("Server Name")}
placeholder={this.props.serverConfig.hsUrl}
value={this.state.hsUrl}
onBlur={this.onHomeserverBlur}
onChange={this.onHomeserverChange}
/>
</div>
{submitButton}
</form>
</div>
);
}
Expand Down
71 changes: 52 additions & 19 deletions src/components/views/auth/ServerConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,22 @@ import SdkConfig from "../../../SdkConfig";

export default class ServerConfig extends React.PureComponent {
static propTypes = {
onServerConfigChange: PropTypes.func,
onServerConfigChange: PropTypes.func.isRequired,

// The current configuration that the user is expecting to change.
serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,

delayTimeMs: PropTypes.number, // time to wait before invoking onChanged

// Called after the component calls onServerConfigChange
onAfterSubmit: PropTypes.func,

// Optional text for the submit button. If falsey, no button will be shown.
submitText: PropTypes.string,

// Optional class for the submit button. Only applies if the submit button
// is to be rendered.
submitClass: PropTypes.string,
};

static defaultProps = {
Expand Down Expand Up @@ -124,6 +134,16 @@ export default class ServerConfig extends React.PureComponent {
this.setState({ isUrl });
};

onSubmit = async (ev) => {
ev.preventDefault();
ev.stopPropagation();
await this.validateServer();

if (this.props.onAfterSubmit) {
this.props.onAfterSubmit();
}
};

_waitThenInvoke(existingTimeoutId, fn) {
if (existingTimeoutId) {
clearTimeout(existingTimeoutId);
Expand All @@ -138,11 +158,21 @@ export default class ServerConfig extends React.PureComponent {

render() {
const Field = sdk.getComponent('elements.Field');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');

const errorText = this.state.errorText
? <span className='mx_ServerConfig_error'>{this.state.errorText}</span>
: null;

const submitButton = this.props.submitText
? <AccessibleButton
element="button"
type="submit"
className={this.props.submitClass}
onClick={this.onSubmit}
disabled={this.state.busy}>{this.props.submitText}</AccessibleButton>
: null;

return (
<div className="mx_ServerConfig">
<h3>{_t("Other servers")}</h3>
Expand All @@ -152,24 +182,27 @@ export default class ServerConfig extends React.PureComponent {
</a>,
})}
{errorText}
<div className="mx_ServerConfig_fields">
<Field id="mx_ServerConfig_hsUrl"
label={_t("Homeserver URL")}
placeholder={this.props.serverConfig.hsUrl}
value={this.state.hsUrl}
onBlur={this.onHomeserverBlur}
onChange={this.onHomeserverChange}
disabled={this.state.busy}
/>
<Field id="mx_ServerConfig_isUrl"
label={_t("Identity Server URL")}
placeholder={this.props.serverConfig.isUrl}
value={this.state.isUrl}
onBlur={this.onIdentityServerBlur}
onChange={this.onIdentityServerChange}
disabled={this.state.busy}
/>
</div>
<form onSubmit={this.onSubmit} autoComplete={false} action={null}>
<div className="mx_ServerConfig_fields">
<Field id="mx_ServerConfig_hsUrl"
label={_t("Homeserver URL")}
placeholder={this.props.serverConfig.hsUrl}
value={this.state.hsUrl}
onBlur={this.onHomeserverBlur}
onChange={this.onHomeserverChange}
disabled={this.state.busy}
/>
<Field id="mx_ServerConfig_isUrl"
label={_t("Identity Server URL")}
placeholder={this.props.serverConfig.isUrl}
value={this.state.isUrl}
onBlur={this.onIdentityServerBlur}
onChange={this.onIdentityServerChange}
disabled={this.state.busy}
/>
</div>
{submitButton}
</form>
</div>
);
}
Expand Down

0 comments on commit ee33a4e

Please sign in to comment.