Unlock wallet screen is added to unlock with spending password

Author: dmernies-iohk

examples/wallet/app/Routes.js

@@ -10,6 +10,7 @@ import ChooseRestoreOrImport from './containers/ChooseRestoreOrImport';
 import Delegate from './pages/Delegate';
 import Index from './containers/Index';
 import InputKeys from './containers/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

@@ -6,7 +6,8 @@ import type {
   AppState,
   Thunk,
   AccountKeys,
-  AccountState
+  AccountState,
+  SpendingPassword
 } from '../reducers/types';
 import type {
   Amount,
@@ -35,7 +36,11 @@ import { saveAccountInfoInDEN, saveSpendingPassword } from '../utils/storage';
 import routes from '../constants/routes.json';
 
 export type SetKeysAction = { type: 'SET_KEYS' } & AccountKeys;
+export type SetSpendingPasswordAction = {
+  type: 'SET_SPENDING_PASSWORD'
+} & SpendingPassword;
 export const SET_KEYS = 'SET_KEYS';
+export const SET_SPENDING_PASSWORD = 'SET_SPENDING_PASSWORD';
 
 export function setAccount(
   privateKey: string,
@@ -48,6 +53,32 @@ export function setAccount(
   };
 }
 
+export function setSpendingPassword(privateKey: string): Thunk<SetKeysAction> {
+  return function setSpendingPasswordThunk(dispatch) {
+    return getAccountFromPrivateKey(privateKey)
+      .then(loadedPrivateKey => {
+        dispatch({
+          type: SET_KEYS,
+          ...loadedPrivateKey
+        });
+        return Promise.all([
+          dispatch(updateAccountTransactions()),
+          dispatch(updateNodeSettings()),
+          dispatch(updateAccountState())
+        ])
+          .then(() => dispatch(push(routes.WALLET)))
+          .catch(error => {
+            console.log(error);
+            dispatch(push(routes.INPUT_KEYS));
+          });
+      })
+      .catch(error => {
+        // TODO: SHOW A MESSAGE SHOWING ERROR
+        console.log(error);
+      });
+  };
+}
+
 export function setAccountFromPrivateKey(
   privateKey: string
 ): Thunk<SetKeysAction> {

examples/wallet/app/actions/router.js

@@ -5,11 +5,16 @@ import type { Address } from '../models';
 import routes from '../constants/routes';
 import { setAccountFromPrivateKey } from './account';
 
-import { readAccountKeysFromDEN } from '../utils/storage';
+import {
+  isSpedingPasswordCreated,
+  readAccountKeysFromDEN
+} from '../utils/storage';
 
 // eslint-disable-next-line import/prefer-default-export
 export const redirectToFirstAppPage = () => {
   return (dispatch: Dispatch, getState: GetState) => {
+    if (isSpedingPasswordCreated()) return dispatch(push(routes.UNLOCK_WALLET));
+
     const accountKeys = readAccountKeysFromDEN('manteca');
     if (accountKeys !== undefined) {
       return dispatch(setAccountFromPrivateKey(accountKeys.privateKey));

examples/wallet/app/constants/routes.json

@@ -5,5 +5,6 @@
   "INPUT_KEYS": "/input_keys",
   "SEND": "/send",
   "STAKING": "/staking",
-  "SETTINGS": "/settings"
+  "SETTINGS": "/settings",
+  "UNLOCK_WALLET": "/unlock"
 }

examples/wallet/app/containers/UnlockWallet.js

@@ -0,0 +1,13 @@
+// @flow
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import UnlockWallet from '../pages/UnlockWallet';
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(UnlockWallet);

examples/wallet/app/pages/UnlockWallet.js

@@ -0,0 +1,54 @@
+// @flow
+import React, { useState } from 'react';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import { isValidSpendingPassword } from '../utils/storage';
+
+export default () => {
+  const handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+    if (isValidSpendingPassword(spendingPassword)) {
+      setIsWrongSpendingPassword(false);
+      setHiddenSpendingPassword(true);
+      console.log('**** OK OK OK LA CLAVES ES OK');
+      return;
+    }
+    setIsWrongSpendingPassword(true);
+    setHiddenSpendingPassword(false);
+  };
+
+  const [spendingPassword, setSpendingPassword] = useState('');
+  const [isWrongSpendingPassword, setIsWrongSpendingPassword] = useState(false);
+  const [hiddenSpendingPassword, setHiddenSpendingPassword] = useState(true);
+
+  return (
+    <Container>
+      <Form onSubmit={handleSubmit} className="mt-5">
+        <Form.Group>
+          <Form.Label>
+            Wellcome! Please insert you password to unlock wallet
+          </Form.Label>
+          <Form.Control
+            type="password"
+            id="spendingPassword"
+            name="spendingPassword"
+            placeholder="Password"
+            value={spendingPassword}
+            isInvalid={isWrongSpendingPassword}
+            onChange={event => setSpendingPassword(event.target.value)}
+          />
+          <Form.Label className="text-danger" hidden={hiddenSpendingPassword}>
+            <code>Incorrect password</code>
+          </Form.Label>
+        </Form.Group>
+        <Row className="justify-content-center">
+          <Button variant="primary" type="submit">
+            Unlock wallet
+          </Button>
+        </Row>
+      </Form>
+    </Container>
+  );
+};

examples/wallet/app/reducers/account.js

@@ -1,6 +1,7 @@
 // @flow
 import sortBy from 'lodash/sortBy';
 import {
+  SET_SPENDING_PASSWORD,
   SET_KEYS,
   SET_ACCOUNT_STATE,
   SEND_TRANSACTION,
@@ -12,6 +13,7 @@ import type {
   SendTransactionAction,
   SetAccountStateAction,
   SetTransactionsAction,
+  SetSpendingPasswordAction,
   SendStakeDelegation
 } from '../actions/account';
 import type { Account } from './types';
@@ -21,6 +23,7 @@ export default function account(
   state: Account,
   // eslint-disable-next-line flowtype/space-after-type-colon
   action:
+    | SetSpendingPasswordAction
     | SetKeysAction
     | SetAccountStateAction
     | SendTransactionAction
@@ -31,6 +34,11 @@ export default function account(
     return { transactions: [] };
   }
   switch (action.type) {
+    case SET_SPENDING_PASSWORD:
+      return Object.assign({}, state, {
+        walletId: action.walletId,
+        spendingPassword: action.spendingPassword
+      });
     case SET_KEYS:
       return Object.assign({}, state, {
         address: action.address,

examples/wallet/app/reducers/types.js

@@ -37,6 +37,11 @@ export type AccountKeys = {
   identifier: Identifier
 };
 
+export type SpendingPassword = {
+  walletId: ?string,
+  spendingPassword: ?string
+};
+
 export type AccountState = {
   balance: Balance,
   counter: Counter,