Use ChangeDisplayNname / ChangeAvatar widgets to prompt for display name & avatar at signup.

Fixes #7.
This commit is contained in:
David Baker 2015-10-09 11:56:16 +01:00
parent ccc5f30c9b
commit c68ef38399
4 changed files with 90 additions and 6 deletions

View File

@ -0,0 +1,58 @@
/*
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;

View File

@ -51,9 +51,6 @@ module.exports = React.createClass({
<input type="file" onChange={this.onFileSelected}/>
{this.state.errorText}
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.props.onFinished}>Cancel</button>
</div>
</div>
);
case this.Phases.Uploading:

View File

@ -30,7 +30,15 @@ module.exports = React.createClass({
editAvatar: function() {
var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
Modal.createDialog(ChangeAvatar, {initialAvatarUrl: url});
var avatarDialog = (
<div>
<ChangeAvatar initialAvatarUrl={url} />
<div className="mx_Dialog_buttons">
<button onClick={this.onAvatarDialogCancel}>Cancel</button>
</div>
</div>
);
this.avatarDialog = Modal.createDialogWithElement(avatarDialog);
},
addEmail: function() {
@ -55,6 +63,10 @@ module.exports = React.createClass({
this.logoutModal.closeDialog();
},
onAvatarDialogCancel: function() {
this.avatarDialog.close();
},
render: function() {
switch (this.state.phase) {
case this.Phases.Loading:
@ -80,7 +92,7 @@ module.exports = React.createClass({
<div className="mx_UserSettings_3pids">
{this.state.threepids.map(function(val) {
return <div>{val.address}</div>;
return <div key={val.address}>{val.address}</div>;
})}
</div>

View File

@ -19,10 +19,11 @@ limitations under the License.
var React = require('react');
var sdk = require('matrix-react-sdk')
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg')
var Loader = require("react-loader");
var RegisterController = require('matrix-react-sdk/lib/controllers/templates/Register')
var RegisterController = require('../../../../controllers/templates/Register')
module.exports = React.createClass({
DEFAULT_HS_URL: 'https://matrix.org',
@ -79,6 +80,10 @@ module.exports = React.createClass({
this.forceUpdate();
},
onProfileContinueClicked: function() {
this.onAccountReady();
},
componentForStep: function(step) {
switch (step) {
case 'initial':
@ -127,6 +132,18 @@ module.exports = React.createClass({
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>