Add RegistrationForm UI component and new Registration wire component
Hook it up to MatrixChat instead of the existing logic (this breaks reg). WIP.pull/399/head
Kegan Dougal
parent
8602e0665d
commit
8e8b27c893
|
|
@ -0,0 +1,147 @@
|
|||
/*
|
||||
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 ServerConfig = require("./ServerConfig");
|
||||
var RegistrationForm = require("./RegistrationForm");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'Registration',
|
||||
|
||||
propTypes: {
|
||||
onLoggedIn: React.PropTypes.func.isRequired,
|
||||
registerLogic: React.PropTypes.any.isRequired,
|
||||
// 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.registerLogic.getHomeserverUrl(),
|
||||
enteredIdentityServerUrl: this.props.registerLogic.getIdentityServerUrl()
|
||||
};
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
|
||||
},
|
||||
|
||||
onHsUrlChanged: function(newHsUrl) {
|
||||
this.props.registerLogic.setHomeserverUrl(newHsUrl);
|
||||
this.forceUpdate(); // registration state may have changed.
|
||||
},
|
||||
|
||||
onIsUrlChanged: function(newIsUrl) {
|
||||
this.props.registerLogic.setIdentityServerUrl(newIsUrl);
|
||||
this.forceUpdate(); // registration state may have changed.
|
||||
},
|
||||
|
||||
onFormSubmit: function(formVals) {
|
||||
console.log("Form vals: %s", formVals);
|
||||
},
|
||||
|
||||
onFormValidationFailed: function(errCode) {
|
||||
console.error("Ruh roh: %s", errCode);
|
||||
},
|
||||
|
||||
_getRegisterContentJsx: function() {
|
||||
var currState = this.props.registerLogic.getState();
|
||||
var registerStep;
|
||||
switch (currState) {
|
||||
case "Register.COMPLETE":
|
||||
return this._getPostRegisterJsx();
|
||||
case "Register.START":
|
||||
registerStep = (
|
||||
<RegistrationForm
|
||||
showEmail={true}
|
||||
minPasswordLength={8}
|
||||
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 = (
|
||||
<div ref="recaptchaContainer">
|
||||
This Home Server would like to make sure you are not a robot
|
||||
<div id="mx_recaptcha"></div>
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
console.error("Unknown register state: %s", currState);
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<h2>Create an account</h2>
|
||||
{registerStep}
|
||||
<ServerConfig ref="serverConfig"
|
||||
withToggleButton={true}
|
||||
defaultHsUrl={this.state.enteredHomeserverUrl}
|
||||
defaultIsUrl={this.state.enteredIdentityServerUrl}
|
||||
onHsUrlChanged={this.onHsUrlChanged}
|
||||
onIsUrlChanged={this.onIsUrlChanged}
|
||||
delayTimeMs={1000} />
|
||||
<div className="mx_Login_error">{this.state.errorText}</div>
|
||||
<a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
|
||||
I already have an account
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
_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>
|
||||
);
|
||||
},
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -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 ContextualMenu = require("../../../../ContextualMenu")
|
||||
var Login = require("../../../../components/login/Login");
|
||||
var Registration = require("../../../../components/login/Registration");
|
||||
var Signup = require("matrix-react-sdk/lib/Signup");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MatrixChat',
|
||||
|
|
@ -93,12 +96,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');
|
||||
|
|
@ -159,15 +165,23 @@ module.exports = React.createClass({
|
|||
<Spinner />
|
||||
);
|
||||
} 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}
|
||||
registrationUrl={this.props.registrationUrl}
|
||||
/>
|
||||
); */
|
||||
return (
|
||||
<Registration
|
||||
onLoggedIn={this.onLoggedIn}
|
||||
onLoginClick={this.onLoginClick}
|
||||
registerLogic={new Signup.Register(
|
||||
"foo", "bar"
|
||||
)} />
|
||||
);
|
||||
} else {
|
||||
var Login = require("../../../../components/login/Login");
|
||||
return (
|
||||
<Login onLoggedIn={this.onLoggedIn} onRegisterClick={this.onRegisterClick} />
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue