Add new scenario & code improvement

LiskHQ · Mar 14, 2018 · e8a2ca5 · e8a2ca5
1 parent 84c1c7a
commit e8a2ca5
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
@@ -234,6 +234,7 @@
   "You have not forged any blocks yet": "You have not forged any blocks yet",
   "You need to become a delegate to start forging. If you already registered to become a delegate, your registration hasn't been processed, yet.": "You need to become a delegate to start forging. If you already registered to become a delegate, your registration hasn't been processed, yet.",
   "You've received {{value}} LSK.": "You've received {{value}} LSK.",
+  "Your ID is now secured!": "Your ID is now secured!",
   "Your favorite Lisk IDs": "Your favorite Lisk IDs",
   "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.": "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.",
   "Zero not allowed": "Zero not allowed",

diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css
@@ -183,7 +183,8 @@
 }
 
 .network,
-.unlocked {
+.unlocked,
+.unlockedSecured {
   font-size: 1em;
   position: absolute;
   top: 0;
@@ -208,10 +209,16 @@
     & span {
       transform: scale(1.1);
       transform-origin: 100%;
+      transition: transform ease-in-out 500ms;
     }
   }
 }
 
+.unlockedSecured {
+  left: 0;
+  padding-top: 30px;
+}
+
 .network {
   padding-top: 30px;
   right: 0;

diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js
@@ -27,6 +27,7 @@ class SavedAccounts extends React.Component {
     super();
 
     this.state = {
+      isSecureAppears: {},
     };
   }
 
@@ -60,13 +61,19 @@ class SavedAccounts extends React.Component {
   handleRemovePassphrase(account, e) {
     e.stopPropagation();
 
+    const uniqueID = `${account.network}${account.publicKey}`;
     const { savedAccounts } = this.props;
-    const savedActiveAccount = savedAccounts.find(acc => `${acc.network} ${acc.network}` === `${account.network} ${account.network}`);
+    const savedActiveAccount = savedAccounts.find(acc => `${acc.network}${acc.passphrase}` === `${account.network}${account.passphrase}`);
     if (savedActiveAccount) {
       this.props.removePassphrase(account);
     }
 
     this.props.removeSavedAccountPassphrase(account);
+
+    this.setState({ isSecureAppears: { ...this.state.isSecureAppears, [uniqueID]: true } });
+    setTimeout(() => {
+      this.setState({ isSecureAppears: { ...this.state.isSecureAppears, [uniqueID]: false } });
+    }, 3000);
   }
 
   render() {
@@ -116,12 +123,16 @@ class SavedAccounts extends React.Component {
               {(account.passphrase ?
                 <strong
                   className={`unlocked ${styles.unlocked}`}
-                  onClick={this.handleRemovePassphrase.bind(this, account)}
-                >
+                  onClick={this.handleRemovePassphrase.bind(this, account)}>
                   <FontIcon value='unlocked' />
                   {t('Lock ID')}
                 </strong> :
                 null)}
+              {(this.state.isSecureAppears[`${account.network}${account.publicKey}`] ?
+                <strong className={`unlockedSecured ${styles.unlockedSecured}`}>
+                  {t('Your ID is now secured!')}
+                </strong> :
+                null)}
               {(account.network !== networks.mainnet.code ?
                 <strong className={styles.network}>
                   {account.address ? account.address : t(getNetwork(account.network).name)}

diff --git a/src/components/savedAccounts/savedAccounts.test.js b/src/components/savedAccounts/savedAccounts.test.js
@@ -66,6 +66,7 @@ describe('SavedAccounts', () => {
       account: {
         balance: 100e8,
       },
+      isSecureAppears: false,
     });
     wrapper = mountWithRouter(<SavedAccounts {...props} />, {
       context: { store, i18n },

diff --git a/src/store/reducers/savedAccounts.js b/src/store/reducers/savedAccounts.js
@@ -63,7 +63,7 @@ const savedAccounts = (state = { accounts: [] }, action) => {
       return {
         ...state,
         accounts: state.accounts.map((account) => {
-          if ((`${action.data.network} ${action.data.network}` === `${account.network} ${account.network}`)) {
+          if ((`${action.data.network}${action.data.passphrase}` === `${account.network}${account.passphrase}`)) {
             delete account.passphrase;
           }
           return account;

diff --git a/test/integration/accountSwitch.test.js b/test/integration/accountSwitch.test.js
@@ -89,9 +89,9 @@ describe('@integration: Account switch', () => {
 
   describe('Scenario: should allow to "Lock ID" account', () => {
     step('Given I\'m on "account switcher" with accounts: "genesis,delegate,empty account"', setupStep);
-    step('Then I should see 3 instances of "saved account card"', () => helper.shouldSeeCountInstancesOf(1, 'strong.unlocked'));
+    step('Then I should see 1 instance of "Lock ID"', () => helper.shouldSeeCountInstancesOf(1, 'strong.unlocked'));
     step('When I click "Lock ID"', () => helper.clickOnElement('strong.unlocked'));
-    step('Then I should see 2 instances of "saved account card"', () => helper.shouldSeeCountInstancesOf(0, 'strong.unlocked'));
+    step('Then I should see 0 instances of "Lock ID"', () => helper.shouldSeeCountInstancesOf(0, 'strong.unlocked'));
   });
 
   describe('Scenario: should allow to switch account', () => {