Vault Management UI (first round) (#4446)

* Add RPCs for parity_vault (create, open, list, etc.)

* WIP

* WIP

* WIP

* WIP (create should create)

* Create & close working

* WIP

* WIP

* WIP

* Open & Close now working

* WIP

* WIP

* Merge relevant changes from js-home

* Hover actions

* WIP (start of account assignment)

* Open, Close & Account assignment works

* Fix margins

* UI updates

* Update tests

* Add the parity_{get|set}VaultMeta calls

* Handle metadata

* Adjust padding in Open/Close modals

* moveAccounts take both in and out

* Adjust padding

* Fix stretch

* Optimize hover stretch

* pre-merge

* Cleanup variable naming (duplication)

* Rename Vault{Close,Open} -> Vault{Lock,Unlock}

* clearVaultFields uses setters

* TODO for small Portal sizes

* Vaults rendering tests

* .only

* libusb compile

* VaultCard rendering tests

* Update message keys (rename gone rouge)

* Display passwordHint op vault unlock

* Update failing tests

* Manually dispatch allAccountsInfo when move completed

* Open/Close always shows vault image in colour

* Password submit submits modal (PR comment)

* Add link to account

js/src/modals/CreateAccount/createAccount.css

@@ -19,23 +19,24 @@
   line-height: 1.618em;
 }
 
