Move and merge Change* components to React SDK. Update references.

src/components/structures/login/PostRegistration.js

@@ -57,8 +57,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
+        var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
-        var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
+        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
         return (
             <div className="mx_Login">
                 <div className="mx_Login_box">

src/skins/vector/skindex.js

@@ -32,6 +32,9 @@ skin['messages.MessageTimestamp'] = require('../../components/views/messages/Mes
 skin['avatars.RoomAvatar'] = require('matrix-react-sdk/lib/components/views/avatars/RoomAvatar');
 skin['avatars.MemberAvatar'] = require('matrix-react-sdk/lib/components/views/avatars/MemberAvatar');
 skin['settings.EnableNotificationsButton'] = require('matrix-react-sdk/lib/components/views/settings/EnableNotificationsButton');
+skin['settings.ChangeAvatar'] = require('matrix-react-sdk/lib/components/views/settings/ChangeAvatar');
+skin['settings.ChangeDisplayName'] = require('matrix-react-sdk/lib/components/views/settings/ChangeDisplayName');
+skin['settings.ChangePassword'] = require('matrix-react-sdk/lib/components/views/settings/ChangePassword');
 skin['elements.EditableText'] = require('matrix-react-sdk/lib/components/views/elements/EditableText');
 skin['voip.VideoFeed'] = require('matrix-react-sdk/lib/components/views/voip/VideoFeed');
 skin['create_room.CreateRoomButton'] = require('matrix-react-sdk/lib/components/views/create_room/CreateRoomButton');
@@ -44,9 +47,6 @@ skin['voip.VideoView'] = require('matrix-react-sdk/lib/components/views/voip/Vid
 // Old style stuff
 skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
 skin['molecules.BottomLeftMenuTile'] = require('./views/molecules/BottomLeftMenuTile');
-skin['molecules.ChangeAvatar'] = require('./views/molecules/ChangeAvatar');
-skin['molecules.ChangeDisplayName'] = require('./views/molecules/ChangeDisplayName');
-skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword');
 skin['molecules.DateSeparator'] = require('./views/molecules/DateSeparator');
 skin['molecules.EventAsTextTile'] = require('./views/molecules/EventAsTextTile');
 skin['molecules.EventTile'] = require('./views/molecules/EventTile');

src/skins/vector/views/molecules/ChangeAvatar.js

@@ -1,76 +0,0 @@
-/*
-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 ChangeAvatarController = require('matrix-react-sdk/lib/controllers/molecules/ChangeAvatar')
-
-module.exports = React.createClass({
-    displayName: 'ChangeAvatar',
-    mixins: [ChangeAvatarController],
-
-    onFileSelected: function(ev) {
-        this.avatarSet = true;
-        this.setAvatarFromFile(ev.target.files[0]);
-    },
-
-    onError: function(error) {
-        this.setState({
-            errorText: "Failed to upload profile picture!"
-        });
-    },
-
-    render: function() {
-        var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
-        var avatarImg;
-        // Having just set an avatar we just display that since it will take a little
-        // time to propagate through to the RoomAvatar.
-        if (this.props.room && !this.avatarSet) {
-            avatarImg = <RoomAvatar room={this.props.room} width='320' height='240' resizeMethod='scale' />;
-        } else {
-            var style = {
-                maxWidth: 320,
-                maxHeight: 240,
-            };
-            avatarImg = <img src={this.state.avatarUrl} style={style} />;
-        }
-
-        switch (this.state.phase) {
-            case this.Phases.Display:
-            case this.Phases.Error:
-                return (
-                    <div>
-                        <div className="mx_Dialog_content">
-                            {avatarImg}
-                        </div>
-                        <div className="mx_Dialog_content">
-                            Upload new:
-                            <input type="file" onChange={this.onFileSelected}/>
-                            {this.state.errorText}
-                        </div>    
-                    </div>
-                );
-            case this.Phases.Uploading:
-                var Loader = sdk.getComponent("elements.Spinner");
-                return (
-                    <Loader />
-                );
-        }
-    }
-});

src/skins/vector/views/molecules/ChangeDisplayName.js

@@ -1,55 +0,0 @@
-/*
-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 ChangeDisplayNameController = require("matrix-react-sdk/lib/controllers/molecules/ChangeDisplayName");
-
-module.exports = React.createClass({
-    displayName: 'ChangeDisplayName',
-    mixins: [ChangeDisplayNameController],
-
-    edit: function() {
-        this.refs.displayname_edit.edit()
-    },
-
-    onValueChanged: function(new_value, shouldSubmit) {
-        if (shouldSubmit) {
-            this.changeDisplayname(new_value);
-        }
-    },
-
-    render: function() {
-        if (this.state.busy) {
-            var Loader = sdk.getComponent("elements.Spinner");
-            return (
-                <Loader />
-            );
-        } else if (this.state.errorString) {
-            return (
-                <div className="error">{this.state.errorString}</div>
-            );
-        } else {
-            var EditableText = sdk.getComponent('elements.EditableText');
-            return (
-                <EditableText ref="displayname_edit" initialValue={this.state.displayName} label="Click to set display name." onValueChanged={this.onValueChanged}/>
-            );
-        }
-    }
-});

src/skins/vector/views/molecules/ChangePassword.js

@@ -1,84 +0,0 @@
-/*
-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 ChangePasswordController = require('matrix-react-sdk/lib/controllers/molecules/ChangePassword')
-
-module.exports = React.createClass({
-    displayName: 'ChangePassword',
-    mixins: [ChangePasswordController],
-
-    onClickChange: function() {
-        var old_password = this.refs.old_input.value;
-        var new_password = this.refs.new_input.value;
-        var confirm_password = this.refs.confirm_input.value;
-        if (new_password != confirm_password) {
-            this.setState({
-                state: this.Phases.Error,
-                errorString: "Passwords don't match"
-            });
-        } else if (new_password == '' || old_password == '') {
-            this.setState({
-                state: this.Phases.Error,
-                errorString: "Passwords can't be empty"
-            });
-        } else {
-            this.changePassword(old_password, new_password);
-        }
-    },
-
-    render: function() {
-        switch (this.state.phase) {
-            case this.Phases.Edit:
-            case this.Phases.Error:
-                return (
-                    <div>
-                        <div className="mx_Dialog_content">
-                            <div>{this.state.errorString}</div>
-                            <div><label>Old password <input type="password" ref="old_input"/></label></div>
-                            <div><label>New password <input type="password" ref="new_input"/></label></div>
-                            <div><label>Confirm password <input type="password" ref="confirm_input"/></label></div>
-                        </div>
-                        <div className="mx_Dialog_buttons">
-                            <button onClick={this.onClickChange}>Change Password</button>
-                            <button onClick={this.props.onFinished}>Cancel</button>
-                        </div>
-                    </div>
-                );
-            case this.Phases.Uploading:
-                var Loader = sdk.getComponent("elements.Spinner");
-                return (
-                    <div className="mx_Dialog_content">
-                        <Loader />
-                    </div>
-                );
-            case this.Phases.Success:
-                return (
-                    <div>
-                        <div className="mx_Dialog_content">
-                            Success!
-                        </div>
-                        <div className="mx_Dialog_buttons">
-                            <button onClick={this.props.onFinished}>Ok</button>
-                        </div>
-                    </div>
-                )
-        }
-    }
-});

src/skins/vector/views/molecules/RoomSettings.js

@@ -66,7 +66,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
+        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
 
         var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
         if (topic) topic = topic.getContent().topic;

src/skins/vector/views/organisms/UserSettings.js

@@ -27,7 +27,7 @@ module.exports = React.createClass({
 
     editAvatar: function() {
         var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
-        var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
+        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
         var avatarDialog = (
             <div>
                 <ChangeAvatar initialAvatarUrl={url} />
@@ -48,7 +48,7 @@ module.exports = React.createClass({
     },
 
     changePassword: function() {
-        var ChangePassword = sdk.getComponent('molecules.ChangePassword');
+        var ChangePassword = sdk.getComponent('settings.ChangePassword');
         Modal.createDialog(ChangePassword);
     },
 
@@ -71,7 +71,7 @@ module.exports = React.createClass({
             case this.Phases.Loading:
                 return <Loader />
             case this.Phases.Display:
-                var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
+                var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
                 var EnableNotificationsButton = sdk.getComponent('settings.EnableNotificationsButton');
                 return (
                     <div className="mx_UserSettings">