skin register screen
This commit is contained in:
parent
67cc02df3b
commit
eb4b7c78a0
2 changed files with 59 additions and 37 deletions
|
@ -26,6 +26,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||||
import RegistrationForm from '../../views/login/RegistrationForm';
|
import RegistrationForm from '../../views/login/RegistrationForm';
|
||||||
import RtsClient from '../../../RtsClient';
|
import RtsClient from '../../../RtsClient';
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
|
import UserSettingsStore from '../../../UserSettingsStore';
|
||||||
|
|
||||||
const MIN_PASSWORD_LENGTH = 6;
|
const MIN_PASSWORD_LENGTH = 6;
|
||||||
|
|
||||||
|
@ -327,6 +328,8 @@ module.exports = React.createClass({
|
||||||
const Spinner = sdk.getComponent("elements.Spinner");
|
const Spinner = sdk.getComponent("elements.Spinner");
|
||||||
const ServerConfig = sdk.getComponent('views.login.ServerConfig');
|
const ServerConfig = sdk.getComponent('views.login.ServerConfig');
|
||||||
|
|
||||||
|
const theme = UserSettingsStore.getTheme();
|
||||||
|
|
||||||
let registerBody;
|
let registerBody;
|
||||||
if (this.state.doingUIAuth) {
|
if (this.state.doingUIAuth) {
|
||||||
registerBody = (
|
registerBody = (
|
||||||
|
@ -345,9 +348,19 @@ module.exports = React.createClass({
|
||||||
} else if (this.state.busy || this.state.teamServerBusy) {
|
} else if (this.state.busy || this.state.teamServerBusy) {
|
||||||
registerBody = <Spinner />;
|
registerBody = <Spinner />;
|
||||||
} else {
|
} else {
|
||||||
let errorSection;
|
let serverConfigSection;
|
||||||
if (this.state.errorText) {
|
if (theme !== 'status') {
|
||||||
errorSection = <div className="mx_Login_error">{ this.state.errorText }</div>;
|
serverConfigSection = (
|
||||||
|
<ServerConfig ref="serverConfig"
|
||||||
|
withToggleButton={true}
|
||||||
|
customHsUrl={this.props.customHsUrl}
|
||||||
|
customIsUrl={this.props.customIsUrl}
|
||||||
|
defaultHsUrl={this.props.defaultHsUrl}
|
||||||
|
defaultIsUrl={this.props.defaultIsUrl}
|
||||||
|
onServerConfigChange={this.onServerConfigChange}
|
||||||
|
delayTimeMs={1000}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
registerBody = (
|
registerBody = (
|
||||||
<div>
|
<div>
|
||||||
|
@ -363,16 +376,7 @@ module.exports = React.createClass({
|
||||||
onRegisterClick={this.onFormSubmit}
|
onRegisterClick={this.onFormSubmit}
|
||||||
onTeamSelected={this.onTeamSelected}
|
onTeamSelected={this.onTeamSelected}
|
||||||
/>
|
/>
|
||||||
{ errorSection }
|
{ serverConfigSection }
|
||||||
<ServerConfig ref="serverConfig"
|
|
||||||
withToggleButton={true}
|
|
||||||
customHsUrl={this.props.customHsUrl}
|
|
||||||
customIsUrl={this.props.customIsUrl}
|
|
||||||
defaultHsUrl={this.props.defaultHsUrl}
|
|
||||||
defaultIsUrl={this.props.defaultIsUrl}
|
|
||||||
onServerConfigChange={this.onServerConfigChange}
|
|
||||||
delayTimeMs={1000}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -385,6 +389,17 @@ module.exports = React.createClass({
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let header;
|
||||||
|
let errorText;
|
||||||
|
if (theme === 'status' && this.state.errorText) {
|
||||||
|
header = <div className="mx_Login_error">{ this.state.errorText }</div>;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
header = <h2>{ _t('Create an account') }</h2>;
|
||||||
|
errorText = <div className="mx_Login_error">{ this.state.errorText }</div>;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LoginPage>
|
<LoginPage>
|
||||||
<div className="mx_Login_box">
|
<div className="mx_Login_box">
|
||||||
|
@ -394,11 +409,12 @@ module.exports = React.createClass({
|
||||||
this.state.teamSelected.domain + "/icon.png" :
|
this.state.teamSelected.domain + "/icon.png" :
|
||||||
null}
|
null}
|
||||||
/>
|
/>
|
||||||
<h2>{ _t('Create an account') }</h2>
|
{ header }
|
||||||
{ registerBody }
|
{ registerBody }
|
||||||
<a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
|
<a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
|
||||||
{ _t('I already have an account') }
|
{ theme === 'status' ? _t('Sign in') : _t('I already have an account') }
|
||||||
</a>
|
</a>
|
||||||
|
{ errorText }
|
||||||
{ returnToAppJsx }
|
{ returnToAppJsx }
|
||||||
<LoginFooter />
|
<LoginFooter />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -22,6 +22,7 @@ import Email from '../../../email';
|
||||||
import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
|
import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
|
||||||
import Modal from '../../../Modal';
|
import Modal from '../../../Modal';
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
|
import UserSettingsStore from '../../../UserSettingsStore';
|
||||||
|
|
||||||
const FIELD_EMAIL = 'field_email';
|
const FIELD_EMAIL = 'field_email';
|
||||||
const FIELD_PHONE_COUNTRY = 'field_phone_country';
|
const FIELD_PHONE_COUNTRY = 'field_phone_country';
|
||||||
|
@ -305,29 +306,34 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const theme = UserSettingsStore.getTheme();
|
||||||
|
|
||||||
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
|
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
|
||||||
const phoneSection = (
|
let phoneSection;
|
||||||
<div className="mx_Login_phoneSection">
|
if (theme !== "status") {
|
||||||
<CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
|
phoneSection = (
|
||||||
className="mx_Login_phoneCountry mx_Login_field_prefix"
|
<div className="mx_Login_phoneSection">
|
||||||
value={this.state.phoneCountry}
|
<CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
|
||||||
isSmall={true}
|
className="mx_Login_phoneCountry mx_Login_field_prefix"
|
||||||
showPrefix={true}
|
value={this.state.phoneCountry}
|
||||||
/>
|
isSmall={true}
|
||||||
<input type="text" ref="phoneNumber"
|
showPrefix={true}
|
||||||
placeholder={_t("Mobile phone number (optional)")}
|
/>
|
||||||
defaultValue={this.props.defaultPhoneNumber}
|
<input type="text" ref="phoneNumber"
|
||||||
className={this._classForField(
|
placeholder={_t("Mobile phone number (optional)")}
|
||||||
FIELD_PHONE_NUMBER,
|
defaultValue={this.props.defaultPhoneNumber}
|
||||||
'mx_Login_phoneNumberField',
|
className={this._classForField(
|
||||||
'mx_Login_field',
|
FIELD_PHONE_NUMBER,
|
||||||
'mx_Login_field_has_prefix',
|
'mx_Login_phoneNumberField',
|
||||||
)}
|
'mx_Login_field',
|
||||||
onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
|
'mx_Login_field_has_prefix',
|
||||||
value={self.state.phoneNumber}
|
)}
|
||||||
/>
|
onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
|
||||||
</div>
|
value={self.state.phoneNumber}
|
||||||
);
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const registerButton = (
|
const registerButton = (
|
||||||
<input className="mx_Login_submit" type="submit" value={_t("Register")} />
|
<input className="mx_Login_submit" type="submit" value={_t("Register")} />
|
||||||
|
|
Loading…
Reference in a new issue