From 7123d38b5cfa41f14180efde66d97df2fdba92f5 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Wed, 30 Aug 2017 15:30:11 +0200 Subject: [PATCH] Use local storage instead of cookies - Closes #681 --- README.md | 8 ++++---- features/step_definitions/generic.step.js | 5 +++-- features/support/localStorage.js | 11 +++++++++++ package.json | 1 - src/components/login/login.js | 13 ++++++------- src/components/login/login.test.js | 15 +++++++-------- 6 files changed, 31 insertions(+), 22 deletions(-) create mode 100644 features/support/localStorage.js diff --git a/README.md b/README.md index 1bc917395..bf20c2abe 100644 --- a/README.md +++ b/README.md @@ -15,14 +15,14 @@ npm run dev Open http://localhost:8080 -For ease of development, you can set a cookie to prefill a passphrase, e.g.: +For ease of development, you can setItem in localStorage to prefill a passphrase, e.g.: ``` -document.cookie = 'passphrase=wagon stock borrow episode laundry kitten salute link globe zero feed marble' +localStorage.setItem('passphrase', 'wagon stock borrow episode laundry kitten salute link globe zero feed marble') ``` -And then you can set a cookie to login automatically +And then you can setItem in localStorage to login automatically ``` -document.cookie = 'autologin=true' +localStorage.setItem('autologin', true) ``` ## Build diff --git a/features/step_definitions/generic.step.js b/features/step_definitions/generic.step.js index 30e8a28ae..22a329867 100644 --- a/features/step_definitions/generic.step.js +++ b/features/step_definitions/generic.step.js @@ -11,6 +11,7 @@ const { waitTime, } = require('../support/util.js'); const accounts = require('../support/accounts.js'); +const localStorage = require('../support/localStorage.js'); chai.use(chaiAsPromised); const expect = chai.expect; @@ -105,8 +106,8 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => { browser.ignoreSynchronization = true; browser.driver.manage().window().setSize(1000, 1000); browser.get('http://localhost:8080/'); - browser.manage().addCookie({ name: 'address', value: 'http://localhost:4000' }); - browser.manage().addCookie({ name: 'network', value: '2' }); + localStorage.setItem('address', 'http://localhost:4000'); + localStorage.setItem('network', 2); browser.get('http://localhost:8080/'); waitForElemAndSendKeys('.passphrase input', accounts[accountName].passphrase); waitForElemAndClickIt('.login-button', callback); diff --git a/features/support/localStorage.js b/features/support/localStorage.js new file mode 100644 index 000000000..8347e76cb --- /dev/null +++ b/features/support/localStorage.js @@ -0,0 +1,11 @@ +const localStorage = { + setItem: (key, value) => ( + browser.executeScript(`return window.localStorage.setItem('${key}', '${value}');`) + ), + clear: () => ( + browser.executeScript('return window.localStorage.clear();') + ), +}; + +module.exports = localStorage; + diff --git a/package.json b/package.json index 80e9259d4..f17380580 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "bitcore-mnemonic": "=1.1.1", "copy-to-clipboard": "=3.0.6", "flexboxgrid": "=6.3.1", - "js-cookie": "^2.1.4", "lisk-js": "=0.4.5", "moment": "=2.15.1", "postcss": "=6.0.2", diff --git a/src/components/login/login.js b/src/components/login/login.js index 1b9cb2b55..02ddb0a8a 100644 --- a/src/components/login/login.js +++ b/src/components/login/login.js @@ -1,5 +1,4 @@ import React from 'react'; -import Cookies from 'js-cookie'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import Input from 'react-toolbox/lib/input'; import Dropdown from 'react-toolbox/lib/dropdown'; @@ -47,9 +46,9 @@ class Login extends React.Component { this.props.history.replace( search.indexOf('?referrer') === 0 ? search.replace('?referrer=', '') : '/main/transactions'); if (this.state.address) { - Cookies.set('address', this.state.address); + localStorage.setItem('address', this.state.address); } - Cookies.set('network', this.state.network); + localStorage.setItem('network', this.state.network); } } @@ -108,9 +107,9 @@ class Login extends React.Component { } devPreFill() { - const address = Cookies.get('address'); - const passphrase = Cookies.get('passphrase'); - const network = parseInt(Cookies.get('network'), 10) || 0; + const address = localStorage.getItem('address') || ''; + const passphrase = localStorage.getItem('passphrase') || ''; + const network = parseInt(localStorage.getItem('network'), 10) || 0; this.setState({ network, @@ -120,7 +119,7 @@ class Login extends React.Component { // ignore this in coverage as it is hard to test and does not run in production /* istanbul ignore if */ - if (!env.production && Cookies.get('autologin') && !this.props.account.afterLogout && passphrase) { + if (!env.production && localStorage.getItem('autologin') && !this.props.account.afterLogout && passphrase) { setTimeout(() => { this.onLoginSubmission(passphrase); }); diff --git a/src/components/login/login.test.js b/src/components/login/login.test.js index deac9356d..f94d8bf43 100644 --- a/src/components/login/login.test.js +++ b/src/components/login/login.test.js @@ -4,7 +4,6 @@ import { spy } from 'sinon'; import sinonChai from 'sinon-chai'; import { mount, shallow } from 'enzyme'; import Lisk from 'lisk-js'; -import Cookies from 'js-cookie'; import Login from './login'; chai.use(sinonChai); @@ -84,15 +83,15 @@ describe('Login', () => { expect(props.history.replace).to.have.been.calledWith('/main/transactions'); }); - it('calls Cookies.set(\'address\', address) if this.state.address', () => { - const spyFn = spy(Cookies, 'set'); + it('calls localStorage.setItem(\'address\', address) if this.state.address', () => { + const spyFn = spy(localStorage, 'setItem'); wrapper = mount(); wrapper.setState({ address }); wrapper.setProps(props); expect(spyFn).to.have.been.calledWith('address', address); spyFn.restore(); - Cookies.remove('address'); + localStorage.removeItem('address'); }); }); @@ -198,8 +197,8 @@ describe('Login', () => { it('should set state with correct network index and passphrase', () => { const spyFn = spy(Login.prototype, 'validateUrl'); const passphrase = 'Test Passphrase'; - document.cookie = 'address=http:localhost:4000'; - document.cookie = `passphrase=${passphrase}`; + localStorage.setItem('address', 'http:localhost:4000'); + localStorage.setItem('passphrase', passphrase); // for invalid address, it should set network to 0 mount(); @@ -215,8 +214,8 @@ describe('Login', () => { const spyFn = spy(Login.prototype, 'validateUrl'); // for valid address should set network to 2 const passphrase = 'Test Passphrase'; - document.cookie = `passphrase=${passphrase}`; - document.cookie = 'address=http://localhost:4000'; + localStorage.setItem('passphrase', passphrase); + localStorage.setItem('address', 'http:localhost:4000'); mount(); expect(spyFn).to.have.been.calledWith({ passphrase,