diff --git a/src/components/views/dialogs/SetPasswordDialog.js b/src/components/views/dialogs/SetPasswordDialog.js index 47e13a1782..3e34d8b4b1 100644 --- a/src/components/views/dialogs/SetPasswordDialog.js +++ b/src/components/views/dialogs/SetPasswordDialog.js @@ -17,7 +17,42 @@ limitations under the License. import React from 'react'; import sdk from 'matrix-react-sdk'; import { _t } from 'matrix-react-sdk/lib/languageHandler'; +import Modal from 'matrix-react-sdk/lib/Modal'; +const WarmFuzzy = function(props) { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + let title = _t('You have successfully set a password!'); + if (props.didSetEmail) { + title = _t('You have successfully set a password and an email address!'); + } + const advice = _t('You can now return to your account after signing out, and sign in on other devices.'); + let extraAdvice = null; + if (!props.didSetEmail) { + extraAdvice = _t('Remember, you can always set an email address in user settings if you change your mind.'); + } + + return +
+

+ { advice } +

+

+ { extraAdvice } +

+
+
+ +
+
; +}; /** * Prompt the user to set a password @@ -33,13 +68,19 @@ export default React.createClass({ getInitialState: function() { return { error: null, - success: false, }; }, - _onPasswordChanged: function() { - this.setState({ - success: true, + componentWillMount: function() { + console.info('SetPasswordDialog component will mount'); + }, + + _onPasswordChanged: function(res) { + Modal.createDialog(WarmFuzzy, { + didSetEmail: res.didSetEmail, + onFinished: () => { + this._onContinueClicked(); + }, }); }, @@ -66,29 +107,6 @@ export default React.createClass({ const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const ChangePassword = sdk.getComponent('views.settings.ChangePassword'); - if (this.state.success) { - return ( - -
-

- { _t('You can now return to your account after signing out, and sign in on other devices.') } -

-
-
- -
-
- ); - } - return (
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 4637530b56..4c4d7cc2a6 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -71,6 +71,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/_SetEmailDialog.scss"; @import "./vector-web/views/dialogs/_SetPasswordDialog.scss"; @import "./vector-web/views/directory/_NetworkDropdown.scss"; @import "./vector-web/views/elements/_ImageView.scss"; diff --git a/src/skins/vector/css/vector-web/views/dialogs/_SetEmailDialog.scss b/src/skins/vector/css/vector-web/views/dialogs/_SetEmailDialog.scss new file mode 100644 index 0000000000..588f10c9cb --- /dev/null +++ b/src/skins/vector/css/vector-web/views/dialogs/_SetEmailDialog.scss @@ -0,0 +1,36 @@ +/* +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_SetEmailDialog_email_input { + border-radius: 3px; + border: 1px solid $input-border-color; + padding: 9px; + color: $input-fg-color; + background-color: $primary-bg-color; + font-size: 15px; + width: 100%; + max-width: 280px; + margin-bottom: 10px; +} + +.mx_SetEmailDialog_email_input:focus { + outline: none; + box-shadow: none; + border: 1px solid $accent-color; +} + +.mx_SetEmailDialog_email_input_placeholder { +}