From c51a9cc7f7f55c222241a433d22c7bf6556de992 Mon Sep 17 00:00:00 2001
From: snow <snow.li@tron.network>
Date: Tue, 11 May 2021 19:15:36 +0800
Subject: [PATCH 1/3] regenerate password

---
 src/app/assets/images/copy.png                | Bin 0 -> 404 bytes
 src/app/components/all.scss                   |   2 +
 .../components/elements/ChangePassword.jsx    |  62 ++++++++++++--
 .../elements/CopyPassword/index.jsx           |  80 ++++++++++++++++++
 .../elements/CopyPassword/styles.scss         |  80 ++++++++++++++++++
 src/app/components/elements/Toast/index.jsx   |  15 ++++
 src/app/components/elements/Toast/styles.scss |  74 ++++++++++++++++
 src/app/locales/en.json                       |   8 ++
 src/app/locales/zh.json                       |   8 ++
 9 files changed, 324 insertions(+), 5 deletions(-)
 create mode 100644 src/app/assets/images/copy.png
 create mode 100644 src/app/components/elements/CopyPassword/index.jsx
 create mode 100644 src/app/components/elements/CopyPassword/styles.scss
 create mode 100644 src/app/components/elements/Toast/index.jsx
 create mode 100644 src/app/components/elements/Toast/styles.scss

