From dfd54f3b95db9e70b9ad9c98c6ecb3d04e8f1159 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Wed, 15 Jul 2015 15:04:24 +0100 Subject: [PATCH 01/10] Basic structure of user settings --- skins/base/css/pages/MatrixChat.css | 6 +++--- skins/base/views/molecules/DirectoryMenu.js | 9 ++++++++- skins/base/views/pages/MatrixChat.js | 19 ++++++++++++++++--- src/ComponentBroker.js | 1 + src/controllers/pages/MatrixChat.js | 17 ++++++++++++++--- 5 files changed, 42 insertions(+), 10 deletions(-) diff --git a/skins/base/css/pages/MatrixChat.css b/skins/base/css/pages/MatrixChat.css index 5ff442cf2c..b0f30c1131 100644 --- a/skins/base/css/pages/MatrixChat.css +++ b/skins/base/css/pages/MatrixChat.css @@ -38,7 +38,7 @@ limitations under the License. height: 100%; } -.mx_MatrixChat .mx_RoomView { +.mx_MatrixChat .mx_MainView { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; @@ -47,7 +47,7 @@ limitations under the License. background-color: #f3f8fa; width: 100%; - height: 100%; + height: 100%; } .mx_MatrixChat .mx_RightPanel { @@ -60,5 +60,5 @@ limitations under the License. background-color: #f3f8fa; -webkit-flex: 0 0 230px; flex: 0 0 230px; - height: 100%; + height: 100%; } diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js index b6c0f80805..f3b9e592b9 100644 --- a/skins/base/views/molecules/DirectoryMenu.js +++ b/skins/base/views/molecules/DirectoryMenu.js @@ -19,6 +19,8 @@ limitations under the License. var React = require('react'); var classNames = require('classnames'); +var dis = require("../../../../src/dispatcher"); + //var DirectoryMenuController = require("../../../../src/controllers/molecules/DirectoryMenuController"); var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); @@ -26,6 +28,11 @@ var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); module.exports = React.createClass({ displayName: 'DirectoryMenu', // mixins: [DirectoryMenuController], + + onSettingsClick: function() { + dis.dispatch({action: 'view_user_settings'}); + }, + render: function() { return (
@@ -42,7 +49,7 @@ module.exports = React.createClass({
Directory
-
+
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index 11e2be9ca2..ecfbd96f10 100644 --- a/skins/base/views/pages/MatrixChat.js +++ b/skins/base/views/pages/MatrixChat.js @@ -23,6 +23,7 @@ var LeftPanel = ComponentBroker.get('organisms/LeftPanel'); var RoomView = ComponentBroker.get('organisms/RoomView'); var RightPanel = ComponentBroker.get('organisms/RightPanel'); var Login = ComponentBroker.get('templates/Login'); +var UserSettings = ComponentBroker.get('organisms/UserSettings'); var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat"); @@ -36,11 +37,24 @@ module.exports = React.createClass({ render: function() { if (this.state.logged_in && this.state.ready) { + + var page_element; + var right_panel = ""; + + if (this.state.page_type == this.PageTypes.RoomView) { + page_element = + right_panel = + } else if (this.state.page_type == this.PageTypes.UserSettings) { + page_element = + } + return (
- - +
+ {page_element} +
+ {right_panel}
); } else if (this.state.logged_in) { @@ -54,4 +68,3 @@ module.exports = React.createClass({ } } }); - diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 6636ada1ca..d57ee34bf9 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -88,6 +88,7 @@ require('../skins/base/views/templates/Login'); require('../skins/base/views/organisms/Notifier'); require('../skins/base/views/organisms/CreateRoom'); require('../skins/base/views/molecules/UserSelector'); +require('../skins/base/views/organisms/UserSettings'); // new for vector require('../skins/base/views/organisms/LeftPanel'); require('../skins/base/views/organisms/RightPanel'); diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js index 717f91e7a4..d0afc3aeb6 100644 --- a/src/controllers/pages/MatrixChat.js +++ b/src/controllers/pages/MatrixChat.js @@ -29,10 +29,16 @@ var ComponentBroker = require('../../ComponentBroker'); var Notifier = ComponentBroker.get('organisms/Notifier'); module.exports = { + PageTypes: { + RoomView: "room_view", + UserSettings: "user_settings", + }, + getInitialState: function() { return { logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials), - ready: false + ready: false, + page_type: this.PageTypes.RoomView, }; }, @@ -74,7 +80,8 @@ module.exports = { case 'view_room': this.focusComposer = true; this.setState({ - currentRoom: payload.room_id + currentRoom: payload.room_id, + page_type: this.PageTypes.RoomView, }); break; case 'view_prev_room': @@ -95,6 +102,11 @@ module.exports = { currentRoom: allRooms[roomIndex].roomId }); break; + case 'view_user_settings': + this.setState({ + page_type: this.PageTypes.UserSettings, + }); + break; } }, @@ -139,4 +151,3 @@ module.exports = { dis.dispatch({action: 'focus_composer'}); } }; - From 2b81f460307c849eae7d6f129a96f25e6af2e38a Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Wed, 15 Jul 2015 15:04:39 +0100 Subject: [PATCH 02/10] Add placeHolder prop for EditableText --- skins/base/views/atoms/EditableText.js | 12 ++++++++++-- src/controllers/atoms/EditableText.js | 2 ++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/skins/base/views/atoms/EditableText.js b/skins/base/views/atoms/EditableText.js index a8f55814e7..07bdc911d7 100644 --- a/skins/base/views/atoms/EditableText.js +++ b/skins/base/views/atoms/EditableText.js @@ -43,14 +43,22 @@ module.exports = React.createClass({ }, onFinish: function(ev) { - this.setValue(ev.target.value); + if (ev.target.value) { + this.setValue(ev.target.value); + } else { + this.cancelEdit(); + } }, render: function() { var editable_el; if (this.state.phase == this.Phases.Display) { - editable_el =
{this.state.value}
; + if (this.state.value) { + editable_el =
{this.state.value}
; + } else { + editable_el =
{this.props.placeHolder}
; + } } else if (this.state.phase == this.Phases.Edit) { editable_el = (
diff --git a/src/controllers/atoms/EditableText.js b/src/controllers/atoms/EditableText.js index ac46973613..a314560666 100644 --- a/src/controllers/atoms/EditableText.js +++ b/src/controllers/atoms/EditableText.js @@ -22,6 +22,7 @@ module.exports = { propTypes: { onValueChanged: React.PropTypes.func, initalValue: React.PropTypes.string, + placeHolder: React.PropTypes.string, }, Phases: { @@ -33,6 +34,7 @@ module.exports = { return { onValueChanged: function() {}, initalValue: '', + placeHolder: 'Click to set', }; }, From 1b4358624fd0dcd932325bc99f2cb9b616c1a925 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 09:37:14 +0100 Subject: [PATCH 03/10] Add a basic modal dialog implementation --- skins/base/css/common.css | 28 +++++++++++++++++++ src/Modal.js | 58 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+) create mode 100644 src/Modal.js diff --git a/skins/base/css/common.css b/skins/base/css/common.css index ba2f4eab61..4c2e7c0b8d 100644 --- a/skins/base/css/common.css +++ b/skins/base/css/common.css @@ -33,3 +33,31 @@ h2 { margin-top: 16px; margin-bottom: 16px; } + +.mx_Dialog_Background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #ccc; + opacity: 0.5; + z-index: -200; +} + +.mx_Dialog_Wrapper { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.mx_Dialog { + background-color: #fff; + margin: auto; + max-width: 500px; + z-index: -100; + position: relative; + top: 100px; +} diff --git a/src/Modal.js b/src/Modal.js new file mode 100644 index 0000000000..ca11a2101b --- /dev/null +++ b/src/Modal.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 React = require('react'); +var q = require('q'); + +module.exports = { + DialogContainerId: "mx_Dialog_Container", + + getOrCreateContainer: function() { + var container = document.getElementById(this.DialogContainerId); + + if (!container) { + container = document.createElement("div"); + container.id = this.DialogContainerId; + document.body.appendChild(container); + } + + return container; + }, + + createDialog: function (Element, props) { + var self = this; + + var closeDialog = function() { + React.unmountComponentAtNode(self.getOrCreateContainer()); + + if (props && props.onFinished) props.onFinished.apply(arguments); + }; + + var dialog = ( +
+
+ +
+
+
+ ); + + React.render(dialog, this.getOrCreateContainer()); + }, +}; From bc93aeb50e9a9fe8018845fb4ec57453b4f8d1d4 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 09:37:58 +0100 Subject: [PATCH 04/10] 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); } + ); + }, +} From edc3302d89324f6a706aeaea5f776fd0c9d8563c Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 09:43:00 +0100 Subject: [PATCH 05/10] Fix broken RoomView CSS due to name clashes and splitting an element in two. --- skins/base/css/organisms/RoomView.css | 3 ++- skins/base/css/pages/MatrixChat.css | 2 +- skins/base/views/pages/MatrixChat.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index 9a9e6b4aee..bc1a16927d 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/skins/base/css/organisms/RoomView.css @@ -24,6 +24,7 @@ limitations under the License. display: -webkit-flex; display: flex; width: 100%; + height: 100%; flex-direction: column; -webkit-flex-direction: column; } @@ -65,7 +66,7 @@ limitations under the License. margin-bottom: 60px; /* background-color: #ff0; */ - overflow-y: scroll; + overflow-y: scroll; } .mx_RoomView_messageListWrapper { diff --git a/skins/base/css/pages/MatrixChat.css b/skins/base/css/pages/MatrixChat.css index b0f30c1131..544204116a 100644 --- a/skins/base/css/pages/MatrixChat.css +++ b/skins/base/css/pages/MatrixChat.css @@ -38,7 +38,7 @@ limitations under the License. height: 100%; } -.mx_MatrixChat .mx_MainView { +.mx_MatrixChat .mx_MatrixChat_MiddleView { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index ecfbd96f10..7c37c0fe71 100644 --- a/skins/base/views/pages/MatrixChat.js +++ b/skins/base/views/pages/MatrixChat.js @@ -51,7 +51,7 @@ module.exports = React.createClass({ return (
-
+
{page_element}
{right_panel} From 02045858f75f9b53ef733fea0540f69da8c8e424 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 10:23:31 +0100 Subject: [PATCH 06/10] Wire up change password --- skins/base/views/molecules/ChangePassword.js | 31 +++++++++++++++++--- src/controllers/molecules/ChangePassword.js | 31 +++++++++++++++++++- 2 files changed, 57 insertions(+), 5 deletions(-) diff --git a/skins/base/views/molecules/ChangePassword.js b/skins/base/views/molecules/ChangePassword.js index ff64a7216a..98b2e71bce 100644 --- a/skins/base/views/molecules/ChangePassword.js +++ b/skins/base/views/molecules/ChangePassword.js @@ -19,23 +19,39 @@ limitations under the License. var React = require('react'); var ChangePasswordController = require("../../../../src/controllers/molecules/ChangePassword"); +var Loader = require("react-loader"); module.exports = React.createClass({ displayName: 'ChangePassword', mixins: [ChangePasswordController], + onClickChange: function() { + var old_password = this.refs.old_input.getDOMNode().value; + var new_password = this.refs.new_input.getDOMNode().value; + var confirm_password = this.refs.confirm_input.getDOMNode().value; + if (new_password != confirm_password) { + this.setState({ + state: this.Phases.Error, + errorString: "Passwords don't match" + }); + } 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}
+ + +
- +
@@ -44,6 +60,13 @@ module.exports = React.createClass({ return ( ); + case this.Phases.Success: + return ( +
+ Success! + +
+ ) } } }); diff --git a/src/controllers/molecules/ChangePassword.js b/src/controllers/molecules/ChangePassword.js index 6bbc14b6d9..d824119590 100644 --- a/src/controllers/molecules/ChangePassword.js +++ b/src/controllers/molecules/ChangePassword.js @@ -30,6 +30,7 @@ module.exports = { Edit: "edit", Uploading: "uploading", Error: "error", + Success: "Success" }, getDefaultProps: function() { @@ -41,10 +42,38 @@ module.exports = { getInitialState: function() { return { phase: this.Phases.Edit, + errorString: '' } }, changePassword: function(old_password, new_password) { - // DO SOMETHING. + 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: '', + }) + // self.props.onFinished(); + }, function(err) { + self.setState({ + phase: self.Phases.Error, + errorString: err.toString() + }) + }); }, } From 5d99abf18c31102514a77826fbc421cf158989c5 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 10:38:00 +0100 Subject: [PATCH 07/10] Correctly pull in client version from package.json --- src/controllers/organisms/UserSettings.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/controllers/organisms/UserSettings.js b/src/controllers/organisms/UserSettings.js index 150f7e32dc..80056b2366 100644 --- a/src/controllers/organisms/UserSettings.js +++ b/src/controllers/organisms/UserSettings.js @@ -20,6 +20,7 @@ var MatrixClientPeg = require("../../MatrixClientPeg"); var React = require("react"); var q = require('q'); var dis = require("../../dispatcher"); +var version = require('../../../package.json').version; var ComponentBroker = require('../../ComponentBroker'); @@ -34,7 +35,7 @@ module.exports = { displayName: null, avatarUrl: null, threePids: [], - clientVersion: "v0.X.Y", + clientVersion: version, phase: this.Phases.Loading, }; }, From ca593b85442dda3f210c842fe8fff65e90c1fb6d Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 10:39:58 +0100 Subject: [PATCH 08/10] Remove commented out code --- src/controllers/molecules/ChangePassword.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/controllers/molecules/ChangePassword.js b/src/controllers/molecules/ChangePassword.js index d824119590..5cc73c5def 100644 --- a/src/controllers/molecules/ChangePassword.js +++ b/src/controllers/molecules/ChangePassword.js @@ -68,7 +68,6 @@ module.exports = { phase: self.Phases.Success, errorString: '', }) - // self.props.onFinished(); }, function(err) { self.setState({ phase: self.Phases.Error, From 3555f3573786cb035f74b72d210b0bac50708904 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 10:43:16 +0100 Subject: [PATCH 09/10] Check to make sure passwords aren't blank --- skins/base/views/molecules/ChangePassword.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/skins/base/views/molecules/ChangePassword.js b/skins/base/views/molecules/ChangePassword.js index 98b2e71bce..969a43d8fd 100644 --- a/skins/base/views/molecules/ChangePassword.js +++ b/skins/base/views/molecules/ChangePassword.js @@ -35,6 +35,11 @@ module.exports = React.createClass({ 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); } From 5d9db52b3224033d165dc45917e7b370a873cd3a Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 10:53:51 +0100 Subject: [PATCH 10/10] I just couldn't help myself --- skins/base/css/organisms/UserSettings.css | 20 ++++++++++++++++++++ skins/base/views/organisms/UserSettings.js | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 skins/base/css/organisms/UserSettings.css diff --git a/skins/base/css/organisms/UserSettings.css b/skins/base/css/organisms/UserSettings.css new file mode 100644 index 0000000000..eca55b5533 --- /dev/null +++ b/skins/base/css/organisms/UserSettings.css @@ -0,0 +1,20 @@ +/* +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. +*/ + +.mx_UserSettings { + max-width: 720px; + margin: auto; +} diff --git a/skins/base/views/organisms/UserSettings.js b/skins/base/views/organisms/UserSettings.js index e70a575a97..5bce0a036e 100644 --- a/skins/base/views/organisms/UserSettings.js +++ b/skins/base/views/organisms/UserSettings.js @@ -53,7 +53,7 @@ module.exports = React.createClass({ return case this.Phases.Display: return ( -
+

User Settings