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