Merge pull request #399 from vector-im/kegan/reg-refactor
Refactor registration
This commit is contained in:
Kegsay
commit
99ccff098c
|
|
@ -0,0 +1,266 @@
|
|||
/*
|
||||
Copyright 2015 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
var sdk = require('matrix-react-sdk');
|
||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
||||
var ServerConfig = require("./ServerConfig");
|
||||
var RegistrationForm = require("./RegistrationForm");
|
||||
var CaptchaForm = require("matrix-react-sdk/lib/components/login/CaptchaForm");
|
||||
var Signup = require("matrix-react-sdk/lib/Signup");
|
||||
var MIN_PASSWORD_LENGTH = 6;
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'Registration',
|
||||
|
||||
propTypes: {
|
||||
onLoggedIn: React.PropTypes.func.isRequired,
|
||||
clientSecret: React.PropTypes.string,
|
||||
sessionId: React.PropTypes.string,
|
||||
registrationUrl: React.PropTypes.string,
|
||||
idSid: React.PropTypes.string,
|
||||
hsUrl: React.PropTypes.string,
|
||||
isUrl: React.PropTypes.string,
|
||||
// registration shouldn't know or care how login is done.
|
||||
onLoginClick: React.PropTypes.func.isRequired
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
busy: false,
|
||||
errorText: null,
|
||||
enteredHomeserverUrl: this.props.hsUrl,
|
||||
enteredIdentityServerUrl: this.props.isUrl
|
||||
};
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
this.dispatcherRef = dis.register(this.onAction);
|
||||
// attach this to the instance rather than this.state since it isn't UI
|
||||
this.registerLogic = new Signup.Register(
|
||||
this.props.hsUrl, this.props.isUrl
|
||||
);
|
||||
this.registerLogic.setClientSecret(this.props.clientSecret);
|
||||
this.registerLogic.setSessionId(this.props.sessionId);
|
||||
this.registerLogic.setRegistrationUrl(this.props.registrationUrl);
|
||||
this.registerLogic.setIdSid(this.props.idSid);
|
||||
this.registerLogic.recheckState();
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
dis.unregister(this.dispatcherRef);
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
// may have already done an HTTP hit (e.g. redirect from an email) so
|
||||
// check for any pending response
|
||||
var promise = this.registerLogic.getPromise();
|
||||
if (promise) {
|
||||
this.onProcessingRegistration(promise);
|
||||
}
|
||||
},
|
||||
|
||||
onHsUrlChanged: function(newHsUrl) {
|
||||
this.registerLogic.setHomeserverUrl(newHsUrl);
|
||||
},
|
||||
|
||||
onIsUrlChanged: function(newIsUrl) {
|
||||
this.registerLogic.setIdentityServerUrl(newIsUrl);
|
||||
},
|
||||
|
||||
onAction: function(payload) {
|
||||
if (payload.action !== "registration_step_update") {
|
||||
return;
|
||||
}
|
||||
this.forceUpdate(); // registration state has changed.
|
||||
},
|
||||
|
||||
onFormSubmit: function(formVals) {
|
||||
var self = this;
|
||||
this.setState({
|
||||
errorText: "",
|
||||
busy: true
|
||||
});
|
||||
this.onProcessingRegistration(this.registerLogic.register(formVals));
|
||||
},
|
||||
|
||||
// Promise is resolved when the registration process is FULLY COMPLETE
|
||||
onProcessingRegistration: function(promise) {
|
||||
var self = this;
|
||||
promise.done(function(response) {
|
||||
if (!response || !response.access_token) {
|
||||
console.warn(
|
||||
"FIXME: Register fulfilled without a final response, " +
|
||||
"did you break the promise chain?"
|
||||
);
|
||||
// no matter, we'll grab it direct
|
||||
response = self.registerLogic.getCredentials();
|
||||
}
|
||||
if (!response || !response.user_id || !response.access_token) {
|
||||
console.error("Final response is missing keys.");
|
||||
self.setState({
|
||||
errorText: "There was a problem processing the response."
|
||||
});
|
||||
return;
|
||||
}
|
||||
self.props.onLoggedIn({
|
||||
userId: response.user_id,
|
||||
homeserverUrl: self.registerLogic.getHomeserverUrl(),
|
||||
identityServerUrl: self.registerLogic.getIdentityServerUrl(),
|
||||
accessToken: response.access_token
|
||||
});
|
||||
self.setState({
|
||||
busy: false
|
||||
});
|
||||
}, function(err) {
|
||||
if (err.message) {
|
||||
self.setState({
|
||||
errorText: err.message
|
||||
});
|
||||
}
|
||||
self.setState({
|
||||
busy: false
|
||||
});
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
|
||||
onFormValidationFailed: function(errCode) {
|
||||
var errMsg;
|
||||
switch (errCode) {
|
||||
case "RegistrationForm.ERR_PASSWORD_MISSING":
|
||||
errMsg = "Missing password.";
|
||||
break;
|
||||
case "RegistrationForm.ERR_PASSWORD_MISMATCH":
|
||||
errMsg = "Passwords don't match.";
|
||||
break;
|
||||
case "RegistrationForm.ERR_PASSWORD_LENGTH":
|
||||
errMsg = `Password too short (min ${MIN_PASSWORD_LENGTH}).`;
|
||||
break;
|
||||
default:
|
||||
console.error("Unknown error code: %s", errCode);
|
||||
errMsg = "An unknown error occurred.";
|
||||
break;
|
||||
}
|
||||
this.setState({
|
||||
errorText: errMsg
|
||||
});
|
||||
},
|
||||
|
||||
onCaptchaLoaded: function(divIdName) {
|
||||
this.registerLogic.tellStage("m.login.recaptcha", {
|
||||
divId: divIdName
|
||||
});
|
||||
this.setState({
|
||||
busy: false // requires user input
|
||||
});
|
||||
},
|
||||
|
||||
// TODO:
|
||||
// This should really be a different component which MatrixChat then
|
||||
// instantiates rather than having it pollute registration logic. There is
|
||||
// no reason to wedge them together here. This function is currently NOT CALLED.
|
||||
_getPostRegisterJsx: function() {
|
||||
var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
|
||||
var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
|
||||
return (
|
||||
<div className="mx_Login_profile">
|
||||
Set a display name:
|
||||
<ChangeDisplayName />
|
||||
Upload an avatar:
|
||||
<ChangeAvatar
|
||||
initialAvatarUrl={MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl)} />
|
||||
<button onClick={this.onProfileContinueClicked}>Continue</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
_getRegisterContentJsx: function() {
|
||||
var currStep = this.registerLogic.getStep();
|
||||
var registerStep;
|
||||
switch (currStep) {
|
||||
case "Register.COMPLETE":
|
||||
return; // this._getPostRegisterJsx();
|
||||
case "Register.START":
|
||||
case "Register.STEP_m.login.dummy":
|
||||
registerStep = (
|
||||
<RegistrationForm
|
||||
showEmail={true}
|
||||
minPasswordLength={MIN_PASSWORD_LENGTH}
|
||||
onError={this.onFormValidationFailed}
|
||||
onRegisterClick={this.onFormSubmit} />
|
||||
);
|
||||
break;
|
||||
case "Register.STEP_m.login.email.identity":
|
||||
registerStep = (
|
||||
<div>
|
||||
Please check your email to continue registration.
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
case "Register.STEP_m.login.recaptcha":
|
||||
registerStep = (
|
||||
<CaptchaForm onCaptchaLoaded={this.onCaptchaLoaded} />
|
||||
);
|
||||
break;
|
||||
default:
|
||||
console.error("Unknown register state: %s", currStep);
|
||||
break;
|
||||
}
|
||||
var busySpinner;
|
||||
if (this.state.busy) {
|
||||
var Spinner = sdk.getComponent("atoms.Spinner");
|
||||
busySpinner = (
|
||||
<Spinner />
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<h2>Create an account</h2>
|
||||
{registerStep}
|
||||
<div className="mx_Login_error">{this.state.errorText}</div>
|
||||
{busySpinner}
|
||||
<ServerConfig ref="serverConfig"
|
||||
withToggleButton={true}
|
||||
defaultHsUrl={this.state.enteredHomeserverUrl}
|
||||
defaultIsUrl={this.state.enteredIdentityServerUrl}
|
||||
onHsUrlChanged={this.onHsUrlChanged}
|
||||
onIsUrlChanged={this.onIsUrlChanged}
|
||||
delayTimeMs={1000} />
|
||||
<a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
|
||||
I already have an account
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_Login">
|
||||
<div className="mx_Login_box">
|
||||
<div className="mx_Login_logo">
|
||||
<img src="img/logo.png" width="249" height="78" alt="vector"/>
|
||||
</div>
|
||||
{this._getRegisterContentJsx()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/*
|
||||
Copyright 2015 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var sdk = require('matrix-react-sdk')
|
||||
|
||||
/**
|
||||
* A pure UI component which displays a registration form.
|
||||
*/
|
||||
module.exports = React.createClass({
|
||||
displayName: 'RegistrationForm',
|
||||
|
||||
propTypes: {
|
||||
defaultEmail: React.PropTypes.string,
|
||||
defaultUsername: React.PropTypes.string,
|
||||
showEmail: React.PropTypes.bool,
|
||||
minPasswordLength: React.PropTypes.number,
|
||||
onError: React.PropTypes.func,
|
||||
onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
showEmail: false,
|
||||
minPasswordLength: 6,
|
||||
onError: function(e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
email: this.props.defaultEmail,
|
||||
username: this.props.defaultUsername,
|
||||
password: null,
|
||||
passwordConfirm: null
|
||||
};
|
||||
},
|
||||
|
||||
onSubmit: function(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
var pwd1 = this.refs.password.value.trim();
|
||||
var pwd2 = this.refs.passwordConfirm.value.trim()
|
||||
|
||||
var errCode;
|
||||
if (!pwd1 || !pwd2) {
|
||||
errCode = "RegistrationForm.ERR_PASSWORD_MISSING";
|
||||
}
|
||||
else if (pwd1 !== pwd2) {
|
||||
errCode = "RegistrationForm.ERR_PASSWORD_MISMATCH";
|
||||
}
|
||||
else if (pwd1.length < this.props.minPasswordLength) {
|
||||
errCode = "RegistrationForm.ERR_PASSWORD_LENGTH";
|
||||
}
|
||||
if (errCode) {
|
||||
this.props.onError(errCode);
|
||||
return;
|
||||
}
|
||||
|
||||
var promise = this.props.onRegisterClick({
|
||||
username: this.refs.username.value.trim(),
|
||||
password: pwd1,
|
||||
email: this.refs.email.value.trim()
|
||||
});
|
||||
|
||||
if (promise) {
|
||||
ev.target.disabled = true;
|
||||
promise.finally(function() {
|
||||
ev.target.disabled = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var emailSection, registerButton;
|
||||
if (this.props.showEmail) {
|
||||
emailSection = (
|
||||
<input className="mx_Login_field" type="text" ref="email"
|
||||
autoFocus={true} placeholder="Email address"
|
||||
defaultValue={this.state.email} />
|
||||
);
|
||||
}
|
||||
if (this.props.onRegisterClick) {
|
||||
registerButton = (
|
||||
<input className="mx_Login_submit" type="submit" value="Register" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
{emailSection}
|
||||
<br />
|
||||
<input className="mx_Login_field" type="text" ref="username"
|
||||
placeholder="User name" defaultValue={this.state.username} />
|
||||
<br />
|
||||
<input className="mx_Login_field" type="password" ref="password"
|
||||
placeholder="Password" defaultValue={this.state.password} />
|
||||
<br />
|
||||
<input className="mx_Login_field" type="password" ref="passwordConfirm"
|
||||
placeholder="Confirm password"
|
||||
defaultValue={this.state.passwordConfirm} />
|
||||
<br />
|
||||
{registerButton}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
/*
|
||||
Copyright 2015 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var extend = require('matrix-react-sdk/lib/extend');
|
||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
||||
var BaseRegisterController = require('matrix-react-sdk/lib/controllers/templates/Register.js');
|
||||
|
||||
var RegisterController = {};
|
||||
extend(RegisterController, BaseRegisterController);
|
||||
|
||||
RegisterController.onRegistered = function(user_id, access_token) {
|
||||
MatrixClientPeg.replaceUsingAccessToken(
|
||||
this.state.hs_url, this.state.is_url, user_id, access_token
|
||||
);
|
||||
|
||||
this.setState({
|
||||
step: 'profile',
|
||||
busy: true
|
||||
});
|
||||
|
||||
var self = this;
|
||||
var cli = MatrixClientPeg.get();
|
||||
cli.getProfileInfo(cli.credentials.userId).done(function(result) {
|
||||
self.setState({
|
||||
avatarUrl: result.avatar_url,
|
||||
busy: false
|
||||
});
|
||||
},
|
||||
function(err) {
|
||||
console.err(err);
|
||||
self.setState({
|
||||
busy: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
RegisterController.onAccountReady = function() {
|
||||
if (this.props.onLoggedIn) {
|
||||
this.props.onLoggedIn();
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = RegisterController;
|
||||
|
|
@ -85,6 +85,5 @@ skin['organisms.UserSettings'] = require('./views/organisms/UserSettings');
|
|||
skin['organisms.ViewSource'] = require('./views/organisms/ViewSource');
|
||||
skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage');
|
||||
skin['pages.MatrixChat'] = require('./views/pages/MatrixChat');
|
||||
skin['templates.Register'] = require('./views/templates/Register');
|
||||
|
||||
module.exports = skin;
|
||||
module.exports = skin;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,10 @@ var MatrixChatController = require('matrix-react-sdk/lib/controllers/pages/Matri
|
|||
|
||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
||||
var Matrix = require("matrix-js-sdk");
|
||||
|
||||
var ContextualMenu = require("../../../../ContextualMenu");
|
||||
var Login = require("../../../../components/login/Login");
|
||||
var Registration = require("../../../../components/login/Registration");
|
||||
var config = require("../../../../../config.json");
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
|
@ -102,12 +105,15 @@ module.exports = React.createClass({
|
|||
this.showScreen("register");
|
||||
},
|
||||
|
||||
onLoginClick: function() {
|
||||
this.showScreen("login");
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var LeftPanel = sdk.getComponent('organisms.LeftPanel');
|
||||
var RoomView = sdk.getComponent('organisms.RoomView');
|
||||
var RightPanel = sdk.getComponent('organisms.RightPanel');
|
||||
var UserSettings = sdk.getComponent('organisms.UserSettings');
|
||||
var Register = sdk.getComponent('templates.Register');
|
||||
var CreateRoom = sdk.getComponent('organisms.CreateRoom');
|
||||
var RoomDirectory = sdk.getComponent('organisms.RoomDirectory');
|
||||
var MatrixToolbar = sdk.getComponent('molecules.MatrixToolbar');
|
||||
|
|
@ -172,14 +178,17 @@ module.exports = React.createClass({
|
|||
);
|
||||
} else if (this.state.screen == 'register') {
|
||||
return (
|
||||
<Register onLoggedIn={this.onLoggedIn} clientSecret={this.state.register_client_secret}
|
||||
sessionId={this.state.register_session_id} idSid={this.state.register_id_sid}
|
||||
hsUrl={this.state.register_hs_url} isUrl={this.state.register_is_url}
|
||||
<Registration
|
||||
clientSecret={this.state.register_client_secret}
|
||||
sessionId={this.state.register_session_id}
|
||||
idSid={this.state.register_id_sid}
|
||||
hsUrl={config.default_hs_url}
|
||||
isUrl={config.default_is_url}
|
||||
registrationUrl={this.props.registrationUrl}
|
||||
/>
|
||||
onLoggedIn={this.onLoggedIn}
|
||||
onLoginClick={this.onLoginClick} />
|
||||
);
|
||||
} else {
|
||||
var Login = require("../../../../components/login/Login");
|
||||
return (
|
||||
<Login
|
||||
onLoggedIn={this.onLoggedIn}
|
||||
|
|
|
|||
|
|
@ -1,216 +0,0 @@
|
|||
/*
|
||||
Copyright 2015 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
var sdk = require('matrix-react-sdk')
|
||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg')
|
||||
|
||||
var RegisterController = require('../../../../controllers/templates/Register')
|
||||
var ServerConfig = require("../../../../components/login/ServerConfig");
|
||||
|
||||
var config = require('../../../../../config.json');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'Register',
|
||||
mixins: [RegisterController],
|
||||
|
||||
getInitialState: function() {
|
||||
// TODO: factor out all localstorage stuff into its own home.
|
||||
// This is common to Login, Register and MatrixClientPeg
|
||||
var localStorage = window.localStorage;
|
||||
var hs_url, is_url;
|
||||
if (localStorage) {
|
||||
hs_url = localStorage.getItem("mx_hs_url");
|
||||
is_url = localStorage.getItem("mx_is_url");
|
||||
}
|
||||
|
||||
// make sure we have our MatrixClient set up whatever
|
||||
// Useful for debugging only.
|
||||
// MatrixClientPeg.replaceUsingUrls(
|
||||
// hs_url || config.default_hs_url,
|
||||
// is_url || config.default_is_url
|
||||
// );
|
||||
|
||||
return {
|
||||
customHsUrl: hs_url || config.default_hs_url,
|
||||
customIsUrl: is_url || config.default_is_url,
|
||||
serverConfigVisible: (hs_url && hs_url !== config.default_hs_url ||
|
||||
is_url && is_url !== config.default_is_url)
|
||||
}
|
||||
},
|
||||
|
||||
getRegFormVals: function() {
|
||||
return {
|
||||
email: this.refs.email.value.trim(),
|
||||
username: this.refs.username.value.trim(),
|
||||
password: this.refs.password.value.trim(),
|
||||
confirmPassword: this.refs.confirmPassword.value.trim()
|
||||
};
|
||||
},
|
||||
|
||||
getHsUrl: function() {
|
||||
if (this.state.serverConfigVisible) {
|
||||
return this.state.customHsUrl;
|
||||
} else {
|
||||
return config.default_hs_url;
|
||||
}
|
||||
},
|
||||
|
||||
getIsUrl: function() {
|
||||
if (this.state.serverConfigVisible) {
|
||||
return this.state.customIsUrl;
|
||||
} else {
|
||||
return config.default_is_url;
|
||||
}
|
||||
},
|
||||
|
||||
onServerConfigVisibleChange: function(ev) {
|
||||
this.setState({
|
||||
serverConfigVisible: ev.target.checked
|
||||
});
|
||||
},
|
||||
|
||||
onServerUrlChanged: function(newUrl) {
|
||||
this.setState({
|
||||
customHsUrl: this.refs.serverConfig.getHsUrl(),
|
||||
customIsUrl: this.refs.serverConfig.getIsUrl(),
|
||||
});
|
||||
this.forceUpdate();
|
||||
},
|
||||
|
||||
onProfileContinueClicked: function() {
|
||||
this.onAccountReady();
|
||||
},
|
||||
|
||||
componentForStep: function(step) {
|
||||
switch (step) {
|
||||
case 'initial':
|
||||
var serverConfigStyle = {};
|
||||
serverConfigStyle.display = this.state.serverConfigVisible ? 'block' : 'none';
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.onInitialStageSubmit}>
|
||||
<input className="mx_Login_field" type="text" ref="email" autoFocus={true} placeholder="Email address" defaultValue={this.savedParams.email} /><br />
|
||||
<input className="mx_Login_field" type="text" ref="username" placeholder="User name" defaultValue={this.savedParams.username} /><br />
|
||||
<input className="mx_Login_field" type="password" ref="password" placeholder="Password" defaultValue={this.savedParams.password} /><br />
|
||||
<input className="mx_Login_field" type="password" ref="confirmPassword" placeholder="Confirm password" defaultValue={this.savedParams.confirmPassword} /><br />
|
||||
|
||||
<input className="mx_Login_checkbox" id="advanced" type="checkbox" checked={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
|
||||
<label htmlFor="advanced">Use custom server options (advanced)</label>
|
||||
<div style={serverConfigStyle}>
|
||||
<ServerConfig ref="serverConfig"
|
||||
defaultHsUrl={this.state.customHsUrl} defaultIsUrl={this.state.customIsUrl}
|
||||
onHsUrlChanged={this.onServerUrlChanged} onIsUrlChanged={this.onServerUrlChanged} />
|
||||
</div>
|
||||
<br />
|
||||
<input className="mx_Login_submit" type="submit" value="Register" />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
// XXX: clearly these should be separate organisms
|
||||
case 'stage_m.login.email.identity':
|
||||
return (
|
||||
<div>
|
||||
Please check your email to continue registration.
|
||||
</div>
|
||||
);
|
||||
case 'stage_m.login.recaptcha':
|
||||
return (
|
||||
<div ref="recaptchaContainer">
|
||||
This Home Server would like to make sure you are not a robot
|
||||
<div id="mx_recaptcha"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
registerContent: function() {
|
||||
if (this.state.busy) {
|
||||
var Loader = sdk.getComponent("atoms.Spinner");
|
||||
return (
|
||||
<Loader />
|
||||
);
|
||||
} else if (this.state.step == 'profile') {
|
||||
var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
|
||||
var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
|
||||
return (
|
||||
<div className="mx_Login_profile">
|
||||
Set a display name:
|
||||
<ChangeDisplayName />
|
||||
Upload an avatar:
|
||||
<ChangeAvatar initialAvatarUrl={MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl)} />
|
||||
<button onClick={this.onProfileContinueClicked}>Continue</button>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<h2>Create an account</h2>
|
||||
{this.componentForStep(this.state.step)}
|
||||
<div className="mx_Login_error">{this.state.errorText}</div>
|
||||
<a className="mx_Login_create" onClick={this.showLogin} href="#">I already have an account</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
onBadFields: function(bad) {
|
||||
var keys = Object.keys(bad);
|
||||
var strings = [];
|
||||
for (var i = 0; i < keys.length; ++i) {
|
||||
switch (bad[keys[i]]) {
|
||||
case this.FieldErrors.PasswordMismatch:
|
||||
strings.push("Passwords don't match");
|
||||
break;
|
||||
case this.FieldErrors.Missing:
|
||||
strings.push("Missing "+keys[i]);
|
||||
break;
|
||||
case this.FieldErrors.TooShort:
|
||||
strings.push(keys[i]+" is too short");
|
||||
break;
|
||||
case this.FieldErrors.InUse:
|
||||
strings.push(keys[i]+" is already taken");
|
||||
break;
|
||||
case this.FieldErrors.Length:
|
||||
strings.push(keys[i] + " is not long enough.");
|
||||
break;
|
||||
default:
|
||||
console.error("Unhandled FieldError: %s", bad[keys[i]]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
var errtxt = strings.join(', ');
|
||||
this.setState({
|
||||
errorText: errtxt
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_Login">
|
||||
<div className="mx_Login_box">
|
||||
<div className="mx_Login_logo">
|
||||
<img src="img/logo.png" width="249" height="78" alt="vector"/>
|
||||
</div>
|
||||
{this.registerContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue