Merge pull request #403 from vector-im/kegan/post-register

Re-add in post registration steps
pull/404/head
Kegsay 2015-11-20 15:06:19 +00:00
commit 6dc5dd4930
3 changed files with 106 additions and 22 deletions

View File

@ -0,0 +1,81 @@
/*
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');
module.exports = React.createClass({
displayName: 'PostRegistration',
propTypes: {
onComplete: React.PropTypes.func.isRequired
},
getInitialState: function() {
return {
avatarUrl: null,
errorString: null,
busy: false
};
},
componentWillMount: function() {
// There is some assymetry between ChangeDisplayName and ChangeAvatar,
// as ChangeDisplayName will auto-get the name but ChangeAvatar expects
// the URL to be passed to you (because it's also used for room avatars).
var cli = MatrixClientPeg.get();
this.setState({busy: true});
var self = this;
cli.getProfileInfo(cli.credentials.userId).done(function(result) {
self.setState({
avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
busy: false
});
}, function(error) {
self.setState({
errorString: "Failed to fetch avatar URL",
busy: false
});
});
},
render: function() {
var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
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>
<div className="mx_Login_profile">
Set a display name:
<ChangeDisplayName />
Upload an avatar:
<ChangeAvatar
initialAvatarUrl={this.state.avatarUrl} />
<button onClick={this.props.onComplete}>Continue</button>
{this.state.errorString}
</div>
</div>
</div>
);
}
});

View File

@ -173,31 +173,12 @@ module.exports = React.createClass({
});
},
// 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();
break; // NOP
case "Register.START":
case "Register.STEP_m.login.dummy":
registerStep = (

View File

@ -27,6 +27,7 @@ var Matrix = require("matrix-js-sdk");
var ContextualMenu = require("../../../../ContextualMenu");
var Login = require("../../../../components/login/Login");
var Registration = require("../../../../components/login/Registration");
var PostRegistration = require("../../../../components/login/PostRegistration");
var config = require("../../../../../config.json");
module.exports = React.createClass({
@ -109,6 +110,20 @@ module.exports = React.createClass({
this.showScreen("login");
},
onRegistered: function(credentials) {
this.onLoggedIn(credentials);
// do post-registration stuff
this.showScreen("post_registration");
},
onFinishPostRegistration: function() {
// Don't confuse this with "PageType" which is the middle window to show
this.setState({
screen: undefined
});
this.showScreen("settings");
},
render: function() {
var LeftPanel = sdk.getComponent('organisms.LeftPanel');
var RoomView = sdk.getComponent('organisms.RoomView');
@ -119,7 +134,14 @@ module.exports = React.createClass({
var MatrixToolbar = sdk.getComponent('molecules.MatrixToolbar');
var Notifier = sdk.getComponent('organisms.Notifier');
if (this.state.logged_in && this.state.ready) {
// needs to be before normal PageTypes as you are logged in technically
if (this.state.screen == 'post_registration') {
return (
<PostRegistration
onComplete={this.onFinishPostRegistration} />
);
}
else if (this.state.logged_in && this.state.ready) {
var page_element;
var right_panel = "";
@ -185,7 +207,7 @@ module.exports = React.createClass({
hsUrl={config.default_hs_url}
isUrl={config.default_is_url}
registrationUrl={this.props.registrationUrl}
onLoggedIn={this.onLoggedIn}
onLoggedIn={this.onRegistered}
onLoginClick={this.onLoginClick} />
);
} else {