-.password {
-  flex: 0 1 50%;
-  width: 50%;
-  box-sizing: border-box;
-
-  &:nth-child(odd) {
-    padding-right: 0.25rem;
-  }
-
-  &:nth-child(even) {
-    padding-left: 0.25rem;
-  }
-}
-
+/* TODO: 2 column layout can be made generic, now duplicated in Vaults */
 .passwords {
   display: flex;
   flex-wrap: wrap;
+
+  .password {
+    box-sizing: border-box;
+    flex: 0 1 50%;
+    width: 50%;
+
+    &:nth-child(odd) {
+      padding-right: 0.25rem;
+    }
+
+    &:nth-child(even) {
+      padding-left: 0.25rem;
+    }
+  }
 }
 
 .identities, .selector {

js/src/modals/CreateAccount/errors.js

@@ -18,37 +18,44 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 export default {
+  duplicateName: (
+    <FormattedMessage
+      id='errors.duplicateName'
+      defaultMessage='the name already exists'
+    />
+  ),
+
   noFile: (
     <FormattedMessage
-      id='createAccount.error.noFile'
+      id='errors.noFile'
       defaultMessage='select a valid wallet file to import'
     />
   ),
 
   noKey: (
     <FormattedMessage
-      id='createAccount.error.noKey'
+      id='errors.noKey'
       defaultMessage='you need to provide the raw private key'
     />
   ),
 
   noMatchPassword: (
     <FormattedMessage
-      id='createAccount.error.noMatchPassword'
+      id='errors.noMatchPassword'
       defaultMessage='the supplied passwords does not match'
     />
   ),
 
   noName: (
     <FormattedMessage
-      id='createAccount.error.noName'
-      defaultMessage='you need to specify a valid name for the account'
+      id='errors.noName'
+      defaultMessage='you need to specify a valid name'
     />
   ),
 
   invalidKey: (
     <FormattedMessage
-      id='createAccount.error.invalidKey'
+      id='errors.invalidKey'
       defaultMessage='the raw key needs to be hex, 64 characters in length and contain the prefix "0x"'
     />
   )

js/src/modals/VaultAccounts/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './vaultAccounts';

js/src/modals/VaultAccounts/vaultAccounts.css

@@ -0,0 +1,48 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+/* TODO: These overlap with DappPermissions now, make DRY */
+/* (selection component or just styles?) */
+.iconDisabled {
+  opacity: 0.15;
+}
+
+.item {
+  display: flex;
+  flex: 1;
+  position: relative;
+
+  .overlay {
+    position: absolute;
+    right: 0.5em;
+    top: 0.5em;
+  }
+}
+
+.selected,
+.unselected {
+  margin-bottom: 0.25em;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.selected {
+  background: rgba(255, 255, 255, 0.15) !important;
+}

js/src/modals/VaultAccounts/vaultAccounts.js

@@ -0,0 +1,195 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { newError } from '~/redux/actions';
+import { personalAccountsInfo } from '~/redux/providers/personalActions';
+import { AccountCard, Button, Portal, SectionList } from '~/ui';
+import { CancelIcon, CheckIcon } from '~/ui/Icons';
+
+import styles from './vaultAccounts.css';
+
+@observer
+class VaultAccounts extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  };
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    newError: PropTypes.func.isRequired,
+    personalAccountsInfo: PropTypes.func.isRequired,
+    vaultStore: PropTypes.object.isRequired
+  };
+
+  render () {
+    const { accounts } = this.props;
+    const { isBusyAccounts, isModalAccountsOpen, selectedAccounts } = this.props.vaultStore;
+
+    if (!isModalAccountsOpen) {
+      return null;
+    }
+
+    const vaultAccounts = Object
+      .keys(accounts)
+      .filter((address) => accounts[address].uuid)
+      .map((address) => accounts[address]);
+
+    return (
+      <Portal
+        buttons={ [
+          <Button
+            disabled={ isBusyAccounts }
+            icon={ <CancelIcon /> }
+            key='cancel'
+            label={
+              <FormattedMessage
+                id='vaults.accounts.button.cancel'
+                defaultMessage='Cancel'
+              />
+            }
+            onClick={ this.onClose }
+          />,
+          <Button
+            disabled={ isBusyAccounts }
+            icon={ <CheckIcon /> }
+            key='execute'
+            label={
+              <FormattedMessage
+                id='vaults.accounts.button.execute'
+                defaultMessage='Set'
+              />
+            }
+            onClick={ this.onExecute }
+          />
+        ] }
+        busy={ isBusyAccounts }
+        onClose={ this.onClose }
+        open
+        title={
+          <FormattedMessage
+            id='vaults.accounts.title'
+            defaultMessage='Manage Vault Accounts'
+          />
+        }
+      >
+        <SectionList
+          items={ vaultAccounts }
+          noStretch
+          renderItem={ this.renderAccount }
+          selectedAccounts={ selectedAccounts }
+        />
+      </Portal>
+    );
+  }
+
+  // TODO: There are a lot of similarities between the dapp permissions selector
+  // (although that has defaults) and this one. A genrerix multi-select component
+  // would be applicable going forward. (Originals passed in, new selections back)
+  renderAccount = (account) => {
+    const { vaultName, selectedAccounts } = this.props.vaultStore;
+    const isInVault = account.meta.vault === vaultName;
+    const isSelected = isInVault
+      ? !selectedAccounts[account.address]
+      : selectedAccounts[account.address];
+
+    const onSelect = () => {
+      this.props.vaultStore.toggleSelectedAccount(account.address);
+    };
+
+    return (
+      <div className={ styles.item }>
+        <AccountCard
+          account={ account }
+          className={
+            isSelected
+              ? styles.selected
+              : styles.unselected
+          }
+          onClick={ onSelect }
+        />
+        <div className={ styles.overlay }>
+          {
+            isSelected
+              ? <CheckIcon onClick={ onSelect } />
+              : <CheckIcon className={ styles.iconDisabled } onClick={ onSelect } />
+          }
+        </div>
+      </div>
+    );
+  }
+
+  onClose = () => {
+    this.props.vaultStore.closeAccountsModal();
+  }
+
+  onExecute = () => {
+    const { api } = this.context;
+    const { accounts, personalAccountsInfo, vaultStore } = this.props;
+    const { vaultName, selectedAccounts } = this.props.vaultStore;
+
+    const vaultAccounts = Object
+      .keys(accounts)
+      .filter((address) => accounts[address].uuid && selectedAccounts[address])
+      .map((address) => accounts[address]);
+
+    return vaultStore
+      .moveAccounts(
+        vaultName,
+        vaultAccounts
+          .filter((account) => account.meta.vault !== vaultName)
+          .map((account) => account.address),
+        vaultAccounts
+          .filter((account) => account.meta.vault === vaultName)
+          .map((account) => account.address)
+      )
+      .catch(this.props.newError)
+      .then(() => {
+        // TODO: We manually call parity_allAccountsInfo after all the promises
+        // have been resolved. If bulk moves do become available in the future,
+        // subscriptions can transparently take care of this instead of calling
+        // and manually dispatching an update. (Using subscriptions currently
+        // means allAccountsInfo is called after each and every move call)
+        return api.parity
+          .allAccountsInfo()
+          .then(personalAccountsInfo);
+      })
+      .then(this.onClose);
+  }
+}
+
+function mapStateToProps (state) {
+  const { accounts } = state.personal;
+
+  return { accounts };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    newError,
+    personalAccountsInfo
+  }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(VaultAccounts);

