diff --git a/src/app/assets/images/copy.png b/src/app/assets/images/copy.png new file mode 100644 index 000000000..cd23c32a6 Binary files /dev/null and b/src/app/assets/images/copy.png differ diff --git a/src/app/components/all.scss b/src/app/components/all.scss index 413174102..fe4e0f75f 100644 --- a/src/app/components/all.scss +++ b/src/app/components/all.scss @@ -26,6 +26,8 @@ @import './elements/HelpTip/styles'; @import './elements/Dropdown'; @import './elements/CreateCommunity'; +@import './elements/CopyPassword/styles'; +@import './elements/Toast/styles'; // modules @import './modules/Header/styles'; diff --git a/src/app/components/elements/ChangePassword.jsx b/src/app/components/elements/ChangePassword.jsx index 901fddc16..73f3972fd 100644 --- a/src/app/components/elements/ChangePassword.jsx +++ b/src/app/components/elements/ChangePassword.jsx @@ -12,10 +12,14 @@ import { api } from '@steemit/steem-js'; import * as transactionActions from 'app/redux/TransactionReducer'; import * as appActions from 'app/redux/AppReducer'; import LoadingIndicator from 'app/components/elements/LoadingIndicator'; +import CopyPassword from 'app/components/elements/CopyPassword'; +import Toast from 'app/components/elements/Toast'; import { validate_account_name } from 'app/utils/ChainValidation'; import { cleanReduxInput } from 'app/utils/ReduxForms'; import { APP_NAME } from 'app/client_config'; import { userActionRecord } from 'app/utils/ServerApiClient'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import copy from 'app/assets/images/copy.png'; const { string, oneOf } = PropTypes; @@ -33,9 +37,12 @@ class ChangePassword extends React.Component { accountName: props.username, nameError: '', generated: false, + modalVisible: false, + showToast: false, }; this.onNameChange = this.onNameChange.bind(this); this.generateWif = this.generateWif.bind(this); + this.copySuccess = this.copySuccess.bind(this); } componentWillMount() { this.props.setRouteTag(); @@ -47,7 +54,17 @@ class ChangePassword extends React.Component { generateWif(e) { newWif = 'P' + key_utils.get_random_key().toWif(); - this.setState({ generated: true }); + this.setState({ generated: true, modalVisible: true }); + } + copySuccess() { + this.setState({ + showToast: true, + }); + setTimeout(() => { + this.setState({ + showToast: false, + }); + }, 2000); } validateAccountName(name) { let nameError = ''; @@ -115,7 +132,7 @@ class ChangePassword extends React.Component { ); } - const { generated, loading, error } = this.state; + const { generated, loading, error, modalVisible } = this.state; const { username, authType, priorAuthKey /*enable2fa*/ } = this.props; const { handleSubmit, submitting, onClose } = this.props; // form stuff const { @@ -226,13 +243,24 @@ class ChangePassword extends React.Component { {(generated && (
{/* !! Do not put keys in a label, labels have an uppercase css style applied !! */} -
+
{newWif} + + +
- */} )) || (