diff --git a/src/app/assets/images/copy.png b/src/app/assets/images/copy.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd23c32a6f3d422a42b2a324c20287dbc0b4cb4c
GIT binary patch
literal 404
zcmV;F0c-w=P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0VzpDK~#7Ft&~e{
zgD?<=|1n6((u=C<(!D{_U6(mRj?g3YBsoIclcc+<D|!RmRlD>OMPO$PMj{Y!UY}&}
zWB3`5XH4jEuf8(^7B~Y3dZ+HhgZfeqBF6;?+=x`FOag`UgA!25h@k@vyDvwDX4qxy
zm_h^ryLNCKyJT~GoxO0V)&%>=Z8arkL1z3%^@Gg6e%9R8y>-pvFTVLcZ~L?9SFe7n
zUBeU+${=21Zki7YEszXi6%*p%i)|2CRXi3DZ^sOy9<^9FDW*;hCqjH$92ZH~3NeZ%
z7H^i>2SP=2G8*Tj54L9X(s0Qv=b>aq@P)k%$*Wrj1~Kwt=p|bhz9H&2(JcSVpMKl<
yT8QtH#a%Fn(d5#Q)WLob#3ljZbm*t+jb{&HJXW9MGN&~F0000<MNUMnLSTaNFrmHx

literal 0
HcmV?d00001

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..16c6fd19d 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,18 @@ 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 });
+        console.log('shengchengmima');
+    }
+    copySuccess() {
+        this.setState({
+            showToast: true,
+        });
+        setTimeout(() => {
+            this.setState({
+                showToast: false,
+            });
+        }, 2000);
     }
     validateAccountName(name) {
         let nameError = '';
@@ -115,7 +133,7 @@ class ChangePassword extends React.Component {
                 </div>
             );
         }
-        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 +244,24 @@ class ChangePassword extends React.Component {
                     <label>
                         {tt('g.generated_password') + ' '}{' '}
                         <span className="secondary">({tt('g.new')})</span>
+                        {generated && (
+                            <span
+                                style={{ float: 'right' }}
+                                onClick={this.generateWif}
+                            >
+                                <a>{tt('copy_password.regenerate')}</a>
+                            </span>
+                        )}
                         <br />
                     </label>
                     {(generated && (
                         <span>
                             <div>
                                 {/* !! Do not put keys in a label, labels have an uppercase css style applied !! */}
-                                <div className="overflow-ellipsis">
+                                <div
+                                    className="overflow-ellipsis"
+                                    style={{ position: 'relative' }}
+                                >
                                     <code
                                         style={{
                                             display: 'block',
@@ -245,12 +274,26 @@ class ChangePassword extends React.Component {
                                         }}
                                     >
                                         {newWif}
+                                        <CopyToClipboard
+                                            text={newWif}
+                                            onCopy={this.copySuccess}
+                                        >
+                                            <img
+                                                src={copy}
+                                                style={{
+                                                    position: 'absolute',
+                                                    top: 6,
+                                                    right: 6,
+                                                    cursor: 'pointer',
+                                                }}
+                                            />
+                                        </CopyToClipboard>
                                     </code>
                                 </div>
                             </div>
-                            <label className="ChangePassword__backup_text">
+                            {/*<label className="ChangePassword__backup_text">
                                 {tt('g.backup_password_by_storing_it')}.
-                            </label>
+                                </label>*/}
                         </span>
                     )) || (
                         <button
@@ -335,6 +378,15 @@ class ChangePassword extends React.Component {
                         </div>
                     )}
                 </form>
+                <CopyPassword
+                    visible={modalVisible}
+                    newWif={newWif}
+                    close={() => this.setState({ modalVisible: false })}
+                />
+                <Toast
+                    text={tt('copy_password.copy_success')}
+                    showToast={this.state.showToast}
+                />
             </span>
         );
         // {enable2fa && <p>
diff --git a/src/app/components/elements/CopyPassword/index.jsx b/src/app/components/elements/CopyPassword/index.jsx
new file mode 100644
index 000000000..0244e41be
--- /dev/null
+++ b/src/app/components/elements/CopyPassword/index.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import copy from 'app/assets/images/copy.png';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import tt from 'counterpart';
+import Toast from 'app/components/elements/Toast';
+
+export default class CopyPassword extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            password: '',
+            showToast: false,
+            copySuccess: false,
+        };
+        this.copySuccess = this.copySuccess.bind(this);
+        this.close = this.close.bind(this);
+    }
+
+    copySuccess() {
+        this.setState({
+            copySuccess: true,
+            showToast: true,
+        });
+        setTimeout(() => {
+            this.setState({
+                showToast: false,
+            });
+        }, 2000);
+    }
+
+    close() {
+        if (!this.state.copySuccess) return;
+        this.props.close();
+        this.setState({
+            copySuccess: false,
+        });
+    }
+    render() {
+        return (
+            <div>
+                {this.props.visible ? (
+                    <div className="copy_password">
+                        <div className="copy_password_cover" />
+                        <div className="copy_password_modal">
+                            <div className="title">
+                                {tt('copy_password.back_up')}
+                            </div>
+                            <div className="content">
+                                {tt('copy_password.back_up_tips')}
+                            </div>
+                            <div className="input_password">
+                                {this.props.newWif}
+                                <CopyToClipboard
+                                    text={this.props.newWif}
+                                    onCopy={this.copySuccess}
+                                >
+                                    <img src={copy} />
+                                </CopyToClipboard>
+                            </div>
+                            <div
+                                className={`footer ${
+                                    this.state.copySuccess ? 'footer_blue' : ''
+                                }`}
+                                onClick={this.close}
+                            >
+                                {tt('copy_password.back_up_success')}
+                            </div>
+                        </div>
+                    </div>
+                ) : null}
+                {
+                    <Toast
+                        text={tt('copy_password.copy_success')}
+                        showToast={this.state.showToast}
+                    />
+                }
+            </div>
+        );
+    }
+}
diff --git a/src/app/components/elements/CopyPassword/styles.scss b/src/app/components/elements/CopyPassword/styles.scss
new file mode 100644
index 000000000..e4a7608ac
--- /dev/null
+++ b/src/app/components/elements/CopyPassword/styles.scss
@@ -0,0 +1,80 @@
+  
+  .copy_password {
+    .copy_password_modal{
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 20px;
+      width: 533px;
+      height: 324px;
+      background: #FFFFFF;
+      border-radius: 12px;
+      z-index: 99;
+      .title {
+        font-family: PingFang SC;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 22px;
+
+        color: #252736;
+        margin-bottom: 14px;
+      }
+      .content {
+        font-family: PingFang SC;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 20px;
+        color: rgba(47, 47, 47, 0.5);
+        margin-bottom: 29px;
+      }
+      .input_password {
+        position: relative;
+        background: #FFFFFF;
+        border: 1px solid #CACACA;
+        box-sizing: border-box;
+        border-radius: 4px;
+        margin-bottom: 64px;
+        padding: 12px;
+        font-family: PingFang SC;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 12px;
+        line-height: 17px;
+        color: #939393;
+        img {
+          position: absolute;
+          right: 11px;
+          cursor: pointer;
+        }
+      }
+      .footer {
+        background: #F7F7F7;
+        border-radius: 10px;
+        font-family: PingFang SC;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: rgba(47, 47, 47, 0.5);
+        text-align: center;
+        padding: 10px;
+      }
+      .footer_blue {
+        color: #fff;
+        background: #1720C9;
+        cursor: pointer;
+      }
+    }
+    .copy_password_cover {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0,0,0,0.5);
+      z-index: 9;
+    }
+  };
\ No newline at end of file
diff --git a/src/app/components/elements/Toast/index.jsx b/src/app/components/elements/Toast/index.jsx
new file mode 100644
index 000000000..a2a83a904
--- /dev/null
+++ b/src/app/components/elements/Toast/index.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default class Toast extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className={`copy_toast ${this.props.showToast ? 'show' : ''}`}>
+                {this.props.text}
+            </div>
+        );
+    }
+}
diff --git a/src/app/components/elements/Toast/styles.scss b/src/app/components/elements/Toast/styles.scss
new file mode 100644
index 000000000..2d4b4e1d0
--- /dev/null
+++ b/src/app/components/elements/Toast/styles.scss
@@ -0,0 +1,74 @@
+  
+  .copy_toast {
+    visibility: hidden;
+    max-width: 120px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 4px;
+    line-height: 50px;
+    position: fixed;
+    z-index: 1;
+    left: 0;right:0;
+    bottom: 30px;
+    font-size: 16px;
+    white-space: nowrap;
+    z-index: 100;
+  }
+
+  .copy_toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 4.5s;
+  }
+
+  @-webkit-keyframes fadein {
+      from {bottom: 0; opacity: 0;} 
+      to {bottom: 30px; opacity: 1;}
+  }
+
+  @keyframes fadein {
+      from {bottom: 0; opacity: 0;}
+      to {bottom: 30px; opacity: 1;}
+  }
+
+  @-webkit-keyframes expand {
+      from {min-width: 50px} 
+      to {min-width: 350px}
+  }
+
+  @keyframes expand {
+      from {min-width: 50px}
+      to {min-width: 350px}
+  }
+  @-webkit-keyframes stay {
+      from {min-width: 350px} 
+      to {min-width: 350px}
+  }
+
+  @keyframes stay {
+      from {min-width: 350px}
+      to {min-width: 350px}
+  }
+  @-webkit-keyframes shrink {
+      from {min-width: 350px;} 
+      to {min-width: 50px;}
+  }
+
+  @keyframes shrink {
+      from {min-width: 350px;} 
+      to {min-width: 50px;}
+  }
+
+  @-webkit-keyframes fadeout {
+      from {bottom: 30px; opacity: 1;} 
+      to {bottom: 60px; opacity: 0;}
+  }
+
+  @keyframes fadeout {
+      from {bottom: 30px; opacity: 1;}
+      to {bottom: 60px; opacity: 0;}
+  }
\ No newline at end of file
diff --git a/src/app/locales/en.json b/src/app/locales/en.json
index 97c02b8a3..e95e26ee3 100644
--- a/src/app/locales/en.json
+++ b/src/app/locales/en.json
@@ -1128,5 +1128,13 @@
             "Data is invalid. Please check if you are using the correct private key.",
         "need_active_or_owner_key":
             "This operation requires logging in with your Active or Owner key or Master password."
+    },
+    "copy_password": {
+        "back_up": "Back up password",
+        "back_up_success": "I've copied the password. Continue.",
+        "back_up_tips":
+            "Please copy and save this master password for future login.Please note: Steemit does not keep records of anyone's password. Lost passwords cannot be retrieved. Please save your password properly.",
+        "regenerate": "Regenerate",
+        "copy_success": "Copied successfully"
     }
 }
diff --git a/src/app/locales/zh.json b/src/app/locales/zh.json
index ff6296c80..b0be6d46d 100644
--- a/src/app/locales/zh.json
+++ b/src/app/locales/zh.json
@@ -903,5 +903,13 @@
         "data_is_invalid": "数据异常.请确认你使用的私钥是正确的。",
         "need_active_or_owner_key":
             "此操作需要使用您的活跃密钥或拥有者密钥或主密码登陆。"
+    },
+    "copy_password": {
+        "back_up": "备份密码",
+        "back_up_success": "我已复制密码，继续",
+        "back_up_tips":
+            "请复制并保存此主密码，便于稍后登录您的账户。注意：Steemit不保存用户任何密码，因此一旦丢失，无法找回，请务必安全保存！",
+        "regenerate": "重新生成",
+        "copy_success": "复制成功"
     }
 }

From ac1fcbec82d3f1c05f3dfafdfdeecb4381691762 Mon Sep 17 00:00:00 2001
From: snow <snow.li@tron.network>
Date: Thu, 13 May 2021 15:56:15 +0800
Subject: [PATCH 2/3] edit styles

---
 src/app/components/elements/Toast/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/elements/Toast/styles.scss b/src/app/components/elements/Toast/styles.scss
index 2d4b4e1d0..b9d709b6a 100644
--- a/src/app/components/elements/Toast/styles.scss
+++ b/src/app/components/elements/Toast/styles.scss
@@ -1,7 +1,7 @@
   
   .copy_toast {
     visibility: hidden;
-    max-width: 120px;
+    max-width: 160px;
     height: 50px;
     /*margin-left: -125px;*/
     margin: auto;

From 96fb6019c50b494e19e8a8d97484847e79a7b1dd Mon Sep 17 00:00:00 2001
From: snow <snow.li@tron.network>
Date: Thu, 10 Jun 2021 18:43:24 +0800
Subject: [PATCH 3/3] commit

---
 src/app/components/elements/ChangePassword.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/components/elements/ChangePassword.jsx b/src/app/components/elements/ChangePassword.jsx
index 16c6fd19d..73f3972fd 100644
--- a/src/app/components/elements/ChangePassword.jsx
+++ b/src/app/components/elements/ChangePassword.jsx
@@ -55,7 +55,6 @@ class ChangePassword extends React.Component {
     generateWif(e) {
         newWif = 'P' + key_utils.get_random_key().toWif();
         this.setState({ generated: true, modalVisible: true });
-        console.log('shengchengmima');
     }
     copySuccess() {
         this.setState({