Extract each phase to a separate function
J. Ryan Stinnett
parent
a61de03a88
commit
3afc455f3c
|
|
@ -61,7 +61,7 @@ module.exports = React.createClass({
|
||||||
return {
|
return {
|
||||||
enteredHsUrl: this.props.customHsUrl || this.props.defaultHsUrl,
|
enteredHsUrl: this.props.customHsUrl || this.props.defaultHsUrl,
|
||||||
enteredIsUrl: this.props.customIsUrl || this.props.defaultIsUrl,
|
enteredIsUrl: this.props.customIsUrl || this.props.defaultIsUrl,
|
||||||
phase: null,
|
phase: PHASE_FORGOT,
|
||||||
password: null,
|
password: null,
|
||||||
password2: null,
|
password2: null,
|
||||||
errorText: null,
|
errorText: null,
|
||||||
|
|
@ -187,103 +187,127 @@ module.exports = React.createClass({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
renderServerDetails() {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
renderForgot() {
|
||||||
|
const ServerConfig = sdk.getComponent("auth.ServerConfig");
|
||||||
|
|
||||||
|
let serverConfigSection;
|
||||||
|
if (!SdkConfig.get()['disable_custom_urls']) {
|
||||||
|
serverConfigSection = (
|
||||||
|
<ServerConfig ref="serverConfig"
|
||||||
|
defaultHsUrl={this.props.defaultHsUrl}
|
||||||
|
defaultIsUrl={this.props.defaultIsUrl}
|
||||||
|
customHsUrl={this.props.customHsUrl}
|
||||||
|
customIsUrl={this.props.customIsUrl}
|
||||||
|
onServerConfigChange={this.onServerConfigChange}
|
||||||
|
delayTimeMs={0} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
let errorText = null;
|
||||||
|
const err = this.state.errorText || this.props.defaultServerDiscoveryError;
|
||||||
|
if (err) {
|
||||||
|
errorText = <div className="mx_Login_error">{ err }</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
let yourMatrixAccountText = _t('Your account');
|
||||||
|
try {
|
||||||
|
const parsedHsUrl = new URL(this.state.enteredHsUrl);
|
||||||
|
yourMatrixAccountText = _t('Your account on %(serverName)s', {
|
||||||
|
serverName: parsedHsUrl.hostname,
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<h3>
|
||||||
|
{yourMatrixAccountText}
|
||||||
|
</h3>
|
||||||
|
<form onSubmit={this.onSubmitForm}>
|
||||||
|
<div className="mx_AuthBody_fieldRow">
|
||||||
|
<input className="mx_Login_field" ref="user" type="text"
|
||||||
|
name="reset_email" // define a name so browser's password autofill gets less confused
|
||||||
|
value={this.state.email}
|
||||||
|
onChange={this.onInputChanged.bind(this, "email")}
|
||||||
|
placeholder={_t('Email')} autoFocus />
|
||||||
|
</div>
|
||||||
|
<div className="mx_AuthBody_fieldRow">
|
||||||
|
<input className="mx_Login_field" ref="pass" type="password"
|
||||||
|
name="reset_password"
|
||||||
|
value={this.state.password}
|
||||||
|
onChange={this.onInputChanged.bind(this, "password")}
|
||||||
|
placeholder={_t('Password')} />
|
||||||
|
<input className="mx_Login_field" ref="pass" type="password"
|
||||||
|
name="reset_password_confirm"
|
||||||
|
value={this.state.password2}
|
||||||
|
onChange={this.onInputChanged.bind(this, "password2")}
|
||||||
|
placeholder={_t('Confirm')} />
|
||||||
|
</div>
|
||||||
|
<span>{_t(
|
||||||
|
'A verification email will be sent to your inbox to confirm ' +
|
||||||
|
'setting your new password.',
|
||||||
|
)}</span>
|
||||||
|
<input className="mx_Login_submit" type="submit" value={_t('Send Reset Email')} />
|
||||||
|
</form>
|
||||||
|
{serverConfigSection}
|
||||||
|
{errorText}
|
||||||
|
<a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
|
||||||
|
{_t('Sign in instead')}
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
},
|
||||||
|
|
||||||
|
renderSendingEmail() {
|
||||||
|
const Spinner = sdk.getComponent("elements.Spinner");
|
||||||
|
return <Spinner />;
|
||||||
|
},
|
||||||
|
|
||||||
|
renderEmailSent() {
|
||||||
|
return <div>
|
||||||
|
{_t("An email has been sent to %(emailAddress)s. Once you've followed the " +
|
||||||
|
"link it contains, click below.", { emailAddress: this.state.email })}
|
||||||
|
<br />
|
||||||
|
<input className="mx_Login_submit" type="button" onClick={this.onVerify}
|
||||||
|
value={_t('I have verified my email address')} />
|
||||||
|
</div>;
|
||||||
|
},
|
||||||
|
|
||||||
|
renderDone() {
|
||||||
|
return <div>
|
||||||
|
<p>{_t('Your password has been reset')}.</p>
|
||||||
|
<p>{_t('You have been logged out of all devices and will no longer receive push notifications. ' +
|
||||||
|
'To re-enable notifications, sign in again on each device')}.</p>
|
||||||
|
<input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
|
||||||
|
value={_t('Return to login screen')} />
|
||||||
|
</div>;
|
||||||
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
const AuthPage = sdk.getComponent("auth.AuthPage");
|
const AuthPage = sdk.getComponent("auth.AuthPage");
|
||||||
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
||||||
const AuthBody = sdk.getComponent("auth.AuthBody");
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
||||||
const ServerConfig = sdk.getComponent("auth.ServerConfig");
|
|
||||||
const Spinner = sdk.getComponent("elements.Spinner");
|
|
||||||
|
|
||||||
let resetPasswordJsx;
|
let resetPasswordJsx;
|
||||||
|
switch (this.state.phase) {
|
||||||
if (this.state.phase === PHASE_SENDING_EMAIL) {
|
case PHASE_SERVER_DETAILS:
|
||||||
resetPasswordJsx = <Spinner />;
|
resetPasswordJsx = this.renderServerDetails();
|
||||||
} else if (this.state.phase === PHASE_EMAIL_SENT) {
|
break;
|
||||||
resetPasswordJsx = (
|
case PHASE_FORGOT:
|
||||||
<div>
|
resetPasswordJsx = this.renderForgot();
|
||||||
{ _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, " +
|
break;
|
||||||
"click below.", { emailAddress: this.state.email }) }
|
case PHASE_SENDING_EMAIL:
|
||||||
<br />
|
resetPasswordJsx = this.renderSendingEmail();
|
||||||
<input className="mx_Login_submit" type="button" onClick={this.onVerify}
|
break;
|
||||||
value={_t('I have verified my email address')} />
|
case PHASE_EMAIL_SENT:
|
||||||
</div>
|
resetPasswordJsx = this.renderEmailSent();
|
||||||
);
|
break;
|
||||||
} else if (this.state.phase === PHASE_DONE) {
|
case PHASE_DONE:
|
||||||
resetPasswordJsx = (
|
resetPasswordJsx = this.renderDone();
|
||||||
<div>
|
break;
|
||||||
<p>{ _t('Your password has been reset') }.</p>
|
|
||||||
<p>{ _t('You have been logged out of all devices and will no longer receive push notifications. ' +
|
|
||||||
'To re-enable notifications, sign in again on each device') }.</p>
|
|
||||||
<input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
|
|
||||||
value={_t('Return to login screen')} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
let serverConfigSection;
|
|
||||||
if (!SdkConfig.get()['disable_custom_urls']) {
|
|
||||||
serverConfigSection = (
|
|
||||||
<ServerConfig ref="serverConfig"
|
|
||||||
defaultHsUrl={this.props.defaultHsUrl}
|
|
||||||
defaultIsUrl={this.props.defaultIsUrl}
|
|
||||||
customHsUrl={this.props.customHsUrl}
|
|
||||||
customIsUrl={this.props.customIsUrl}
|
|
||||||
onServerConfigChange={this.onServerConfigChange}
|
|
||||||
delayTimeMs={0} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let errorText = null;
|
|
||||||
const err = this.state.errorText || this.props.defaultServerDiscoveryError;
|
|
||||||
if (err) {
|
|
||||||
errorText = <div className="mx_Login_error">{ err }</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
let yourMatrixAccountText = _t('Your account');
|
|
||||||
try {
|
|
||||||
const parsedHsUrl = new URL(this.state.enteredHsUrl);
|
|
||||||
yourMatrixAccountText = _t('Your account on %(serverName)s', {
|
|
||||||
serverName: parsedHsUrl.hostname,
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
|
|
||||||
resetPasswordJsx = <div>
|
|
||||||
<h3>
|
|
||||||
{yourMatrixAccountText}
|
|
||||||
</h3>
|
|
||||||
<form onSubmit={this.onSubmitForm}>
|
|
||||||
<div className="mx_AuthBody_fieldRow">
|
|
||||||
<input className="mx_Login_field" ref="user" type="text"
|
|
||||||
name="reset_email" // define a name so browser's password autofill gets less confused
|
|
||||||
value={this.state.email}
|
|
||||||
onChange={this.onInputChanged.bind(this, "email")}
|
|
||||||
placeholder={_t('Email')} autoFocus />
|
|
||||||
</div>
|
|
||||||
<div className="mx_AuthBody_fieldRow">
|
|
||||||
<input className="mx_Login_field" ref="pass" type="password"
|
|
||||||
name="reset_password"
|
|
||||||
value={this.state.password}
|
|
||||||
onChange={this.onInputChanged.bind(this, "password")}
|
|
||||||
placeholder={_t('Password')} />
|
|
||||||
<input className="mx_Login_field" ref="pass" type="password"
|
|
||||||
name="reset_password_confirm"
|
|
||||||
value={this.state.password2}
|
|
||||||
onChange={this.onInputChanged.bind(this, "password2")}
|
|
||||||
placeholder={_t('Confirm')} />
|
|
||||||
</div>
|
|
||||||
<span>{_t(
|
|
||||||
'A verification email will be sent to your inbox to confirm ' +
|
|
||||||
'setting your new password.',
|
|
||||||
)}</span>
|
|
||||||
<input className="mx_Login_submit" type="submit" value={_t('Send Reset Email')} />
|
|
||||||
</form>
|
|
||||||
{serverConfigSection}
|
|
||||||
{errorText}
|
|
||||||
<a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
|
|
||||||
{_t('Sign in instead')}
|
|
||||||
</a>
|
|
||||||
</div>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue