Setup auto-login option and fix login redirect for better developer experience - Closes #633

README.md

@@ -15,6 +15,16 @@ npm run dev
 
 Open http://localhost:8080
 
+For ease of development, you can set a cookie to prefill a passphrase, e.g.:
+```
+document.cookie = 'passphrase=wagon stock borrow episode laundry kitten salute link globe zero feed marble'
+```
+
+And then you can set a cookie to login automatically
+```
+document.cookie = 'autologin=true'
+```
+
 ## Build
 
 ```

src/components/login/loginForm.js

@@ -9,6 +9,7 @@ import { isValidPassphrase } from '../../utils/passphrase';
 import networksRaw from './networks';
 import Passphrase from '../passphrase';
 import styles from './login.css';
+import env from '../../constants/env';
 
 /**
  * The container component containing login
@@ -42,7 +43,9 @@ class LoginForm extends React.Component {
 
   componentDidUpdate() {
     if (this.props.account && this.props.account.address) {
-      this.props.history.replace('/main/transactions');
+      const search = this.props.history.location.search;
+      this.props.history.replace(
+        search.indexOf('?referrer') === 0 ? search.replace('?referrer=', '') : '/main/transactions');
       if (this.state.address) {
         Cookies.set('address', this.state.address);
       }
@@ -111,6 +114,14 @@ class LoginForm extends React.Component {
       ...this.validators.address(address),
       ...this.validators.passphrase(passphrase),
     });
+
+    // 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) {
+      setTimeout(() => {
+        this.onLoginSubmission(passphrase);
+      });
+    }
   }
 
   render() {

src/components/login/loginForm.test.js

@@ -21,7 +21,7 @@ describe('LoginForm', () => {
   const props = {
     peers: {},
     account,
-    history: [],
+    history: {},
     onAccountUpdated: () => {},
     setActiveDialog: spy(),
     activePeerSet: (network) => {
@@ -73,6 +73,9 @@ describe('LoginForm', () => {
     props.account = { address: 'dummy' };
     props.history = {
       replace: spy(),
+      location: {
+        search: '',
+      },
     };
 
     it('calls this.props.history.replace(\'/main/transactions\')', () => {

src/components/privateRoute/index.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 
 export const PrivateRouteRender = ({ render, isAuthenticated, ...rest }) => (
     <Route {...rest} render={ matchProps => (
-     isAuthenticated ? render(matchProps) : <Redirect to='/' />
+     isAuthenticated ? render(matchProps) : <Redirect to={`/?referrer=${rest.history.location.pathname}`} />
     )}/>
   );
 

src/components/privateRoute/index.test.js

@@ -14,6 +14,7 @@ describe('PrivateRouteRender', () => {
         <div>
           <Route path='/' component={Public} />
           <PrivateRouteRender
+            history={ { location: { pathname: '' } } }
             path='/private'
             render={({ match }) => <Route to={`${match.url}/test`} component={Private}/>}
             isAuthenticated={isAuthenticated} />

src/store/reducers/account.js

@@ -57,7 +57,9 @@ const account = (state = {}, action) => {
     case actionTypes.accountLoggedIn:
       return merge(state, action.data);
     case actionTypes.accountLoggedOut:
-      return {};
+      return {
+        afterLogout: true,
+      };
     default:
       return state;
   }

src/store/reducers/account.test.js

@@ -40,7 +40,7 @@ describe('Reducer: account(state, action)', () => {
       type: actionTypes.accountLoggedOut,
     };
     const changedAccount = account(state, action);
-    expect(changedAccount).to.deep.equal({ });
+    expect(changedAccount).to.deep.equal({ afterLogout: true });
   });
 
   it('should return state if action.type is none of the above', () => {

webpack.config.js

@@ -27,6 +27,7 @@ module.exports = (env) => {
       path: path.resolve(__dirname, 'app', 'dist'),
       filename: env.test ? 'bundle.js' : 'bundle.[name].js',
     },
+    devtool: 'source-map',
     devServer: {
       contentBase: 'src',
       inline: true,