From e8a2ca59f43532330a33a310e81f0f8df1b53b89 Mon Sep 17 00:00:00 2001 From: michaeltomasik Date: Wed, 14 Mar 2018 16:19:54 +0100 Subject: [PATCH] Add new scenario & code improvement --- i18n/locales/en/common.json | 1 + src/components/savedAccounts/savedAccounts.css | 9 ++++++++- src/components/savedAccounts/savedAccounts.js | 17 ++++++++++++++--- .../savedAccounts/savedAccounts.test.js | 1 + src/store/reducers/savedAccounts.js | 2 +- test/integration/accountSwitch.test.js | 4 ++-- 6 files changed, 27 insertions(+), 7 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index a2bd50254d8..17fcdcd3728 100644 --- 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 index cefec3f8bc6..31b9352d080 100644 --- 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 index eaf2138014d..aa3f2d08689 100644 --- 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 ? + onClick={this.handleRemovePassphrase.bind(this, account)}> {t('Lock ID')} : null)} + {(this.state.isSecureAppears[`${account.network}${account.publicKey}`] ? + + {t('Your ID is now secured!')} + : + null)} {(account.network !== networks.mainnet.code ? {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 index 8e7320ff77c..e3469e8aaff 100644 --- 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(, { context: { store, i18n }, diff --git a/src/store/reducers/savedAccounts.js b/src/store/reducers/savedAccounts.js index 393924e5068..50c6ec606be 100644 --- 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 index 11a316fed34..a8f418a02a5 100644 --- 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', () => {