Merge pull request #689 from LiskHQ/681-setup-cookies-in-electron

Use local storage instead of cookies - Closes #681

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

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);

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;
+

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",

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);
       });

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(<Login {...props} />);
       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(<Login {...props} />);
@@ -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(<Login {...props} />);
       expect(spyFn).to.have.been.calledWith({
         passphrase,