js/src/modals/VaultAccounts/vaultAccounts.spec.js

@@ -0,0 +1,179 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import VaultAccounts from './';
+
+const ACCOUNT_A = '0x1234567890123456789012345678901234567890';
+const ACCOUNT_B = '0x0123456789012345678901234567890123456789';
+const ACCOUNT_C = '0x9012345678901234567890123456789012345678';
+const ACCOUNT_D = '0x8901234567890123456789012345678901234567';
+const VAULTNAME = 'testVault';
+const ACCOUNTS = {
+  [ACCOUNT_A]: {
+    address: ACCOUNT_A,
+    uuid: null
+  },
+  [ACCOUNT_B]: {
+    address: ACCOUNT_B,
+    uuid: ACCOUNT_B,
+    meta: {
+      vault: 'somethingElse'
+    }
+  },
+  [ACCOUNT_C]: {
+    address: ACCOUNT_C,
+    uuid: ACCOUNT_C,
+    meta: {
+      vault: VAULTNAME
+    }
+  },
+  [ACCOUNT_D]: {
+    address: ACCOUNT_D,
+    uuid: ACCOUNT_D,
+    meta: {
+      vault: VAULTNAME
+    }
+  }
+};
+
+let api;
+let component;
+let instance;
+let reduxStore;
+let vaultStore;
+
+function createApi () {
+  api = {
+    parity: {
+      allAccountsInfo: sinon.stub().resolves({})
+    }
+  };
+
+  return api;
+}
+
+function createReduxStore () {
+  reduxStore = {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {
+        personal: {
+          accounts: ACCOUNTS
+        }
+      };
+    }
+  };
+
+  return reduxStore;
+}
+
+function createVaultStore () {
+  vaultStore = {
+    isBusyAccounts: false,
+    isModalAccountsOpen: true,
+    selectedAccounts: { [ACCOUNT_B]: true, [ACCOUNT_C]: true },
+    vaultName: VAULTNAME,
+    closeAccountsModal: sinon.stub(),
+    moveAccounts: sinon.stub().resolves(true),
+    toggleSelectedAccount: sinon.stub()
+  };
+
+  return vaultStore;
+}
+
+function render () {
+  component = shallow(
+    <VaultAccounts vaultStore={ createVaultStore() } />,
+    {
+      context: {
+        store: createReduxStore()
+      }
+    }
+  ).find('VaultAccounts').shallow({
+    context: {
+      api: createApi()
+    }
+  });
+  instance = component.instance();
+
+  return component;
+}
+
+describe('modals/VaultAccounts', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('components', () => {
+    describe('SectionList', () => {
+      let sectionList;
+
+      beforeEach(() => {
+        sectionList = component.find('SectionList');
+      });
+
+      it('has the filtered accounts', () => {
+        expect(sectionList.props().items).to.deep.equal([
+          ACCOUNTS[ACCOUNT_B], ACCOUNTS[ACCOUNT_C], ACCOUNTS[ACCOUNT_D]
+        ]);
+      });
+
+      it('renders via renderAccount', () => {
+        expect(sectionList.props().renderItem).to.equal(instance.renderAccount);
+      });
+    });
+  });
+
+  describe('event handlers', () => {
+    describe('onClose', () => {
+      beforeEach(() => {
+        instance.onClose();
+      });
+
+      it('calls into closeAccountsModal', () => {
+        expect(vaultStore.closeAccountsModal).to.have.been.called;
+      });
+    });
+
+    describe('onExecute', () => {
+      beforeEach(() => {
+        sinon.spy(instance, 'onClose');
+        return instance.onExecute();
+      });
+
+      afterEach(() => {
+        instance.onClose.restore();
+      });
+
+      it('calls into moveAccounts', () => {
+        expect(vaultStore.moveAccounts).to.have.been.calledWith(VAULTNAME, [ACCOUNT_B], [ACCOUNT_C]);
+      });
+
+      it('closes modal', () => {
+        expect(instance.onClose).to.have.been.called;
+      });
+    });
+  });
+});

js/src/modals/VaultCreate/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './vaultCreate';

