Add method to Modal to create dialog with instantiated React elements as well as Classes.

src/Modal.js

@@ -34,6 +34,29 @@ module.exports = {
         return container;
     },
 
+    createDialogWithElement: function(element, props) {
+        var self = this;
+
+        var closeDialog = function() {
+            React.unmountComponentAtNode(self.getOrCreateContainer());
+
+            if (props && props.onFinished) props.onFinished.apply(null, arguments);
+        };
+
+        var dialog = (
+            <div className="mx_Dialog_wrapper">
+                <div className="mx_Dialog">
+                    {element}
+                </div>
+                <div className="mx_Dialog_background" onClick={closeDialog}></div>
+            </div>
+        );
+
+        React.render(dialog, this.getOrCreateContainer());
+
+        return {close: closeDialog};
+    },
+
     createDialog: function (Element, props) {
         var self = this;
 

src/controllers/molecules/ChangeAvatar.js

@@ -19,7 +19,6 @@ var MatrixClientPeg = require("../../MatrixClientPeg");
 
 module.exports = {
     propTypes: {
-        onFinished: React.PropTypes.func,
         initialAvatarUrl: React.PropTypes.string.isRequired,
     },
 
@@ -29,12 +28,6 @@ module.exports = {
         Error: "error",
     },
 
-    getDefaultProps: function() {
-        return {
-            onFinished: function() {},
-        };
-    },
-
     getInitialState: function() {
         return {
             avatarUrl: this.props.initialAvatarUrl,

src/controllers/molecules/ChangeDisplayName.js

@@ -39,7 +39,7 @@ module.exports = {
         var self = this;
         cli.getProfileInfo(cli.credentials.userId).done(function(result) {
             self.setState({
-                displayname: result.displayname,
+                displayName: result.displayname,
                 busy: false
             });
         }, function(error) {
@@ -60,7 +60,10 @@ module.exports = {
 
         var self = this;
         MatrixClientPeg.get().setDisplayName(new_displayname).then(function() {
-            self.setState({busy: false});
+            self.setState({
+                busy: false,
+                displayName: new_displayname
+            });
         }, function(error) {
             self.setState({
                 busy: false,