From bc93aeb50e9a9fe8018845fb4ec57453b4f8d1d4 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 09:37:58 +0100 Subject: [PATCH] Flesh out the user_settings page --- skins/base/views/molecules/ChangeAvatar.js | 47 ++++++++++ skins/base/views/molecules/ChangePassword.js | 49 ++++++++++ skins/base/views/organisms/UserSettings.js | 97 ++++++++++++++++++++ src/ComponentBroker.js | 2 + src/controllers/atoms/EditableText.js | 8 +- src/controllers/molecules/ChangeAvatar.js | 52 +++++++++++ src/controllers/molecules/ChangePassword.js | 50 ++++++++++ src/controllers/organisms/UserSettings.js | 81 ++++++++++++++++ 8 files changed, 384 insertions(+), 2 deletions(-) create mode 100644 skins/base/views/molecules/ChangeAvatar.js create mode 100644 skins/base/views/molecules/ChangePassword.js create mode 100644 skins/base/views/organisms/UserSettings.js create mode 100644 src/controllers/molecules/ChangeAvatar.js create mode 100644 src/controllers/molecules/ChangePassword.js create mode 100644 src/controllers/organisms/UserSettings.js diff --git a/skins/base/views/molecules/ChangeAvatar.js b/skins/base/views/molecules/ChangeAvatar.js new file mode 100644 index 0000000000..021b4ad6ec --- /dev/null +++ b/skins/base/views/molecules/ChangeAvatar.js @@ -0,0 +1,47 @@ +/* +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 ChangeAvatarController = require("../../../../src/controllers/molecules/ChangeAvatar"); + + +module.exports = React.createClass({ + displayName: 'ChangeAvatar', + mixins: [ChangeAvatarController], + + render: function() { + switch (this.state.phase) { + case this.Phases.Display: + case this.Phases.Error: + return ( +
+ +
+ + +
+
+ ); + case this.Phases.Uploading: + return ( + + ); + } + } +}); diff --git a/skins/base/views/molecules/ChangePassword.js b/skins/base/views/molecules/ChangePassword.js new file mode 100644 index 0000000000..ff64a7216a --- /dev/null +++ b/skins/base/views/molecules/ChangePassword.js @@ -0,0 +1,49 @@ +/* +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("../../../../src/controllers/molecules/ChangePassword"); + + +module.exports = React.createClass({ + displayName: 'ChangePassword', + mixins: [ChangePasswordController], + + render: function() { + switch (this.state.phase) { + case this.Phases.Edit: + case this.Phases.Error: + return ( +
+ + + +
+ + +
+
+ ); + case this.Phases.Uploading: + return ( + + ); + } + } +}); diff --git a/skins/base/views/organisms/UserSettings.js b/skins/base/views/organisms/UserSettings.js new file mode 100644 index 0000000000..e70a575a97 --- /dev/null +++ b/skins/base/views/organisms/UserSettings.js @@ -0,0 +1,97 @@ +/* +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 ComponentBroker = require('../../../../src/ComponentBroker'); +var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); + +var UserSettingsController = require("../../../../src/controllers/organisms/UserSettings"); + +var EditableText = ComponentBroker.get('atoms/EditableText'); +var ChangeAvatar = ComponentBroker.get('molecules/ChangeAvatar'); +var ChangePassword = ComponentBroker.get('molecules/ChangePassword'); +var Loader = require("react-loader"); + +var Modal = require("../../../../src/Modal") + +module.exports = React.createClass({ + displayName: 'UserSettings', + mixins: [UserSettingsController], + + editAvatar: function() { + var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl); + Modal.createDialog(ChangeAvatar, {initialAvatarUrl: url}); + }, + + addEmail: function() { + + }, + + editDisplayName: function() { + this.refs.displayname.edit(); + }, + + changePassword: function() { + Modal.createDialog(ChangePassword); + }, + + render: function() { + switch (this.state.phase) { + case this.Phases.Loading: + return + case this.Phases.Display: + return ( +
+
+

User Settings

+
+
+
+
Profile Photo
+
Edit
+
+ +
+ +
Edit
+
+ +
+ {this.state.threepids.map(function(val) { + return
{val.address}
; + })} +
+ +
Add email
+
+
+ +
+

Global Settings

+
+
+
+ Change Password +
+
+ Version {this.state.clientVersion} +
+
+
+
+ ); + } + } +}); diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index d57ee34bf9..051d6e2681 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -89,6 +89,8 @@ require('../skins/base/views/organisms/Notifier'); require('../skins/base/views/organisms/CreateRoom'); require('../skins/base/views/molecules/UserSelector'); require('../skins/base/views/organisms/UserSettings'); +require('../skins/base/views/molecules/ChangeAvatar'); +require('../skins/base/views/molecules/ChangePassword'); // new for vector require('../skins/base/views/organisms/LeftPanel'); require('../skins/base/views/organisms/RightPanel'); diff --git a/src/controllers/atoms/EditableText.js b/src/controllers/atoms/EditableText.js index a314560666..d9155a5cb9 100644 --- a/src/controllers/atoms/EditableText.js +++ b/src/controllers/atoms/EditableText.js @@ -53,9 +53,13 @@ module.exports = { this.setState({ value: val, phase: this.Phases.Display, - }); + }, this.onValueChanged); + }, - this.onValueChanged(); + edit: function() { + this.setState({ + phase: this.Phases.Edit, + }); }, cancelEdit: function() { diff --git a/src/controllers/molecules/ChangeAvatar.js b/src/controllers/molecules/ChangeAvatar.js new file mode 100644 index 0000000000..2dd492b6e2 --- /dev/null +++ b/src/controllers/molecules/ChangeAvatar.js @@ -0,0 +1,52 @@ +/* +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"); + +var dis = require("../../dispatcher"); + +module.exports = { + propTypes: { + onFinished: React.PropTypes.func, + initialAvatarUrl: React.PropTypes.string.isRequired, + }, + + Phases: { + Display: "display", + Uploading: "uploading", + Error: "error", + }, + + getDefaultProps: function() { + return { + onFinished: function() {}, + }; + }, + + getInitialState: function() { + return { + avatarUrl: this.props.initialAvatarUrl, + phase: this.Phases.Display, + } + }, + + uploadNewAvatar: function() { + + }, +} diff --git a/src/controllers/molecules/ChangePassword.js b/src/controllers/molecules/ChangePassword.js new file mode 100644 index 0000000000..6bbc14b6d9 --- /dev/null +++ b/src/controllers/molecules/ChangePassword.js @@ -0,0 +1,50 @@ +/* +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"); + +var dis = require("../../dispatcher"); + +module.exports = { + propTypes: { + onFinished: React.PropTypes.func, + }, + + Phases: { + Edit: "edit", + Uploading: "uploading", + Error: "error", + }, + + getDefaultProps: function() { + return { + onFinished: function() {}, + }; + }, + + getInitialState: function() { + return { + phase: this.Phases.Edit, + } + }, + + changePassword: function(old_password, new_password) { + // DO SOMETHING. + }, +} diff --git a/src/controllers/organisms/UserSettings.js b/src/controllers/organisms/UserSettings.js new file mode 100644 index 0000000000..150f7e32dc --- /dev/null +++ b/src/controllers/organisms/UserSettings.js @@ -0,0 +1,81 @@ +/* +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 MatrixClientPeg = require("../../MatrixClientPeg"); +var React = require("react"); +var q = require('q'); +var dis = require("../../dispatcher"); + +var ComponentBroker = require('../../ComponentBroker'); + +module.exports = { + Phases: { + Loading: "loading", + Display: "display", + }, + + getInitialState: function() { + return { + displayName: null, + avatarUrl: null, + threePids: [], + clientVersion: "v0.X.Y", + phase: this.Phases.Loading, + }; + }, + + changeDisplayname: function(new_displayname) { + if (this.state.displayName == new_displayname) return; + + var self = this; + return MatrixClientPeg.get().setDisplayName(new_displayname).then( + function() { self.setState({displayName: new_displayname}); }, + function(err) { console.err(err); } + ); + }, + + changeAvatarUrl: function(new_avatar_url) { + if (this.state.avatarUrl == new_avatar_url) return; + + var self = this; + return MatrixClientPeg.get().setAvatarUrl(new_avatar_url).then( + function() { self.setState({displayName: new_displayname}); }, + function(err) { console.err(err); } + ); + }, + + componentWillMount: function() { + var self = this; + var cli = MatrixClientPeg.get(); + + var profile_d = cli.getProfileInfo(cli.credentials.userId); + var threepid_d = cli.getThreePids(); + + q.all([profile_d, threepid_d]).then( + function(resps) { + self.setState({ + displayName: resps[0].displayname, + avatarUrl: resps[0].avatar_url, + threepids: resps[1].threepids, + phase: self.Phases.Display, + }); + }, + function(err) { console.err(err); } + ); + }, +}