skin register screen

This commit is contained in:
Matthew Hodgson 2017-10-25 02:04:02 +01:00
parent 67cc02df3b
commit eb4b7c78a0
2 changed files with 59 additions and 37 deletions

View file

@ -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>

View file

@ -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")} />