diff --git a/src/components/login/PostRegistration.js b/src/components/login/PostRegistration.js new file mode 100644 index 0000000000..20a58f1141 --- /dev/null +++ b/src/components/login/PostRegistration.js @@ -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 ( +
+
+
+ vector +
+
+ Set a display name: + + Upload an avatar: + + + {this.state.errorString} +
+
+
+ ); + } +}); diff --git a/src/components/login/Registration.js b/src/components/login/Registration.js index 8fda406d46..b06f9ffef5 100644 --- a/src/components/login/Registration.js +++ b/src/components/login/Registration.js @@ -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 ( -
- Set a display name: - - Upload an avatar: - - -
- ); - }, - _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 = ( diff --git a/src/skins/vector/views/pages/MatrixChat.js b/src/skins/vector/views/pages/MatrixChat.js index 81268d5ad2..2783a77f74 100644 --- a/src/skins/vector/views/pages/MatrixChat.js +++ b/src/skins/vector/views/pages/MatrixChat.js @@ -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 ( + + ); + } + 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 {