diff --git a/src/components/views/dialogs/SetPasswordDialog.js b/src/components/views/dialogs/SetPasswordDialog.js new file mode 100644 index 0000000000..a0b6fd1e37 --- /dev/null +++ b/src/components/views/dialogs/SetPasswordDialog.js @@ -0,0 +1,87 @@ +/* +Copyright 2017 Vector Creations 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. +*/ + +import q from 'q'; +import React from 'react'; +import sdk from 'matrix-react-sdk'; +import {MatrixClientPeg} from 'matrix-react-sdk'; +import classnames from 'classnames'; + +/** + * Prompt the user to set a password + * + * On success, `onFinished()` when finished + */ +export default React.createClass({ + displayName: 'SetPasswordDialog', + propTypes: { + onFinished: React.PropTypes.func.isRequired, + }, + + getInitialState: function() { + return { + error: null, + }; + }, + + _onPasswordChanged: function() { + this.props.onFinished(); + }, + + _onPasswordChangeError: function(err) { + let errMsg = err.error || ""; + if (err.httpStatus === 403) { + errMsg = "Failed to change password. Is your password correct?"; + } else if (err.httpStatus) { + errMsg += ` (HTTP status ${err.httpStatus})`; + } + this.setState({ + error: errMsg, + }); + }, + + render: function() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + const ChangePassword = sdk.getComponent('views.settings.ChangePassword'); + const Spinner = sdk.getComponent('elements.Spinner'); + + return ( + +
+

+ This will allow you to return to your account after signing out, + and sign in on other devices. +

+ +
+ { this.state.error } +
+
+
+ ); + }, +}); diff --git a/src/components/views/globals/PasswordNagBar.js b/src/components/views/globals/PasswordNagBar.js index 11168403dc..3fd0191a31 100644 --- a/src/components/views/globals/PasswordNagBar.js +++ b/src/components/views/globals/PasswordNagBar.js @@ -19,15 +19,19 @@ limitations under the License. import React from 'react'; import sdk from 'matrix-react-sdk'; import Modal from 'matrix-react-sdk/lib/Modal'; +import dis from 'matrix-react-sdk/lib/dispatcher'; export default React.createClass({ onUpdateClicked: function() { - // TODO: Implement dialog to set password - // const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog'); - // Modal.createDialog(SetPasswordDialog, { - // onFinished: () => { - // } - // }); + const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog'); + Modal.createDialog(SetPasswordDialog, { + onFinished: () => { + // Notify SessionStore that the user's password was changed + dis.dispatch({ + action: 'password_changed', + }); + } + }); }, render: function() { diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index a0864817fe..b1964dca04 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -69,6 +69,7 @@ @import "./vector-web/views/context_menus/_MessageContextMenu.scss"; @import "./vector-web/views/context_menus/_RoomTileContextMenu.scss"; @import "./vector-web/views/dialogs/_ChangelogDialog.scss"; +@import "./vector-web/views/dialogs/_SetPasswordDialog.scss"; @import "./vector-web/views/directory/_NetworkDropdown.scss"; @import "./vector-web/views/elements/_ImageView.scss"; @import "./vector-web/views/elements/_Spinner.scss"; diff --git a/src/skins/vector/css/vector-web/views/dialogs/_SetPasswordDialog.scss b/src/skins/vector/css/vector-web/views/dialogs/_SetPasswordDialog.scss new file mode 100644 index 0000000000..28a8b7c9d7 --- /dev/null +++ b/src/skins/vector/css/vector-web/views/dialogs/_SetPasswordDialog.scss @@ -0,0 +1,35 @@ +/* +Copyright 2017 Vector Creations 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_SetPasswordDialog_change_password input { + border-radius: 3px; + border: 1px solid $input-border-color; + padding: 9px; + color: $primary-fg-color; + background-color: $primary-bg-color; + font-size: 15px; + width: 100%; + max-width: 280px; + margin-bottom: 10px; +} + +.mx_SetPasswordDialog_change_password_button { + margin-top: 68px; +} + +.mx_SetPasswordDialog .mx_Dialog_content { + margin-bottom: 0px; +}