mplement custom registration screen

This commit is contained in:
David Baker 2015-07-16 15:15:14 +01:00
parent 41bab56133
commit dac94d2293
2 changed files with 65 additions and 13 deletions

View File

@ -27,9 +27,18 @@ var RegisterController = require("../../../../src/controllers/templates/Register
var ServerConfig = ComponentBroker.get("molecules/ServerConfig"); var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
module.exports = React.createClass({ module.exports = React.createClass({
DEFAULT_HS_URL: 'https://matrix.org',
DEFAULT_IS_URL: 'https://matrix.org',
displayName: 'Register', displayName: 'Register',
mixins: [RegisterController], mixins: [RegisterController],
getInitialState: function() {
return {
serverConfigVisible: false
};
},
getRegFormVals: function() { getRegFormVals: function() {
return { return {
email: this.refs.email.getDOMNode().value, email: this.refs.email.getDOMNode().value,
@ -40,24 +49,65 @@ module.exports = React.createClass({
}, },
getHsUrl: function() { getHsUrl: function() {
if (this.state.serverConfigVisible) {
return this.refs.serverConfig.getHsUrl(); return this.refs.serverConfig.getHsUrl();
} else {
return this.DEFAULT_HS_URL;
}
}, },
getIsUrl: function() { getIsUrl: function() {
if (this.state.serverConfigVisible) {
return this.refs.serverConfig.getIsUrl(); return this.refs.serverConfig.getIsUrl();
} else {
return this.DEFAULT_IS_URL;
}
},
onServerConfigVisibleChange: function(ev) {
this.setState({
serverConfigVisible: ev.target.checked
});
},
getUserIdSuffix: function() {
var actualHsUrl = document.createElement('a');
actualHsUrl.href = this.getHsUrl();
var defaultHsUrl = document.createElement('a');
defaultHsUrl.href = this.DEFAULT_HS_URL;
if (actualHsUrl.host == defaultHsUrl.host) {
return ':matrix.org';
}
return '';
},
onServerUrlChanged: function(newUrl) {
this.forceUpdate();
}, },
componentForStep: function(step) { componentForStep: function(step) {
switch (step) { switch (step) {
case 'initial': case 'initial':
var serverConfigStyle = {};
if (!this.state.serverConfigVisible) {
serverConfigStyle.display = 'none';
}
return ( return (
<div> <div>
<form onSubmit={this.onInitialStageSubmit}> <form onSubmit={this.onInitialStageSubmit}>
Email: <input type="text" ref="email" defaultValue={this.savedParams.email} /><br /> Email: <input type="text" ref="email" defaultValue={this.savedParams.email} /><br />
Username: <input type="text" ref="username" defaultValue={this.savedParams.username} /><br /> Username: <input type="text" ref="username" defaultValue={this.savedParams.username} />{this.getUserIdSuffix()}<br />
Password: <input type="password" ref="password" defaultValue={this.savedParams.password} /><br /> Password: <input type="password" ref="password" defaultValue={this.savedParams.password} /><br />
Confirm Password: <input type="password" ref="confirmPassword" defaultValue={this.savedParams.confirmPassword} /><br /> Confirm Password: <input type="password" ref="confirmPassword" defaultValue={this.savedParams.confirmPassword} /><br />
<ServerConfig ref="serverConfig" />
<input type="checkbox" value={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
Use custom server options (advanced)
<div style={serverConfigStyle}>
<ServerConfig ref="serverConfig"
defaultHsUrl={this.default_hs_url} defaultIsUrl={this.DEFAULT_IS_URL}
onHsUrlChanged={this.onServerUrlChanged} onIsUrlChanged={this.onServerUrlChanged} />
</div>
<br />
<input type="submit" value="Continue" /> <input type="submit" value="Continue" />
</form> </form>
</div> </div>
@ -87,7 +137,7 @@ module.exports = React.createClass({
} else { } else {
return ( return (
<div> <div>
<h1>Create a new account:</h1> <h1>Create an account</h1>
{this.componentForStep(this.state.step)} {this.componentForStep(this.state.step)}
<div className="error">{this.state.errorText}</div> <div className="error">{this.state.errorText}</div>
<a onClick={this.showLogin} href="#">Sign in with existing account</a> <a onClick={this.showLogin} href="#">Sign in with existing account</a>

View File

@ -30,26 +30,28 @@ module.exports = {
return { return {
onHsUrlChanged: function() {}, onHsUrlChanged: function() {},
onIsUrlChanged: function() {}, onIsUrlChanged: function() {},
default_hs_url: 'https://matrix.org/', defaultHsUrl: 'https://matrix.org/',
default_is_url: 'https://matrix.org/' defaultIsUrl: 'https://matrix.org/'
}; };
}, },
getInitialState: function() { getInitialState: function() {
return { return {
hs_url: this.props.default_hs_url, hs_url: this.props.defaultHsUrl,
is_url: this.props.default_is_url, is_url: this.props.defaultIsUrl,
} }
}, },
hsChanged: function(ev) { hsChanged: function(ev) {
this.setState({hs_url: ev.target.value}); this.setState({hs_url: ev.target.value}, function() {
this.props.onHsUrlChanged(this.state.hs_url); this.props.onHsUrlChanged(this.state.hs_url);
});
}, },
isChanged: function(ev) { isChanged: function(ev) {
this.setState({is_url: ev.target.value}); this.setState({is_url: ev.target.value}, function() {
this.props.onIsUrlChanged(this.state.is_url); this.props.onIsUrlChanged(this.state.is_url);
});
}, },
getHsUrl: function() { getHsUrl: function() {