From c68ef3839949ad5341f040e6d3788216d379d468 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Oct 2015 11:56:16 +0100
Subject: [PATCH] Use ChangeDisplayNname / ChangeAvatar widgets to prompt for
 display name & avatar at signup.

Fixes #7.
---
 src/controllers/templates/Register.js         | 58 +++++++++++++++++++
 .../vector/views/molecules/ChangeAvatar.js    |  3 -
 .../vector/views/organisms/UserSettings.js    | 16 ++++-
 src/skins/vector/views/templates/Register.js  | 19 +++++-
 4 files changed, 90 insertions(+), 6 deletions(-)
 create mode 100644 src/controllers/templates/Register.js

diff --git a/src/controllers/templates/Register.js b/src/controllers/templates/Register.js
new file mode 100644
index 00000000..5f88d590
--- /dev/null
+++ b/src/controllers/templates/Register.js
@@ -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;
diff --git a/src/skins/vector/views/molecules/ChangeAvatar.js b/src/skins/vector/views/molecules/ChangeAvatar.js
index 8fafacc8..52a59e3f 100644
--- a/src/skins/vector/views/molecules/ChangeAvatar.js
+++ b/src/skins/vector/views/molecules/ChangeAvatar.js
@@ -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:
diff --git a/src/skins/vector/views/organisms/UserSettings.js b/src/skins/vector/views/organisms/UserSettings.js
index 44798aee..6071f82e 100644
--- a/src/skins/vector/views/organisms/UserSettings.js
+++ b/src/skins/vector/views/organisms/UserSettings.js
@@ -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>
 
diff --git a/src/skins/vector/views/templates/Register.js b/src/skins/vector/views/templates/Register.js
index fa4a3e18..638dac15 100644
--- a/src/skins/vector/views/templates/Register.js
+++ b/src/skins/vector/views/templates/Register.js
@@ -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>