js/src/modals/VaultCreate/vaultCreate.css

@@ -0,0 +1,38 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.body {
+  /* TODO: These styles are shared with CreateAccount - DRY up */
+  .passwords {
+    display: flex;
+    flex-wrap: wrap;
+
+    .password {
+      box-sizing: border-box;
+      flex: 0 1 50%;
+      width: 50%;
+
+      &:nth-child(odd) {
+        padding-right: 0.25rem;
+      }
+
+      &:nth-child(even) {
+        padding-left: 0.25rem;
+      }
+    }
+  }
+}

js/src/modals/VaultCreate/vaultCreate.js

@@ -0,0 +1,227 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { newError } from '~/redux/actions';
+import { Button, Input, Portal } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';
+import { CheckIcon, CloseIcon } from '~/ui/Icons';
+
+import styles from './vaultCreate.css';
+
+@observer
+class VaultCreate extends Component {
+  static propTypes = {
+    newError: PropTypes.func.isRequired,
+    vaultStore: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { isBusyCreate, isModalCreateOpen, vaultDescription, vaultName, vaultNameError, vaultPassword, vaultPasswordHint, vaultPasswordRepeat, vaultPasswordRepeatError } = this.props.vaultStore;
+    const hasError = !!vaultNameError || !!vaultPasswordRepeatError;
+
+    if (!isModalCreateOpen) {
+      return null;
+    }
+
+    return (
+      <Portal
+        busy={ isBusyCreate }
+        buttons={ [
+          <Button
+            disabled={ isBusyCreate }
+            icon={ <CloseIcon /> }
+            key='close'
+            label={
+              <FormattedMessage
+                id='vaults.create.button.close'
+                defaultMessage='close'
+              />
+            }
+            onClick={ this.onClose }
+          />,
+          <Button
+            disabled={ hasError || isBusyCreate }
+            icon={ <CheckIcon /> }
+            key='vault'
+            label={
+              <FormattedMessage
+                id='vaults.create.button.vault'
+                defaultMessage='create vault'
+              />
+            }
+            onClick={ this.onCreate }
+          />
+        ] }
+        onClose={ this.onClose }
+        open
+        title={
+          <FormattedMessage
+            id='vaults.create.title'
+            defaultMessage='Create a new vault'
+          />
+        }
+      >
+        <div className={ styles.body }>
+          <Input
+            error={ vaultNameError }
+            hint={
+              <FormattedMessage
+                id='vaults.create.name.hint'
+                defaultMessage='a name for the vault'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='vaults.create.name.label'
+                defaultMessage='vault name'
+              />
+            }
+            onChange={ this.onEditName }
+            value={ vaultName }
+          />
+          <Input
+            hint={
+              <FormattedMessage
+                id='vaults.create.description.hint'
+                defaultMessage='an extended description for the vault'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='vaults.create.descriptions.label'
+                defaultMessage='(optional) description'
+              />
+            }
+            onChange={ this.onEditDescription }
+            value={ vaultDescription }
+          />
+          <Input
+            hint={
+              <FormattedMessage
+                id='vaults.create.hint.hint'
+                defaultMessage='(optional) a hint to help with remembering the password'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='vaults.create.hint.label'
+                defaultMessage='password hint'
+              />
+            }
+            onChange={ this.onEditPasswordHint }
+            value={ vaultPasswordHint }
+          />
+          <div className={ styles.passwords }>
+            <div className={ styles.password }>
+              <Input
+                hint={
+                  <FormattedMessage
+                    id='vaults.create.password.hint'
+                    defaultMessage='a strong, unique password'
+                  />
+                }
+                label={
+                  <FormattedMessage
+                    id='vaults.create.password.label'
+                    defaultMessage='password'
+                  />
+                }
+                onChange={ this.onEditPassword }
+                type='password'
+                value={ vaultPassword }
+              />
+            </div>
+            <div className={ styles.password }>
+              <Input
+                error={ vaultPasswordRepeatError }
+                hint={
+                  <FormattedMessage
+                    id='vaults.create.password2.hint'
+                    defaultMessage='verify your password'
+                  />
+                }
+                label={
+                  <FormattedMessage
+                    id='vaults.create.password2.label'
+                    defaultMessage='password (repeat)'
+                  />
+                }
+                onChange={ this.onEditPasswordRepeat }
+                type='password'
+                value={ vaultPasswordRepeat }
+              />
+            </div>
+          </div>
+          <PasswordStrength input={ vaultPassword } />
+        </div>
+      </Portal>
+    );
+  }
+
+  onEditDescription = (event, description) => {
+    this.props.vaultStore.setVaultDescription(description);
+  }
+
+  onEditName = (event, name) => {
+    this.props.vaultStore.setVaultName(name);
+  }
+
+  onEditPassword = (event, password) => {
+    this.props.vaultStore.setVaultPassword(password);
+  }
+
+  onEditPasswordHint = (event, hint) => {
+    this.props.vaultStore.setVaultPasswordHint(hint);
+  }
+
+  onEditPasswordRepeat = (event, password) => {
+    this.props.vaultStore.setVaultPasswordRepeat(password);
+  }
+
+  onCreate = () => {
+    const { vaultNameError, vaultPasswordRepeatError } = this.props.vaultStore;
+
+    if (vaultNameError || vaultPasswordRepeatError) {
+      return;
+    }
+
+    return this.props.vaultStore
+      .createVault()
+      .catch(this.props.newError)
+      .then(this.onClose);
+  }
+
+  onClose = () => {
+    this.props.vaultStore.closeCreateModal();
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    newError
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(VaultCreate);

js/src/modals/VaultCreate/vaultCreate.spec.js

@@ -0,0 +1,162 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import VaultCreate from './';
+
+let component;
+let instance;
+let reduxStore;
+let vaultStore;
+
+function vaultReduxStore () {
+  reduxStore = {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: sinon.stub()
+  };
+
+  return reduxStore;
+}
+
+function vaultVaultStore () {
+  vaultStore = {
+    isBusyCreate: false,
+    isModalCreateOpen: true,
+    vaultDescription: 'initialDesc',
+    vaultName: 'initialName',
+    vaultPassword: 'initialPassword',
+    vaultPasswordRepeat: 'initialPassword',
+    vaultPasswordHint: 'initialHint',
+    closeCreateModal: sinon.stub(),
+    createVault: sinon.stub().resolves(true),
+    setVaultDescription: sinon.stub(),
+    setVaultName: sinon.stub(),
+    setVaultPassword: sinon.stub(),
+    setVaultPasswordHint: sinon.stub(),
+    setVaultPasswordRepeat: sinon.stub()
+  };
+
+  return vaultStore;
+}
+
+function render () {
+  component = shallow(
+    <VaultCreate vaultStore={ vaultVaultStore() } />,
+    {
+      context: {
+        store: vaultReduxStore()
+      }
+    }
+  ).find('VaultCreate').shallow();
+  instance = component.instance();
+
+  return component;
+}
+
+describe('modals/VaultCreate', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('event handlers', () => {
+    describe('onClose', () => {
+      beforeEach(() => {
+        instance.onClose();
+      });
+
+      it('calls into closeCreateModal', () => {
+        expect(vaultStore.closeCreateModal).to.have.been.called;
+      });
+    });
+
+    describe('onCreate', () => {
+      beforeEach(() => {
+        sinon.spy(instance, 'onClose');
+        return instance.onCreate();
+      });
+
+      afterEach(() => {
+        instance.onClose.restore();
+      });
+
+      it('calls into createVault', () => {
+        expect(vaultStore.createVault).to.have.been.called;
+      });
+
+      it('closes modal', () => {
+        expect(instance.onClose).to.have.been.called;
+      });
+    });
+
+    describe('onEditDescription', () => {
+      beforeEach(() => {
+        instance.onEditDescription(null, 'testDescription');
+      });
+
+      it('calls setVaultDescription', () => {
+        expect(vaultStore.setVaultDescription).to.have.been.calledWith('testDescription');
+      });
+    });
+
+    describe('onEditName', () => {
+      beforeEach(() => {
+        instance.onEditName(null, 'testName');
+      });
+
+      it('calls setVaultName', () => {
+        expect(vaultStore.setVaultName).to.have.been.calledWith('testName');
+      });
+    });
+
+    describe('onEditPassword', () => {
+      beforeEach(() => {
+        instance.onEditPassword(null, 'testPassword');
+      });
+
+      it('calls setVaultPassword', () => {
+        expect(vaultStore.setVaultPassword).to.have.been.calledWith('testPassword');
+      });
+    });
+
+    describe('onEditPasswordHint', () => {
+      beforeEach(() => {
+        instance.onEditPasswordHint(null, 'testPasswordHint');
+      });
+
+      it('calls setVaultPasswordHint', () => {
+        expect(vaultStore.setVaultPasswordHint).to.have.been.calledWith('testPasswordHint');
+      });
+    });
+
+    describe('onEditPasswordRepeat', () => {
+      beforeEach(() => {
+        instance.onEditPasswordRepeat(null, 'testPassword');
+      });
+
+      it('calls setVaultPasswordRepeat', () => {
+        expect(vaultStore.setVaultPasswordRepeat).to.have.been.calledWith('testPassword');
+      });
+    });
+  });
+});

js/src/modals/VaultLock/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './vaultLock';

js/src/modals/VaultLock/vaultLock.js

@@ -0,0 +1,92 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { newError } from '~/redux/actions';
+import { ConfirmDialog, VaultCard } from '~/ui';
+
+import styles from '../VaultUnlock/vaultUnlock.css';
+
+@observer
+class VaultLock extends Component {
+  static propTypes = {
+    newError: PropTypes.func.isRequired,
+    vaultStore: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { isBusyLock, isModalLockOpen, vault } = this.props.vaultStore;
+
+    if (!isModalLockOpen) {
+      return null;
+    }
+
+    return (
+      <ConfirmDialog
+        busy={ isBusyLock }
+        disabledConfirm={ isBusyLock }
+        disabledDeny={ isBusyLock }
+        onConfirm={ this.onExecute }
+        onDeny={ this.onClose }
+        open
+        title={
+          <FormattedMessage
+            id='vaults.confirmClose.title'
+            defaultMessage='Close Vault'
+          />
+        }
+      >
+        <div className={ styles.textbox }>
+          <FormattedMessage
+            id='vaults.confirmClose.info'
+            defaultMessage="You are about to close a vault. Any accounts associated with the vault won't be visible after this operation concludes. To view the associated accounts, open the vault again."
+          />
+        </div>
+        <VaultCard.Layout
+          withBorder
+          vault={ vault }
+        />
+      </ConfirmDialog>
+    );
+  }
+
+  onExecute = () => {
+    return this.props.vaultStore
+      .closeVault()
+      .catch(this.props.newError)
+      .then(this.onClose);
+  }
+
+  onClose = () => {
+    this.props.vaultStore.closeLockModal();
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    newError
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(VaultLock);

js/src/modals/VaultLock/vaultLock.spec.js

@@ -0,0 +1,131 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import VaultLock from './';
+
+const VAULT = {
+  name: 'testVault'
+};
+
+let component;
+let instance;
+let reduxStore;
+let vaultStore;
+
+function createReduxStore () {
+  reduxStore = {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {};
+    }
+  };
+
+  return reduxStore;
+}
+
+function createVaultStore () {
+  vaultStore = {
+    isBusyLock: false,
+    isModalLockOpen: true,
+    vault: VAULT,
+    vaultName: VAULT.name,
+    vaults: [VAULT],
+    closeLockModal: sinon.stub(),
+    closeVault: sinon.stub().resolves(true)
+  };
+
+  return vaultStore;
+}
+
+function render () {
+  component = shallow(
+    <VaultLock vaultStore={ createVaultStore() } />,
+    {
+      context: {
+        store: createReduxStore()
+      }
+    }
+  ).find('VaultLock').shallow();
+  instance = component.instance();
+
+  return component;
+}
+
+describe('modals/VaultLock', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('ConfirmDialog', () => {
+    let dialog;
+
+    beforeEach(() => {
+      dialog = component.find('ConfirmDialog');
+    });
+
+    it('renders the dialog', () => {
+      expect(dialog.get(0)).to.be.ok;
+    });
+
+    it('passes onConfirm as onExecute', () => {
+      expect(dialog.props().onConfirm).to.equal(instance.onExecute);
+    });
+
+    it('passes onDeny as onClose', () => {
+      expect(dialog.props().onDeny).to.equal(instance.onClose);
+    });
+  });
+
+  describe('event methods', () => {
+    describe('onExecute', () => {
+      beforeEach(() => {
+        sinon.stub(instance, 'onClose');
+        return instance.onExecute();
+      });
+
+      afterEach(() => {
+        instance.onClose.restore();
+      });
+
+      it('closes the modal', () => {
+        expect(instance.onClose).to.have.been.called;
+      });
+
+      it('calls into vaultStore.closeVault', () => {
+        expect(vaultStore.closeVault).to.have.been.called;
+      });
+    });
+
+    describe('onClose', () => {
+      beforeEach(() => {
+        instance.onClose();
+      });
+
+      it('calls into closeLockModal', () => {
+        expect(vaultStore.closeLockModal).to.have.been.called;
+      });
+    });
+  });
+});

js/src/modals/VaultUnlock/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './vaultUnlock';

js/src/modals/VaultUnlock/vaultUnlock.css

@@ -0,0 +1,27 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.passwordHint {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.75em;
+  text-align: left;
+}
+
+.textbox {
+  line-height: 1.5em;
+  margin-bottom: 1.5em;
+}

js/src/modals/VaultUnlock/vaultUnlock.js

@@ -0,0 +1,118 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { newError } from '~/redux/actions';
+import { ConfirmDialog, Input, VaultCard } from '~/ui';
+
+import styles from './vaultUnlock.css';
+
+@observer
+class VaultUnlock extends Component {
+  static propTypes = {
+    newError: PropTypes.func.isRequired,
+    vaultStore: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { isBusyUnlock, isModalUnlockOpen, vault, vaultPassword } = this.props.vaultStore;
+
+    if (!isModalUnlockOpen) {
+      return null;
+    }
+
+    return (
+      <ConfirmDialog
+        busy={ isBusyUnlock }
+        disabledConfirm={ isBusyUnlock }
+        disabledDeny={ isBusyUnlock }
+        onConfirm={ this.onExecute }
+        onDeny={ this.onClose }
+        open
+        title={
+          <FormattedMessage
+            id='vaults.confirmOpen.title'
+            defaultMessage='Open Vault'
+          />
+        }
+      >
+        <div className={ styles.textbox }>
+          <FormattedMessage
+            id='vaults.confirmOpen.info'
+            defaultMessage='You are about to open a vault. After confirming your password, all accounts associated with this vault will be visible. Closing the vault will remove the accounts from view until the vault is opened again.'
+          />
+        </div>
+        <VaultCard.Layout
+          withBorder
+          vault={ vault }
+        />
+        <Input
+          hint={
+            <FormattedMessage
+              id='vaults.confirmOpen.password.hint'
+              defaultMessage='the password specified when creating the vault'
+            />
+          }
+          label={
+            <FormattedMessage
+              id='vaults.confirmOpen.password.label'
+              defaultMessage='vault password'
+            />
+          }
+          onChange={ this.onEditPassword }
+          onSubmit={ this.onExecute }
+          type='password'
+          value={ vaultPassword }
+        />
+        <div className={ styles.passwordHint }>
+          { vault.meta.passwordHint }
+        </div>
+        <br />
+      </ConfirmDialog>
+    );
+  }
+
+  onEditPassword = (event, password) => {
+    this.props.vaultStore.setVaultPassword(password);
+  }
+
+  onClose = () => {
+    this.props.vaultStore.closeUnlockModal();
+  }
+
+  onExecute = () => {
+    return this.props.vaultStore
+      .openVault()
+      .catch(this.props.newError)
+      .then(this.onClose);
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    newError
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(VaultUnlock);

js/src/modals/VaultUnlock/vaultUnlock.spec.js

@@ -0,0 +1,146 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import VaultUnlock from './';
+
+const VAULT = {
+  name: 'testVault',
+  meta: {
+    passwordHint: 'some hint'
+  }
+};
+
+let component;
+let instance;
+let reduxStore;
+let vaultStore;
+
+function createReduxStore () {
+  reduxStore = {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {};
+    }
+  };
+
+  return reduxStore;
+}
+
+function createVaultStore () {
+  vaultStore = {
+    isBusyUnlock: false,
+    isModalUnlockOpen: true,
+    vault: VAULT,
+    vaultName: VAULT.name,
+    vaultPassword: 'testPassword',
+    vaults: [VAULT],
+    closeUnlockModal: sinon.stub(),
+    openVault: sinon.stub().resolves(true),
+    setVaultPassword: sinon.stub()
+  };
+
+  return vaultStore;
+}
+
+function render () {
+  component = shallow(
+    <VaultUnlock vaultStore={ createVaultStore() } />,
+    {
+      context: {
+        store: createReduxStore()
+      }
+    }
+  ).find('VaultUnlock').shallow();
+  instance = component.instance();
+
+  return component;
+}
+
+describe('modals/VaultUnlock', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('ConfirmDialog', () => {
+    let dialog;
+
+    beforeEach(() => {
+      dialog = component.find('ConfirmDialog');
+    });
+
+    it('renders the dialog', () => {
+      expect(dialog.get(0)).to.be.ok;
+    });
+
+    it('passes onConfirm as onExecute', () => {
+      expect(dialog.props().onConfirm).to.equal(instance.onExecute);
+    });
+
+    it('passes onDeny as onClose', () => {
+      expect(dialog.props().onDeny).to.equal(instance.onClose);
+    });
+  });
+
+  describe('event methods', () => {
+    describe('onExecute', () => {
+      beforeEach(() => {
+        sinon.stub(instance, 'onClose');
+        return instance.onExecute();
+      });
+
+      afterEach(() => {
+        instance.onClose.restore();
+      });
+
+      it('closes the modal', () => {
+        expect(instance.onClose).to.have.been.called;
+      });
+
+      it('calls into vaultStore.openVault', () => {
+        expect(vaultStore.openVault).to.have.been.called;
+      });
+    });
+
+    describe('onClose', () => {
+      beforeEach(() => {
+        instance.onClose();
+      });
+
+      it('calls into closeUnlockModal', () => {
+        expect(vaultStore.closeUnlockModal).to.have.been.called;
+      });
+    });
+
+    describe('onEditPassword', () => {
+      beforeEach(() => {
+        instance.onEditPassword(null, 'someVaultPassword');
+      });
+
+      it('calls into vaultStore.setVaultPassword', () => {
+        expect(vaultStore.setVaultPassword).to.have.been.calledWith('someVaultPassword');
+      });
+    });
+  });
+});

js/src/modals/index.js

@@ -14,44 +14,26 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import AddAddress from './AddAddress';
-import AddContract from './AddContract';
-import CreateAccount from './CreateAccount';
-import CreateWallet from './CreateWallet';
-import DappPermissions from './DappPermissions';
-import DappsVisible from './AddDapps';
-import DeleteAccount from './DeleteAccount';
-import DeployContract from './DeployContract';
-import EditMeta from './EditMeta';
-import ExecuteContract from './ExecuteContract';
-import FirstRun from './FirstRun';
-import LoadContract from './LoadContract';
-import SaveContract from './SaveContract';
-import Shapeshift from './Shapeshift';
-import Verification from './Verification';
-import Transfer from './Transfer';
-import PasswordManager from './PasswordManager';
-import UpgradeParity from './UpgradeParity';
-import WalletSettings from './WalletSettings';
-
-export {
-  AddAddress,
-  AddContract,
-  CreateAccount,
-  CreateWallet,
-  DappPermissions,
-  DappsVisible,
-  DeleteAccount,
-  DeployContract,
-  EditMeta,
-  ExecuteContract,
-  FirstRun,
-  LoadContract,
-  SaveContract,
-  Shapeshift,
-  Verification,
-  Transfer,
-  PasswordManager,
-  UpgradeParity,
-  WalletSettings
-};
+export AddAddress from './AddAddress';
+export AddContract from './AddContract';
+export CreateAccount from './CreateAccount';
+export CreateWallet from './CreateWallet';
+export DappPermissions from './DappPermissions';
+export DappsVisible from './AddDapps';
+export DeleteAccount from './DeleteAccount';
+export DeployContract from './DeployContract';
+export EditMeta from './EditMeta';
+export ExecuteContract from './ExecuteContract';
+export FirstRun from './FirstRun';
+export LoadContract from './LoadContract';
+export PasswordManager from './PasswordManager';
+export SaveContract from './SaveContract';
+export Shapeshift from './Shapeshift';
+export Transfer from './Transfer';
+export UpgradeParity from './UpgradeParity';
+export VaultAccounts from './VaultAccounts';
+export VaultCreate from './VaultCreate';
+export VaultLock from './VaultLock';
+export VaultUnlock from './VaultUnlock';
+export Verification from './Verification';
+export WalletSettings from './WalletSettings';