From fc7707971eae173f4fb1ec627de98e9cb82665ae Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 26 Nov 2015 17:10:36 +0000 Subject: [PATCH] Move and merge Change Avatar|DisplayName|Password components --- .../views/settings}/ChangeAvatar.js | 57 +++++++- .../views/settings}/ChangeDisplayName.js | 36 ++++- .../views/settings/ChangePassword.js | 135 ++++++++++++++++++ src/controllers/molecules/ChangePassword.js | 76 ---------- 4 files changed, 222 insertions(+), 82 deletions(-) rename src/{controllers/molecules => components/views/settings}/ChangeAvatar.js (54%) rename src/{controllers/molecules => components/views/settings}/ChangeDisplayName.js (65%) create mode 100644 src/components/views/settings/ChangePassword.js delete mode 100644 src/controllers/molecules/ChangePassword.js diff --git a/src/controllers/molecules/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js similarity index 54% rename from src/controllers/molecules/ChangeAvatar.js rename to src/components/views/settings/ChangeAvatar.js index 7e8f959ebf..2ae50a0cae 100644 --- a/src/controllers/molecules/ChangeAvatar.js +++ b/src/components/views/settings/ChangeAvatar.js @@ -15,9 +15,11 @@ limitations under the License. */ var React = require('react'); -var MatrixClientPeg = require("../../MatrixClientPeg"); +var MatrixClientPeg = require("../../../MatrixClientPeg"); +var sdk = require('../../../index'); -module.exports = { +module.exports = React.createClass({ + displayName: 'ChangeAvatar', propTypes: { initialAvatarUrl: React.PropTypes.string, room: React.PropTypes.object, @@ -77,4 +79,53 @@ module.exports = { self.onError(error); }); }, -} + + 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 = ; + } else { + var style = { + maxWidth: 320, + maxHeight: 240, + }; + avatarImg = ; + } + + switch (this.state.phase) { + case this.Phases.Display: + case this.Phases.Error: + return ( +
+
+ {avatarImg} +
+
+ Upload new: + + {this.state.errorText} +
+
+ ); + case this.Phases.Uploading: + var Loader = sdk.getComponent("elements.Spinner"); + return ( + + ); + } + } +}); diff --git a/src/controllers/molecules/ChangeDisplayName.js b/src/components/views/settings/ChangeDisplayName.js similarity index 65% rename from src/controllers/molecules/ChangeDisplayName.js rename to src/components/views/settings/ChangeDisplayName.js index afef82772c..4af413cfbe 100644 --- a/src/controllers/molecules/ChangeDisplayName.js +++ b/src/components/views/settings/ChangeDisplayName.js @@ -16,9 +16,11 @@ limitations under the License. 'use strict'; var React = require('react'); -var MatrixClientPeg = require("../../MatrixClientPeg"); +var sdk = require('../../../index'); +var MatrixClientPeg = require("../../../MatrixClientPeg"); -module.exports = { +module.exports = React.createClass({ + displayName: 'ChangeDisplayName', propTypes: { onFinished: React.PropTypes.func }, @@ -72,4 +74,32 @@ module.exports = { }); }); }, -} + + 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 ( + + ); + } else if (this.state.errorString) { + return ( +
{this.state.errorString}
+ ); + } else { + var EditableText = sdk.getComponent('elements.EditableText'); + return ( + + ); + } + } +}); diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js new file mode 100644 index 0000000000..a6666b7ed1 --- /dev/null +++ b/src/components/views/settings/ChangePassword.js @@ -0,0 +1,135 @@ +/* +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 MatrixClientPeg = require("../../../MatrixClientPeg"); + +module.exports = React.createClass({ + displayName: 'ChangePassword', + propTypes: { + onFinished: React.PropTypes.func, + }, + + Phases: { + Edit: "edit", + Uploading: "uploading", + Error: "error", + Success: "Success" + }, + + getDefaultProps: function() { + return { + onFinished: function() {}, + }; + }, + + getInitialState: function() { + return { + phase: this.Phases.Edit, + errorString: '' + } + }, + + changePassword: function(old_password, new_password) { + var cli = MatrixClientPeg.get(); + + var authDict = { + type: 'm.login.password', + user: cli.credentials.userId, + password: old_password + }; + + this.setState({ + phase: this.Phases.Uploading, + errorString: '', + }) + + var d = cli.setPassword(authDict, new_password); + + var self = this; + d.then(function() { + self.setState({ + phase: self.Phases.Success, + errorString: '', + }) + }, function(err) { + self.setState({ + phase: self.Phases.Error, + errorString: err.toString() + }) + }); + }, + + 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 ( +
+
+
{this.state.errorString}
+
+
+
+
+
+ + +
+
+ ); + case this.Phases.Uploading: + var Loader = sdk.getComponent("elements.Spinner"); + return ( +
+ +
+ ); + case this.Phases.Success: + return ( +
+
+ Success! +
+
+ +
+
+ ) + } + } +}); diff --git a/src/controllers/molecules/ChangePassword.js b/src/controllers/molecules/ChangePassword.js deleted file mode 100644 index 637e133a79..0000000000 --- a/src/controllers/molecules/ChangePassword.js +++ /dev/null @@ -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 MatrixClientPeg = require("../../MatrixClientPeg"); - -module.exports = { - propTypes: { - onFinished: React.PropTypes.func, - }, - - Phases: { - Edit: "edit", - Uploading: "uploading", - Error: "error", - Success: "Success" - }, - - getDefaultProps: function() { - return { - onFinished: function() {}, - }; - }, - - getInitialState: function() { - return { - phase: this.Phases.Edit, - errorString: '' - } - }, - - changePassword: function(old_password, new_password) { - var cli = MatrixClientPeg.get(); - - var authDict = { - type: 'm.login.password', - user: cli.credentials.userId, - password: old_password - }; - - this.setState({ - phase: this.Phases.Uploading, - errorString: '', - }) - - var d = cli.setPassword(authDict, new_password); - - var self = this; - d.then(function() { - self.setState({ - phase: self.Phases.Success, - errorString: '', - }) - }, function(err) { - self.setState({ - phase: self.Phases.Error, - errorString: err.toString() - }) - }); - }, -}