Wallet local storage with spending password

examples/explorer/.eslintrc

@@ -15,7 +15,7 @@
   },
   "rules": {
     "func-names": "error",
-    "new-cap": "off",
+    "new-cap": ["off", { "capIsNewExceptionPattern": "^Aesjs\.." }],
     "arrow-parens": "off",
     "consistent-return": "off",
     "comma-dangle": "off",

examples/wallet/app/Routes.js

@@ -9,7 +9,8 @@ import Settings from './pages/Settings';
 import ChooseRestoreOrImport from './containers/ChooseRestoreOrImport';
 import Delegate from './pages/Delegate';
 import Index from './containers/Index';
-import InputKeys from './containers/InputKeys';
+import InputKeys from './pages/InputKeys';
+import UnlockWallet from './containers/UnlockWallet';
 
 export default () => (
   <App>
@@ -19,6 +20,7 @@ export default () => (
       <Route path={routes.STAKING} component={Delegate} />
       <Route path={routes.SETTINGS} component={Settings} />
       <Route path={routes.INPUT_KEYS} component={InputKeys} />
+      <Route path={routes.UNLOCK_WALLET} component={UnlockWallet} />
       <Route
         path={routes.CHOOSE_RESTORE_OR_IMPORT}
         component={ChooseRestoreOrImport}

examples/wallet/app/actions/account.js

@@ -30,47 +30,38 @@ import {
   getTransactions
 } from '../utils/nodeConnection';
 import { isValidMnemonic, createSeedFromMnemonic } from '../utils/mnemonic';
-import { saveAccountInfoInLocalStorage } from '../utils/storage';
+import {
+  saveEncryptedAccountInfo,
+  readEncryptedAccountInfo
+} from '../utils/storage';
 
 import routes from '../constants/routes.json';
 
 export type SetKeysAction = { type: 'SET_KEYS' } & AccountKeys;
 export const SET_KEYS = 'SET_KEYS';
-export const PRIVATE_KEY_ERROR = 'privateKeyError';
-export const ACCOUNT_STATE_ERROR = 'accountStateError';
 
-export function setAccount(privateKey: string): Thunk {
+export function setAccount(
+  privateKey: string,
+  unlockWalletPassword: string
+): Thunk<SetKeysAction> {
   return function setAccountThunk(dispatch) {
-    return getAccountFromPrivateKey(privateKey).then(
-      curry(initializeKeysAndRedirect)(dispatch)
+    return getAccountFromPrivateKey(privateKey).then(keys =>
+      curry(initializeKeysAndRedirect)(dispatch, keys, unlockWalletPassword)
     );
   };
 }
 
-export function setAccountFromPrivateKey(privateKey: string): Thunk {
-  return function setAccountFromPrivateKeyThunk(dispatch) {
-    getAccountFromPrivateKey(privateKey)
-      .then(loadedPrivateKey => {
-        dispatch({
-          type: SET_KEYS,
-          ...loadedPrivateKey
-        });
-        return dispatch(updateAccountTransactionsAndState());
-      })
-      .catch(error => {
-        console.error(error);
-        throw new Error(PRIVATE_KEY_ERROR);
-      });
-  };
-}
-
-export function updateAccountTransactionsAndState(): Thunk {
-  return function updateAccountTransactionsAndStateThunk(dispatch) {
-    return Promise.all([
-      dispatch(updateAccountTransactions()),
-      dispatch(updateNodeSettings()),
-      dispatch(updateAccountState())
-    ]).then(() => dispatch(push(routes.WALLET)));
+export function setKeysWithUnlockWalletPassword(
+  unlockWalletPassword: string = ''
+): Thunk<SetKeysAction> {
+  return function setKeysWithUnlockWalletPasswordThunk(dispatch) {
+    const accountKeys = readEncryptedAccountInfo(unlockWalletPassword);
+    if (accountKeys) {
+      return getAccountFromPrivateKey(accountKeys.privateKey).then(keys =>
+        curry(initializeKeysAndRedirect)(dispatch, keys, unlockWalletPassword)
+      );
+    }
+    throw new Error('Invalid password');
   };
 }
 
@@ -83,30 +74,36 @@ export function updateAccountTransactionsAndState(): Thunk {
  * @param {boolean} saveAccount If true, the keys are stored in the local storage
  */
 const initializeKeysAndRedirect = (
-  dispatch: Dispatch<SetKeysAction>,
+  dispatch: Dispatch,
   keys: AccountKeys,
-  saveAccount?: boolean = true
+  unlockWalletPassword: string = ''
 ) => {
   dispatch({
     type: SET_KEYS,
     ...keys
   });
-  if (saveAccount) {
-    saveAccountInfoInLocalStorage(keys);
-  }
 
-  return dispatch(updateAccountTransactionsAndState());
+  saveEncryptedAccountInfo(unlockWalletPassword, keys);
+
+  return Promise.all([
+    dispatch(updateAccountTransactions()),
+    dispatch(updateNodeSettings()),
+    dispatch(updateAccountState())
+  ])
+    .catch(console.error)
+    .then(() => dispatch(push(routes.WALLET)));
 };
 
 export function setAccountFromMnemonic(
   mnemonicPhrase: string,
-  mnemonicPassword?: string
-) {
+  mnemonicPassword: string,
+  unlockWalletPassword: string
+): Thunk<SetKeysAction> {
   if (isValidMnemonic(mnemonicPhrase)) {
     const seed = createSeedFromMnemonic(mnemonicPhrase, mnemonicPassword);
     return function setAccountThunk(dispatch) {
-      return getAccountFromSeed(seed).then(
-        curry(initializeKeysAndRedirect)(dispatch)
+      return getAccountFromSeed(seed).then(keys =>
+        curry(initializeKeysAndRedirect)(dispatch, keys, unlockWalletPassword)
       );
     };
   }
@@ -119,7 +116,7 @@ export type SetAccountStateAction = {
 } & AccountState;
 export const SET_ACCOUNT_STATE = 'SET_ACCOUNT_STATE';
 
-export function updateAccountState(): Thunk {
+export function updateAccountState(): Thunk<SetAccountStateAction> {
   return function updateAccountStateThunk(dispatch, getState) {
     const { identifier }: { identifier: Identifier } = getState().account;
     if (!identifier) {
@@ -139,7 +136,7 @@ export function updateAccountState(): Thunk {
         // TODO: display a notification or something
         .catch(() => {
           console.error('there was an error fetching account info');
-          return Promise.reject(new Error(ACCOUNT_STATE_ERROR));
+          return Promise.reject();
         })
     );
   };
@@ -151,7 +148,7 @@ export type SetTransactionsAction = {
 };
 export const SET_TRANSACTIONS = 'SET_TRANSACTIONS';
 
-export function updateAccountTransactions(): Thunk {
+export function updateAccountTransactions(): Thunk<SetAccountStateAction> {
   return function updateAccountTransactionsThunk(dispatch, getState) {
     const { address }: { address: Address } = getState().account;
     if (!address) {
@@ -171,7 +168,7 @@ export function updateAccountTransactions(): Thunk {
         // TODO: display a notification or something
         .catch(() => {
           console.error('there was an error fetching transactions');
-          return Promise.reject(new Error(ACCOUNT_STATE_ERROR));
+          return Promise.reject();
         })
     );
   };

examples/wallet/app/actions/router.js

@@ -2,32 +2,15 @@
 import { push } from 'connected-react-router';
 import type { Dispatch, GetState } from '../reducers/types';
 import type { Address } from '../models';
-import routes from '../constants/routes.json';
-import {
-  updateAccountTransactionsAndState,
-  ACCOUNT_STATE_ERROR
-} from './account';
-import { readAccountKeysFromLocalStorage } from '../utils/storage';
+import routes from '../constants/routes';
 
-export const SET_KEYS = 'SET_KEYS';
+import { isUnlockWalletPasswordCreated } from '../utils/storage';
 
 // eslint-disable-next-line import/prefer-default-export
 export const redirectToFirstAppPage = () => {
   return (dispatch: Dispatch, getState: GetState) => {
-    const accountKeys = readAccountKeysFromLocalStorage();
-    if (accountKeys) {
-      dispatch({
-        type: SET_KEYS,
-        ...accountKeys
-      });
-      return dispatch(updateAccountTransactionsAndState()).catch(error => {
-        if (error.message === ACCOUNT_STATE_ERROR) {
-          console.error('There was an error retrieving account status');
-        }
-
-        return dispatch(push(routes.WALLET));
-      });
-    }
+    if (isUnlockWalletPasswordCreated())
+      return dispatch(push(routes.UNLOCK_WALLET));
     const {
       account: { address }
     }: { account: { address: Address } } = getState();

examples/wallet/app/components/CreateUnlockWalletPassword.js

@@ -0,0 +1,97 @@
+// @flow
+import React, { useState } from 'react';
+import Form from 'react-bootstrap/Form';
+import PropTypes from 'prop-types';
+
+CreateUnlockWalletPassword.propTypes = {
+  setValidCreateUnlockWalletPassword: PropTypes.func
+};
+export default function CreateUnlockWalletPassword({
+  setValidCreateUnlockWalletPassword
+}) {
+  const checkValidUnlockWalletPassword = function checkValidUnlockWalletPassword(
+    pass
+  ) {
+    setIsValidPassword(true);
+    if (!pass) {
+      setIsValidPassword(false);
+      return false;
+    }
+    if (pass.length < 8) {
+      setIsValidPassword(false);
+      return false;
+    }
+  };
+
+  const checkValidUnlockWalletConfirmation = function checkValidUnlockWalletConfirmation(
+    unlockWalletPassword,
+    confirmation
+  ) {
+    setArePasswordAndConfirmationEqual(true);
+    let isValidUnlockPassword = true;
+    if (!confirmation || confirmation.length < 8) {
+      isValidUnlockPassword = false;
+    }
+
+    if (unlockWalletPassword !== confirmation) {
+      setArePasswordAndConfirmationEqual(false);
+      isValidUnlockPassword = false;
+    }
+
+    setValidCreateUnlockWalletPassword(
+      unlockWalletPassword,
+      isValidUnlockPassword
+    );
+    return isValidUnlockPassword;
+  };
+
+  const [
+    arePasswordAndConfirmationEqual,
+    setArePasswordAndConfirmationEqual
+  ] = useState(true);
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isValidPassword, setIsValidPassword] = useState(true);
+
+  return (
+    <Form.Group>
+      <Form.Label className="mt-5">Unlock wallet:</Form.Label>
+      <Form.Group>
+        <Form.Control
+          type="password"
+          id="password"
+          name="password"
+          placeholder="New password (min 8 chars)"
+          value={password}
+          isInvalid={!isValidPassword}
+          onChange={event => setPassword(event.target.value)}
+          onBlur={() => checkValidUnlockWalletPassword(password)}
+        />
+        <Form.Control.Feedback type="invalid">
+          The password must have at least 8 chars.
+        </Form.Control.Feedback>
+        <Form.Control
+          type="password"
+          name="confirmPassword"
+          id="confirmPassword"
+          placeholder="Confirm password"
+          value={confirmPassword}
+          isInvalid={!arePasswordAndConfirmationEqual}
+          onChange={event => setConfirmPassword(event.target.value)}
+          onBlur={() =>
+            checkValidUnlockWalletConfirmation(password, confirmPassword)
+          }
+          className="mt-3"
+        />
+        <Form.Text>
+          This key allows you to unlock your wallet every time you start it and
+          to keep your account data in a more secure way.
+        </Form.Text>
+        <Form.Control.Feedback type="invalid">
+          password and confirmation must be the same.
+        </Form.Control.Feedback>
+      </Form.Group>
+    </Form.Group>
+  );
+}