From 3a482ef27f31dfa4aab32a5cd9348566981a3b8f Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 22 Feb 2017 09:50:11 +0100
Subject: [PATCH 01/23] Add VaultMeta edit dialog

---
 js/src/modals/VaultMeta/index.js          |  17 +++
 js/src/modals/VaultMeta/vaultMeta.js      | 151 ++++++++++++++++++++++
 js/src/modals/VaultMeta/vaultMeta.spec.js | 126 ++++++++++++++++++
 js/src/modals/index.js                    |   1 +
 js/src/views/Vaults/store.js              |  53 +++++++-
 js/src/views/Vaults/store.spec.js         |  85 +++++++++++-
 js/src/views/Vaults/vaults.js             |  32 ++++-
 js/src/views/Vaults/vaults.spec.js        |  16 +++
 8 files changed, 475 insertions(+), 6 deletions(-)
 create mode 100644 js/src/modals/VaultMeta/index.js
 create mode 100644 js/src/modals/VaultMeta/vaultMeta.js
 create mode 100644 js/src/modals/VaultMeta/vaultMeta.spec.js

diff --git a/js/src/modals/VaultMeta/index.js b/js/src/modals/VaultMeta/index.js
new file mode 100644
index 00000000000..685c54ef33d
--- /dev/null
+++ b/js/src/modals/VaultMeta/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 './vaultMeta';
diff --git a/js/src/modals/VaultMeta/vaultMeta.js b/js/src/modals/VaultMeta/vaultMeta.js
new file mode 100644
index 00000000000..3cc82671334
--- /dev/null
+++ b/js/src/modals/VaultMeta/vaultMeta.js
@@ -0,0 +1,151 @@
+// 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, InputChip, Form, Portal, VaultCard } from '~/ui';
+import { CheckIcon, CloseIcon } from '~/ui/Icons';
+
+@observer
+class VaultMeta extends Component {
+  static propTypes = {
+    newError: PropTypes.func.isRequired,
+    vaultStore: PropTypes.object.isRequired
+  };
+
+  render () {
+    const { isBusyMeta, isModalMetaOpen, vault, vaultDescription, vaultTags } = this.props.vaultStore;
+
+    if (!isModalMetaOpen) {
+      return null;
+    }
+
+    return (
+      <Portal
+        busy={ isBusyMeta }
+        buttons={ [
+          <Button
+            disabled={ isBusyMeta }
+            icon={ <CloseIcon /> }
+            key='close'
+            label={
+              <FormattedMessage
+                id='vaults.editMeta.button.close'
+                defaultMessage='close'
+              />
+            }
+            onClick={ this.onClose }
+          />,
+          <Button
+            disabled={ isBusyMeta }
+            icon={ <CheckIcon /> }
+            key='vault'
+            label={
+              <FormattedMessage
+                id='vaults.editMeta.button.save'
+                defaultMessage='save'
+              />
+            }
+            onClick={ this.onCreate }
+          />
+        ] }
+        onClose={ this.onClose }
+        open
+        title={
+          <FormattedMessage
+            id='vaults.editMeta.title'
+            defaultMessage='Edit Vault Metadata'
+          />
+        }
+      >
+        <VaultCard.Layout
+          withBorder
+          vault={ vault }
+        />
+        <Form>
+          <Input
+            hint={
+              <FormattedMessage
+                id='vaults.editMeta.description.hint'
+                defaultMessage='the description for this vault'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='vaults.editMeta.description.label'
+                defaultMessage='vault description'
+              />
+            }
+            onChange={ this.onChangeDescription }
+            value={ vaultDescription }
+          />
+          <InputChip
+            addOnBlur
+            hint={
+              <FormattedMessage
+                id='vaults.editMeta.tags.hint'
+                defaultMessage='press <Enter> to add a tag'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='vaults.editMeta.tags.label'
+                defaultMessage='(optional) tags'
+              />
+            }
+            onTokensChange={ this.onChangeTags }
+            tokens={ vaultTags.slice() }
+          />
+        </Form>
+      </Portal>
+    );
+  }
+
+  onChangeDescription = (event, description) => {
+    this.props.vaultStore.setVaultDescription(description);
+  }
+
+  onChangeTags = (tags) => {
+    this.props.vaultStore.setVaultTags(tags);
+  }
+
+  onExecute = () => {
+    return this.props.vaultStore
+      .editVault()
+      .catch(this.props.newError)
+      .then(this.onClose);
+  }
+
+  onClose = () => {
+    this.props.vaultStore.closeMetaModal();
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    newError
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(VaultMeta);
diff --git a/js/src/modals/VaultMeta/vaultMeta.spec.js b/js/src/modals/VaultMeta/vaultMeta.spec.js
new file mode 100644
index 00000000000..b8c85a32cb5
--- /dev/null
+++ b/js/src/modals/VaultMeta/vaultMeta.spec.js
@@ -0,0 +1,126 @@
+// 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 VaultMeta 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 = {
+    isBusyMeta: false,
+    isModalMetaOpen: true,
+    vault: VAULT,
+    vaultDescription: '',
+    vaultTags: [],
+    vaultName: VAULT.name,
+    vaults: [VAULT],
+    closeMetaModal: sinon.stub(),
+    editVault: sinon.stub().resolves(true),
+    setVaultDescription: sinon.stub(),
+    setVaultTags: sinon.stub()
+  };
+
+  return vaultStore;
+}
+
+function render (props = {}) {
+  component = shallow(
+    <VaultMeta vaultStore={ createVaultStore() } />,
+    {
+      context: {
+        store: createReduxStore()
+      }
+    }
+  ).find('VaultMeta').shallow();
+  instance = component.instance();
+
+  return component;
+}
+
+describe('modals/VaultMeta', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('event methods', () => {
+    describe('onChangeDescription', () => {
+      beforeEach(() => {
+        instance.onChangeDescription(null, 'testing');
+      });
+
+      it('calls into setVaultDescription', () => {
+        expect(vaultStore.setVaultDescription).to.have.been.calledWith('testing');
+      });
+    });
+
+    describe('onChangeTags', () => {
+      beforeEach(() => {
+        instance.onChangeTags('testing');
+      });
+
+      it('calls into setVaultTags', () => {
+        expect(vaultStore.setVaultTags).to.have.been.calledWith('testing');
+      });
+    });
+
+    describe('onClose', () => {
+      beforeEach(() => {
+        instance.onClose();
+      });
+
+      it('calls into closeMetaModal', () => {
+        expect(vaultStore.closeMetaModal).to.have.been.called;
+      });
+    });
+
+    describe('onExecute', () => {
+      beforeEach(() => {
+        return instance.onExecute();
+      });
+
+      it('calls into editVault', () => {
+        expect(vaultStore.editVault).to.have.been.called;
+      });
+    });
+  });
+});
diff --git a/js/src/modals/index.js b/js/src/modals/index.js
index 0e760d501da..83e80d8da3f 100644
--- a/js/src/modals/index.js
+++ b/js/src/modals/index.js
@@ -34,6 +34,7 @@ export UpgradeParity from './UpgradeParity';
 export VaultAccounts from './VaultAccounts';
 export VaultCreate from './VaultCreate';
 export VaultLock from './VaultLock';
+export VaultMeta from './VaultMeta';
 export VaultUnlock from './VaultUnlock';
 export Verification from './Verification';
 export WalletSettings from './WalletSettings';
diff --git a/js/src/views/Vaults/store.js b/js/src/views/Vaults/store.js
index db2d1c7055c..f7350f85082 100644
--- a/js/src/views/Vaults/store.js
+++ b/js/src/views/Vaults/store.js
@@ -27,10 +27,12 @@ export default class Store {
   @observable isBusyCreate = false;
   @observable isBusyLoad = false;
   @observable isBusyLock = false;
+  @observable isBusyMeta = false;
   @observable isBusyUnlock = false;
   @observable isModalAccountsOpen = false;
   @observable isModalCreateOpen = false;
   @observable isModalLockOpen = false;
+  @observable isModalMetaOpen = false;
   @observable isModalUnlockOpen = false;
   @observable selectedAccounts = {};
   @observable vault = null;
@@ -42,6 +44,7 @@ export default class Store {
   @observable vaultPassword = '';
   @observable vaultPasswordHint = '';
   @observable vaultPasswordRepeat = '';
+  @observable vaultTags = [];
 
   constructor (api) {
     this._api = api;
@@ -60,6 +63,7 @@ export default class Store {
       this.setVaultPassword('');
       this.setVaultPasswordHint('');
       this.setVaultPasswordRepeat('');
+      this.setVaultTags([]);
     });
   }
 
@@ -79,6 +83,10 @@ export default class Store {
     this.isBusyLock = isBusy;
   }
 
+  @action setBusyMeta = (isBusy) => {
+    this.isBusyMeta = isBusy;
+  }
+
   @action setBusyUnlock = (isBusy) => {
     this.isBusyUnlock = isBusy;
   }
@@ -104,6 +112,13 @@ export default class Store {
     });
   }
 
+  @action setModalMetaOpen = (isOpen) => {
+    transaction(() => {
+      this.setBusyMeta(false);
+      this.isModalMetaOpen = isOpen;
+    });
+  }
+
   @action setModalUnlockOpen = (isOpen) => {
     transaction(() => {
       this.setBusyUnlock(false);
@@ -165,6 +180,10 @@ export default class Store {
     this.vaultPasswordRepeat = password;
   }
 
+  @action setVaultTags = (tags) => {
+    this.vaultTags = tags;
+  }
+
   @action toggleSelectedAccount = (address) => {
     this.setSelectedAccounts(Object.assign({}, this.selectedAccounts, {
       [address]: !this.selectedAccounts[address] })
@@ -183,6 +202,10 @@ export default class Store {
     this.setModalLockOpen(false);
   }
 
+  closeMetaModal () {
+    this.setModalMetaOpen(false);
+  }
+
   closeUnlockModal () {
     this.setModalUnlockOpen(false);
   }
@@ -209,6 +232,13 @@ export default class Store {
     });
   }
 
+  openMetaModal (name) {
+    transaction(() => {
+      this.setVaultName(name);
+      this.setModalMetaOpen(true);
+    });
+  }
+
   openUnlockModal (name) {
     transaction(() => {
       this.setVaultName(name);
@@ -268,7 +298,8 @@ export default class Store {
       .then(() => {
         return this._api.parity.setVaultMeta(this.vaultName, {
           description: this.vaultDescription,
-          passwordHint: this.vaultPasswordHint
+          passwordHint: this.vaultPasswordHint,
+          tags: this.vaultTags
         });
       })
       .then(this.loadVaults)
@@ -282,6 +313,26 @@ export default class Store {
       });
   }
 
+  editVault () {
+    this.setBusyMeta(true);
+
+    return this._api.parity
+      .setVaultMeta(this.vaultName, {
+        description: this.vaultDescription,
+        passwordHint: this.vaultPasswordHint,
+        tags: this.vaultTags
+      })
+      .then(this.loadVaults)
+      .then(() => {
+        this.setBusyMeta(false);
+      })
+      .catch((error) => {
+        console.error('editVault', error);
+        this.setBusyMeta(false);
+        throw error;
+      });
+  }
+
   openVault () {
     this.setBusyUnlock(true);
 
diff --git a/js/src/views/Vaults/store.spec.js b/js/src/views/Vaults/store.spec.js
index 53c22877622..fe60da095ce 100644
--- a/js/src/views/Vaults/store.spec.js
+++ b/js/src/views/Vaults/store.spec.js
@@ -44,6 +44,7 @@ describe('modals/Vaults/Store', () => {
         store.setVaultPassword('blah');
         store.setVaultPasswordRepeat('bleh');
         store.setVaultPasswordHint('hint');
+        store.setVaultTags('tags');
 
         store.clearVaultFields();
       });
@@ -55,6 +56,7 @@ describe('modals/Vaults/Store', () => {
         expect(store.vaultPassword).to.equal('');
         expect(store.vaultPasswordRepeat).to.equal('');
         expect(store.vaultPasswordHint).to.equal('');
+        expect(store.vaultTags.length).to.equal(0);
       });
     });
 
@@ -90,6 +92,14 @@ describe('modals/Vaults/Store', () => {
       });
     });
 
+    describe('setBusyMeta', () => {
+      it('sets the flag', () => {
+        store.setBusyMeta('busy');
+
+        expect(store.isBusyMeta).to.equal('busy');
+      });
+    });
+
     describe('setBusyUnlock', () => {
       it('sets the flag', () => {
         store.setBusyUnlock('busy');
@@ -122,6 +132,14 @@ describe('modals/Vaults/Store', () => {
       });
     });
 
+    describe('setModalMetaOpen', () => {
+      it('sets the flag', () => {
+        store.setModalMetaOpen('opened');
+
+        expect(store.isModalMetaOpen).to.equal('opened');
+      });
+    });
+
     describe('setModalUnlockOpen', () => {
       beforeEach(() => {
         store.setVaultPassword('testing');
@@ -233,6 +251,14 @@ describe('modals/Vaults/Store', () => {
       });
     });
 
+    describe('setVaultTags', () => {
+      it('sets the tags', () => {
+        store.setVaultTags('test');
+
+        expect(store.vaultTags).to.equal('test');
+      });
+    });
+
     describe('toggleSelectedAccount', () => {
       beforeEach(() => {
         store.toggleSelectedAccount('123');
@@ -301,6 +327,17 @@ describe('modals/Vaults/Store', () => {
       });
     });
 
+    describe('closeMetaModal', () => {
+      beforeEach(() => {
+        store.setModalMetaOpen(true);
+        store.closeMetaModal();
+      });
+
+      it('sets the opened state to false', () => {
+        expect(store.isModalMetaOpen).to.be.false;
+      });
+    });
+
     describe('closeUnlockModal', () => {
       beforeEach(() => {
         store.setModalUnlockOpen(true);
@@ -364,6 +401,20 @@ describe('modals/Vaults/Store', () => {
       });
     });
 
+    describe('openMetaModal', () => {
+      beforeEach(() => {
+        store.openMetaModal('testing');
+      });
+
+      it('sets the opened state to true', () => {
+        expect(store.isModalMetaOpen).to.be.true;
+      });
+
+      it('stores the name', () => {
+        expect(store.vaultName).to.equal('testing');
+      });
+    });
+
     describe('openUnlockModal', () => {
       beforeEach(() => {
         store.openUnlockModal('testing');
@@ -443,6 +494,7 @@ describe('modals/Vaults/Store', () => {
         store.setVaultPassword('testCreatePassword');
         store.setVaultPasswordRepeat('testCreatePassword');
         store.setVaultPasswordHint('testCreateHint');
+        store.setVaultTags('testTags');
 
         return store.createVault();
       });
@@ -463,7 +515,38 @@ describe('modals/Vaults/Store', () => {
       it('calls into parity_setVaultMeta', () => {
         expect(api.parity.setVaultMeta).to.have.been.calledWith('testCreateName', {
           description: 'testDescription',
-          passwordHint: 'testCreateHint'
+          passwordHint: 'testCreateHint',
+          tags: 'testTags'
+        });
+      });
+    });
+
+    describe('editVault', () => {
+      beforeEach(() => {
+        sinon.spy(store, 'setBusyMeta');
+
+        store.setVaultDescription('testDescription');
+        store.setVaultName('testCreateName');
+        store.setVaultPasswordHint('testCreateHint');
+        store.setVaultTags('testTags');
+
+        return store.editVault();
+      });
+
+      afterEach(() => {
+        store.setBusyMeta.restore();
+      });
+
+      it('sets and resets the busy flag', () => {
+        expect(store.setBusyMeta).to.have.been.calledWith(true);
+        expect(store.isBusyMeta).to.be.false;
+      });
+
+      it('calls into parity_setVaultMeta', () => {
+        expect(api.parity.setVaultMeta).to.have.been.calledWith('testCreateName', {
+          description: 'testDescription',
+          passwordHint: 'testCreateHint',
+          tags: 'testTags'
         });
       });
     });
diff --git a/js/src/views/Vaults/vaults.js b/js/src/views/Vaults/vaults.js
index 314f990e27c..79870e56631 100644
--- a/js/src/views/Vaults/vaults.js
+++ b/js/src/views/Vaults/vaults.js
@@ -19,9 +19,9 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { VaultAccounts, VaultCreate, VaultLock, VaultUnlock } from '~/modals';
+import { VaultAccounts, VaultCreate, VaultLock, VaultMeta, VaultUnlock } from '~/modals';
 import { Button, Container, Page, SectionList, VaultCard } from '~/ui';
-import { AccountsIcon, AddIcon, LockedIcon, UnlockedIcon } from '~/ui/Icons';
+import { AccountsIcon, AddIcon, EditIcon, LockedIcon, UnlockedIcon } from '~/ui/Icons';
 
 import Store from './store';
 import styles from './vaults.css';
@@ -70,6 +70,7 @@ class Vaults extends Component {
         <VaultAccounts vaultStore={ this.vaultStore } />
         <VaultCreate vaultStore={ this.vaultStore } />
         <VaultLock vaultStore={ this.vaultStore } />
+        <VaultMeta vaultStore={ this.vaultStore } />
         <VaultUnlock vaultStore={ this.vaultStore } />
         { this.renderList() }
       </Page>
@@ -109,6 +110,10 @@ class Vaults extends Component {
       this.onOpenAccounts(name);
       return false;
     };
+    const onClickEdit = () => {
+      this.onOpenEdit(name);
+      return false;
+    };
     const onClickOpen = () => {
       isOpen
         ? this.onOpenLockVault(name)
@@ -133,13 +138,24 @@ class Vaults extends Component {
                 }
                 onClick={ onClickAccounts }
               />,
+              <Button
+                icon={ <EditIcon /> }
+                key='edit'
+                label={
+                  <FormattedMessage
+                    id='vaults.button.edit'
+                    defaultMessage='edit'
+                  />
+                }
+                onClick={ onClickEdit }
+              />,
               <Button
                 icon={ <LockedIcon /> }
                 key='close'
                 label={
                   <FormattedMessage
                     id='vaults.button.close'
-                    defaultMessage='close vault'
+                    defaultMessage='close'
                   />
                 }
                 onClick={ onClickOpen }
@@ -152,7 +168,7 @@ class Vaults extends Component {
                 label={
                   <FormattedMessage
                     id='vaults.button.open'
-                    defaultMessage='open vault'
+                    defaultMessage='open'
                   />
                 }
                 onClick={ onClickOpen }
@@ -172,10 +188,18 @@ class Vaults extends Component {
     this.vaultStore.openCreateModal();
   }
 
+  onOpenEdit = (name) => {
+    this.vaultStore.openMetaModal(name);
+  }
+
   onOpenLockVault = (name) => {
     this.vaultStore.openLockModal(name);
   }
 
+  onOpenMeta = (name) => {
+    this.vaultStore.openMetaModal(name);
+  }
+
   onOpenUnlockVault = (name) => {
     this.vaultStore.openUnlockModal(name);
   }
diff --git a/js/src/views/Vaults/vaults.spec.js b/js/src/views/Vaults/vaults.spec.js
index 9098f31f9bb..d053ea6364a 100644
--- a/js/src/views/Vaults/vaults.spec.js
+++ b/js/src/views/Vaults/vaults.spec.js
@@ -150,6 +150,22 @@ describe('modals/Vaults', () => {
       });
     });
 
+    describe('onOpenEdit', () => {
+      beforeEach(() => {
+        sinon.spy(instance.vaultStore, 'openMetaModal');
+
+        instance.onOpenEdit('testing');
+      });
+
+      afterEach(() => {
+        instance.vaultStore.openMetaModal.restore();
+      });
+
+      it('calls into vaultStore.openMetaModal', () => {
+        expect(instance.vaultStore.openMetaModal).to.have.been.calledWith('testing');
+      });
+    });
+
     describe('onOpenLockVault', () => {
       beforeEach(() => {
         sinon.spy(instance.vaultStore, 'openLockModal');

From 955f1f8404006b169b2af55cd3fd41a4d7a0a1c2 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 22 Feb 2017 10:25:55 +0100
Subject: [PATCH 02/23] Updated (WIP)

---
 js/src/modals/VaultMeta/vaultMeta.css | 19 +++++++
 js/src/modals/VaultMeta/vaultMeta.js  | 80 +++++++++++++--------------
 js/src/ui/VaultCard/Layout/layout.js  |  4 +-
 js/src/ui/VaultCard/vaultCard.js      | 13 +++--
 js/src/views/Vaults/store.js          |  9 +++
 5 files changed, 80 insertions(+), 45 deletions(-)
 create mode 100644 js/src/modals/VaultMeta/vaultMeta.css

diff --git a/js/src/modals/VaultMeta/vaultMeta.css b/js/src/modals/VaultMeta/vaultMeta.css
new file mode 100644
index 00000000000..705a5a8b25f
--- /dev/null
+++ b/js/src/modals/VaultMeta/vaultMeta.css
@@ -0,0 +1,19 @@
+/* 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/>.
+*/
+
+.meta {
+}
diff --git a/js/src/modals/VaultMeta/vaultMeta.js b/js/src/modals/VaultMeta/vaultMeta.js
index 3cc82671334..98def40da74 100644
--- a/js/src/modals/VaultMeta/vaultMeta.js
+++ b/js/src/modals/VaultMeta/vaultMeta.js
@@ -21,9 +21,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '~/redux/actions';
-import { Button, Input, InputChip, Form, Portal, VaultCard } from '~/ui';
+import { Button, Input, InputChip, Portal, VaultCard } from '~/ui';
 import { CheckIcon, CloseIcon } from '~/ui/Icons';
 
+import styles from './vaultMeta.css';
+
 @observer
 class VaultMeta extends Component {
   static propTypes = {
@@ -76,45 +78,43 @@ class VaultMeta extends Component {
           />
         }
       >
-        <VaultCard.Layout
-          withBorder
-          vault={ vault }
-        />
-        <Form>
-          <Input
-            hint={
-              <FormattedMessage
-                id='vaults.editMeta.description.hint'
-                defaultMessage='the description for this vault'
-              />
-            }
-            label={
-              <FormattedMessage
-                id='vaults.editMeta.description.label'
-                defaultMessage='vault description'
-              />
-            }
-            onChange={ this.onChangeDescription }
-            value={ vaultDescription }
-          />
-          <InputChip
-            addOnBlur
-            hint={
-              <FormattedMessage
-                id='vaults.editMeta.tags.hint'
-                defaultMessage='press <Enter> to add a tag'
-              />
-            }
-            label={
-              <FormattedMessage
-                id='vaults.editMeta.tags.label'
-                defaultMessage='(optional) tags'
-              />
-            }
-            onTokensChange={ this.onChangeTags }
-            tokens={ vaultTags.slice() }
-          />
-        </Form>
+        <VaultCard.Layout vault={ vault }>
+          <div className={ styles.meta }>
+            <Input
+              hint={
+                <FormattedMessage
+                  id='vaults.editMeta.description.hint'
+                  defaultMessage='the description for this vault'
+                />
+              }
+              label={
+                <FormattedMessage
+                  id='vaults.editMeta.description.label'
+                  defaultMessage='vault description'
+                />
+              }
+              onChange={ this.onChangeDescription }
+              value={ vaultDescription }
+            />
+            <InputChip
+              addOnBlur
+              hint={
+                <FormattedMessage
+                  id='vaults.editMeta.tags.hint'
+                  defaultMessage='press <Enter> to add a tag'
+                />
+              }
+              label={
+                <FormattedMessage
+                  id='vaults.editMeta.tags.label'
+                  defaultMessage='(optional) tags'
+                />
+              }
+              onTokensChange={ this.onChangeTags }
+              tokens={ vaultTags.slice() }
+            />
+          </div>
+        </VaultCard.Layout>
       </Portal>
     );
   }
diff --git a/js/src/ui/VaultCard/Layout/layout.js b/js/src/ui/VaultCard/Layout/layout.js
index f525abe5a30..8ef79579112 100644
--- a/js/src/ui/VaultCard/Layout/layout.js
+++ b/js/src/ui/VaultCard/Layout/layout.js
@@ -23,12 +23,13 @@ import styles from './layout.css';
 
 export default class Layout extends Component {
   static propTypes = {
+    children: PropTypes.node,
     vault: PropTypes.object.isRequired,
     withBorder: PropTypes.bool
   };
 
   render () {
-    const { vault, withBorder } = this.props;
+    const { children, vault, withBorder } = this.props;
     const { isOpen, meta, name } = vault;
 
     return (
@@ -59,6 +60,7 @@ export default class Layout extends Component {
             byline={ meta.description }
             title={ name }
           />
+          { children }
         </div>
       </div>
     );
diff --git a/js/src/ui/VaultCard/vaultCard.js b/js/src/ui/VaultCard/vaultCard.js
index 5d04b98805d..1d2131c283f 100644
--- a/js/src/ui/VaultCard/vaultCard.js
+++ b/js/src/ui/VaultCard/vaultCard.js
@@ -30,13 +30,14 @@ export default class VaultCard extends Component {
   static propTypes = {
     accounts: PropTypes.array,
     buttons: PropTypes.array,
+    children: PropTypes.node,
     vault: PropTypes.object.isRequired
   };
 
   static Layout = Layout;
 
   render () {
-    const { buttons, vault } = this.props;
+    const { buttons, children, vault } = this.props;
     const { isOpen } = vault;
 
     return (
@@ -61,7 +62,9 @@ export default class VaultCard extends Component {
           />
           { buttons }
         </div>
-        <Layout vault={ vault } />
+        <Layout vault={ vault }>
+          { children }
+        </Layout>
       </Container>
     );
   }
@@ -85,12 +88,14 @@ export default class VaultCard extends Component {
         {
           accounts.map((address) => {
             return (
-              <Link to={ `/accounts/${address}` }>
+              <Link
+                key={ address }
+                to={ `/accounts/${address}` }
+              >
                 <IdentityIcon
                   address={ address }
                   center
                   className={ styles.account }
-                  key={ address }
                 />
               </Link>
             );
diff --git a/js/src/views/Vaults/store.js b/js/src/views/Vaults/store.js
index f7350f85082..f206753d30b 100644
--- a/js/src/views/Vaults/store.js
+++ b/js/src/views/Vaults/store.js
@@ -235,6 +235,15 @@ export default class Store {
   openMetaModal (name) {
     transaction(() => {
       this.setVaultName(name);
+
+      if (this.vault && this.vault.meta) {
+        this.setVaultDescription(this.vault.meta.description);
+        this.setVaultPasswordHint(this.vault.meta.passwordHint);
+      } else {
+        this.setVaultDescription('');
+        this.setVaultPasswordHint('');
+      }
+
       this.setModalMetaOpen(true);
     });
   }

From 1f9a98baf067742e6f7dcaac39fc261467ae18e2 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 22 Feb 2017 12:26:08 +0100
Subject: [PATCH 03/23] Meta & password edit completed

---
 js/src/modals/VaultCreate/vaultCreate.css |  36 +++--
 js/src/modals/VaultCreate/vaultCreate.js  |   2 +-
 js/src/modals/VaultMeta/vaultMeta.css     |  19 ---
 js/src/modals/VaultMeta/vaultMeta.js      | 175 +++++++++++++++++++---
 js/src/modals/VaultMeta/vaultMeta.spec.js |  59 +++++++-
 js/src/views/Vaults/store.js              |  36 ++++-
 js/src/views/Vaults/store.spec.js         |  35 ++++-
 js/src/views/Vaults/vaults.test.js        |   3 +-
 8 files changed, 297 insertions(+), 68 deletions(-)
 delete mode 100644 js/src/modals/VaultMeta/vaultMeta.css

diff --git a/js/src/modals/VaultCreate/vaultCreate.css b/js/src/modals/VaultCreate/vaultCreate.css
index fcd2e26a3aa..125d262173c 100644
--- a/js/src/modals/VaultCreate/vaultCreate.css
+++ b/js/src/modals/VaultCreate/vaultCreate.css
@@ -15,24 +15,30 @@
 /* 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;
+/* 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%;
+  .password {
+    box-sizing: border-box;
+    flex: 0 1 50%;
+    width: 50%;
 
-      &:nth-child(odd) {
-        padding-right: 0.25rem;
-      }
+    &:nth-child(odd) {
+      padding-right: 0.25rem;
+    }
 
-      &:nth-child(even) {
-        padding-left: 0.25rem;
-      }
+    &:nth-child(even) {
+      padding-left: 0.25rem;
     }
   }
 }
+
+.disabled {
+  opacity: 0.25;
+}
+
+.group+.group {
+  margin-top: 1em;
+}
diff --git a/js/src/modals/VaultCreate/vaultCreate.js b/js/src/modals/VaultCreate/vaultCreate.js
index ba27e1a9c44..c472b28d0fd 100644
--- a/js/src/modals/VaultCreate/vaultCreate.js
+++ b/js/src/modals/VaultCreate/vaultCreate.js
@@ -80,7 +80,7 @@ class VaultCreate extends Component {
           />
         }
       >
-        <div className={ styles.body }>
+        <div>
           <Input
             error={ vaultNameError }
             hint={
diff --git a/js/src/modals/VaultMeta/vaultMeta.css b/js/src/modals/VaultMeta/vaultMeta.css
deleted file mode 100644
index 705a5a8b25f..00000000000
--- a/js/src/modals/VaultMeta/vaultMeta.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/* 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/>.
-*/
-
-.meta {
-}
diff --git a/js/src/modals/VaultMeta/vaultMeta.js b/js/src/modals/VaultMeta/vaultMeta.js
index 98def40da74..66c052404b8 100644
--- a/js/src/modals/VaultMeta/vaultMeta.js
+++ b/js/src/modals/VaultMeta/vaultMeta.js
@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { Checkbox } from 'material-ui';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -21,10 +22,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '~/redux/actions';
-import { Button, Input, InputChip, Portal, VaultCard } from '~/ui';
+import { Button, Input, Portal, VaultCard } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';
 import { CheckIcon, CloseIcon } from '~/ui/Icons';
 
-import styles from './vaultMeta.css';
+import styles from '../VaultCreate/vaultCreate.css';
 
 @observer
 class VaultMeta extends Component {
@@ -33,8 +35,13 @@ class VaultMeta extends Component {
     vaultStore: PropTypes.object.isRequired
   };
 
+  state = {
+    passwordEdit: false
+  };
+
   render () {
-    const { isBusyMeta, isModalMetaOpen, vault, vaultDescription, vaultTags } = this.props.vaultStore;
+    const { isBusyMeta, isModalMetaOpen, vault, vaultDescription, vaultPassword, vaultPasswordRepeat, vaultPasswordRepeatError, vaultPasswordOld, vaultPasswordHint } = this.props.vaultStore;
+    const { passwordEdit } = this.state;
 
     if (!isModalMetaOpen) {
       return null;
@@ -66,7 +73,7 @@ class VaultMeta extends Component {
                 defaultMessage='save'
               />
             }
-            onClick={ this.onCreate }
+            onClick={ this.onExecute }
           />
         ] }
         onClose={ this.onClose }
@@ -79,7 +86,7 @@ class VaultMeta extends Component {
         }
       >
         <VaultCard.Layout vault={ vault }>
-          <div className={ styles.meta }>
+          <div className={ styles.group }>
             <Input
               hint={
                 <FormattedMessage
@@ -93,48 +100,180 @@ class VaultMeta extends Component {
                   defaultMessage='vault description'
                 />
               }
-              onChange={ this.onChangeDescription }
+              onChange={ this.onEditDescription }
               value={ vaultDescription }
             />
-            <InputChip
-              addOnBlur
+            <Input
               hint={
                 <FormattedMessage
-                  id='vaults.editMeta.tags.hint'
-                  defaultMessage='press <Enter> to add a tag'
+                  id='vaults.editMeta.passwordHint.hint'
+                  defaultMessage='your password hint for this vault'
                 />
               }
               label={
                 <FormattedMessage
-                  id='vaults.editMeta.tags.label'
-                  defaultMessage='(optional) tags'
+                  id='vaults.editMeta.passwordHint.label'
+                  defaultMessage='password hint'
                 />
               }
-              onTokensChange={ this.onChangeTags }
-              tokens={ vaultTags.slice() }
+              onChange={ this.onEditPasswordHint }
+              value={ vaultPasswordHint }
             />
           </div>
+          <div className={ styles.group }>
+            <Checkbox
+              label={
+                <FormattedMessage
+                  id='vaults.editMeta.allowPassword'
+                  defaultMessage='Change vault password'
+                />
+              }
+              checked={ passwordEdit }
+              onCheck={ this.onTogglePassword }
+            />
+            <div className={ [styles.passwords, passwordEdit ? null : styles.disabled].join(' ') }>
+              <div className={ styles.password }>
+                <Input
+                  disabled={ !passwordEdit }
+                  hint={
+                    <FormattedMessage
+                      id='vaults.editMeta.currentPassword.hint'
+                      defaultMessage='your current vault password'
+                    />
+                  }
+                  label={
+                    <FormattedMessage
+                      id='vaults.editMeta.currentPassword.label'
+                      defaultMessage='current password'
+                    />
+                  }
+                  onChange={ this.onEditPasswordCurrent }
+                  type='password'
+                  value={ vaultPasswordOld }
+                />
+              </div>
+            </div>
+            <div className={ [styles.passwords, passwordEdit ? null : styles.disabled].join(' ') }>
+              <div className={ styles.password }>
+                <Input
+                  disabled={ !passwordEdit }
+                  hint={
+                    <FormattedMessage
+                      id='vaults.editMeta.password.hint'
+                      defaultMessage='a strong, unique password'
+                    />
+                  }
+                  label={
+                    <FormattedMessage
+                      id='vaults.editMeta.password.label'
+                      defaultMessage='new password'
+                    />
+                  }
+                  onChange={ this.onEditPassword }
+                  type='password'
+                  value={ vaultPassword }
+                />
+              </div>
+              <div className={ styles.password }>
+                <Input
+                  disabled={ !passwordEdit }
+                  error={ vaultPasswordRepeatError }
+                  hint={
+                    <FormattedMessage
+                      id='vaults.editMeta.password2.hint'
+                      defaultMessage='verify your new password'
+                    />
+                  }
+                  label={
+                    <FormattedMessage
+                      id='vaults.editMeta.password2.label'
+                      defaultMessage='new password (repeat)'
+                    />
+                  }
+                  onChange={ this.onEditPasswordRepeat }
+                  type='password'
+                  value={ vaultPasswordRepeat }
+                />
+              </div>
+            </div>
+            <div className={ passwordEdit ? null : styles.disabled }>
+              <PasswordStrength input={ vaultPassword } />
+            </div>
+          </div>
         </VaultCard.Layout>
       </Portal>
     );
+
+    // <InputChip
+    //   addOnBlur
+    //   hint={
+    //     <FormattedMessage
+    //       id='vaults.editMeta.tags.hint'
+    //       defaultMessage='press <Enter> to add a tag'
+    //     />
+    //   }
+    //   label={
+    //     <FormattedMessage
+    //       id='vaults.editMeta.tags.label'
+    //       defaultMessage='(optional) tags'
+    //     />
+    //   }
+    //   onTokensChange={ this.onEditTags }
+    //   tokens={ vaultTags.slice() }
+    // />
   }
 
-  onChangeDescription = (event, description) => {
+  onEditDescription = (event, description) => {
     this.props.vaultStore.setVaultDescription(description);
   }
 
-  onChangeTags = (tags) => {
+  onEditPasswordCurrent = (event, password) => {
+    this.props.vaultStore.setVaultPasswordOld(password);
+  }
+
+  onEditPassword = (event, password) => {
+    this.props.vaultStore.setVaultPassword(password);
+  }
+
+  onEditPasswordHint = (event, hint) => {
+    this.props.vaultStore.setVaultPasswordHint(hint);
+  }
+
+  onEditPasswordRepeat = (event, password) => {
+    this.props.vaultStore.setVaultPasswordRepeat(password);
+  }
+
+  onEditTags = (tags) => {
     this.props.vaultStore.setVaultTags(tags);
   }
 
+  onTogglePassword = () => {
+    this.setState({
+      passwordEdit: !this.state.passwordEdit
+    });
+  }
+
   onExecute = () => {
-    return this.props.vaultStore
-      .editVault()
+    const { passwordEdit } = this.state;
+
+    return Promise
+      .all([
+        passwordEdit
+          ? this.props.vaultStore.editVaultPassword()
+          : true
+      ])
+      .then(() => {
+        return this.props.vaultStore.editVaultMeta();
+      })
       .catch(this.props.newError)
       .then(this.onClose);
   }
 
   onClose = () => {
+    this.setState({
+      passwordEdit: false
+    });
+
     this.props.vaultStore.closeMetaModal();
   }
 }
diff --git a/js/src/modals/VaultMeta/vaultMeta.spec.js b/js/src/modals/VaultMeta/vaultMeta.spec.js
index b8c85a32cb5..c616c8e6aa0 100644
--- a/js/src/modals/VaultMeta/vaultMeta.spec.js
+++ b/js/src/modals/VaultMeta/vaultMeta.spec.js
@@ -51,8 +51,13 @@ function createVaultStore () {
     vaultName: VAULT.name,
     vaults: [VAULT],
     closeMetaModal: sinon.stub(),
-    editVault: sinon.stub().resolves(true),
+    editVaultMeta: sinon.stub().resolves(true),
+    editVaultPassword: sinon.stub().resolves(true),
     setVaultDescription: sinon.stub(),
+    setVaultPassword: sinon.stub(),
+    setVaultPasswordRepeat: sinon.stub(),
+    setVaultPasswordHint: sinon.stub(),
+    setVaultPasswordOld: sinon.stub(),
     setVaultTags: sinon.stub()
   };
 
@@ -83,9 +88,9 @@ describe('modals/VaultMeta', () => {
   });
 
   describe('event methods', () => {
-    describe('onChangeDescription', () => {
+    describe('onEditDescription', () => {
       beforeEach(() => {
-        instance.onChangeDescription(null, 'testing');
+        instance.onEditDescription(null, 'testing');
       });
 
       it('calls into setVaultDescription', () => {
@@ -93,9 +98,49 @@ describe('modals/VaultMeta', () => {
       });
     });
 
-    describe('onChangeTags', () => {
+    describe('onEditPassword', () => {
       beforeEach(() => {
-        instance.onChangeTags('testing');
+        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('onEditPasswordCurrent', () => {
+      beforeEach(() => {
+        instance.onEditPasswordCurrent(null, 'testPasswordOld');
+      });
+
+      it('calls setVaultPasswordHint', () => {
+        expect(vaultStore.setVaultPasswordOld).to.have.been.calledWith('testPasswordOld');
+      });
+    });
+
+    describe('onEditPasswordRepeat', () => {
+      beforeEach(() => {
+        instance.onEditPasswordRepeat(null, 'testPassword');
+      });
+
+      it('calls setVaultPasswordRepeat', () => {
+        expect(vaultStore.setVaultPasswordRepeat).to.have.been.calledWith('testPassword');
+      });
+    });
+
+    describe('onEditTags', () => {
+      beforeEach(() => {
+        instance.onEditTags('testing');
       });
 
       it('calls into setVaultTags', () => {
@@ -118,8 +163,8 @@ describe('modals/VaultMeta', () => {
         return instance.onExecute();
       });
 
-      it('calls into editVault', () => {
-        expect(vaultStore.editVault).to.have.been.called;
+      it('calls into editVaultMeta', () => {
+        expect(vaultStore.editVaultMeta).to.have.been.called;
       });
     });
   });
diff --git a/js/src/views/Vaults/store.js b/js/src/views/Vaults/store.js
index f206753d30b..acebf07d240 100644
--- a/js/src/views/Vaults/store.js
+++ b/js/src/views/Vaults/store.js
@@ -43,6 +43,7 @@ export default class Store {
   @observable vaultDescription = '';
   @observable vaultPassword = '';
   @observable vaultPasswordHint = '';
+  @observable vaultPasswordOld = '';
   @observable vaultPasswordRepeat = '';
   @observable vaultTags = [];
 
@@ -62,6 +63,7 @@ export default class Store {
       this.setVaultDescription('');
       this.setVaultPassword('');
       this.setVaultPasswordHint('');
+      this.setVaultPasswordOld('');
       this.setVaultPasswordRepeat('');
       this.setVaultTags([]);
     });
@@ -176,6 +178,10 @@ export default class Store {
     this.vaultPasswordHint = hint;
   }
 
+  @action setVaultPasswordOld = (password) => {
+    this.vaultPasswordOld = password;
+  }
+
   @action setVaultPasswordRepeat = (password) => {
     this.vaultPasswordRepeat = password;
   }
@@ -234,14 +240,12 @@ export default class Store {
 
   openMetaModal (name) {
     transaction(() => {
+      this.clearVaultFields();
       this.setVaultName(name);
 
       if (this.vault && this.vault.meta) {
         this.setVaultDescription(this.vault.meta.description);
         this.setVaultPasswordHint(this.vault.meta.passwordHint);
-      } else {
-        this.setVaultDescription('');
-        this.setVaultPasswordHint('');
       }
 
       this.setModalMetaOpen(true);
@@ -322,7 +326,7 @@ export default class Store {
       });
   }
 
-  editVault () {
+  editVaultMeta () {
     this.setBusyMeta(true);
 
     return this._api.parity
@@ -336,12 +340,34 @@ export default class Store {
         this.setBusyMeta(false);
       })
       .catch((error) => {
-        console.error('editVault', error);
+        console.error('editVaultMeta', error);
         this.setBusyMeta(false);
         throw error;
       });
   }
 
+  editVaultPassword () {
+    this.setBusyMeta(true);
+
+    return this._api.parity
+      .closeVault(this.vaultName)
+      .then(() => {
+        return this._api.parity.openVault(this.vaultName, this.vaultPasswordOld);
+      })
+      .then(() => {
+        return this._api.parity.changeVaultPassword(this.vaultName, this.vaultPassword);
+      })
+      .then(() => {
+        this.setBusyMeta(false);
+      })
+      .catch((error) => {
+        console.error('editVaultPassword', error);
+        this.loadVaults();
+        this.setBusyMeta(false);
+        throw new Error('Unable to change the vault password');
+      });
+  }
+
   openVault () {
     this.setBusyUnlock(true);
 
diff --git a/js/src/views/Vaults/store.spec.js b/js/src/views/Vaults/store.spec.js
index fe60da095ce..3aab128602d 100644
--- a/js/src/views/Vaults/store.spec.js
+++ b/js/src/views/Vaults/store.spec.js
@@ -44,6 +44,7 @@ describe('modals/Vaults/Store', () => {
         store.setVaultPassword('blah');
         store.setVaultPasswordRepeat('bleh');
         store.setVaultPasswordHint('hint');
+        store.setVaultPasswordOld('old');
         store.setVaultTags('tags');
 
         store.clearVaultFields();
@@ -56,6 +57,7 @@ describe('modals/Vaults/Store', () => {
         expect(store.vaultPassword).to.equal('');
         expect(store.vaultPasswordRepeat).to.equal('');
         expect(store.vaultPasswordHint).to.equal('');
+        expect(store.vaultPasswordOld).to.equal('');
         expect(store.vaultTags.length).to.equal(0);
       });
     });
@@ -521,7 +523,7 @@ describe('modals/Vaults/Store', () => {
       });
     });
 
-    describe('editVault', () => {
+    describe('editVaultMeta', () => {
       beforeEach(() => {
         sinon.spy(store, 'setBusyMeta');
 
@@ -530,7 +532,7 @@ describe('modals/Vaults/Store', () => {
         store.setVaultPasswordHint('testCreateHint');
         store.setVaultTags('testTags');
 
-        return store.editVault();
+        return store.editVaultMeta();
       });
 
       afterEach(() => {
@@ -551,6 +553,35 @@ describe('modals/Vaults/Store', () => {
       });
     });
 
+    describe('editVaultPassword', () => {
+      beforeEach(() => {
+        sinon.spy(store, 'setBusyMeta');
+
+        store.setVaultName('testName');
+        store.setVaultPasswordOld('oldPassword');
+        store.setVaultPassword('newPassword');
+
+        return store.editVaultPassword();
+      });
+
+      afterEach(() => {
+        store.setBusyMeta.restore();
+      });
+
+      it('sets and resets the busy flag', () => {
+        expect(store.setBusyMeta).to.have.been.calledWith(true);
+        expect(store.isBusyMeta).to.be.false;
+      });
+
+      it('calls into parity_openVault', () => {
+        expect(api.parity.openVault).to.have.been.calledWith('testName', 'oldPassword');
+      });
+
+      it('calls into parity_changeVaultPassword', () => {
+        expect(api.parity.changeVaultPassword).to.have.been.calledWith('testName', 'newPassword');
+      });
+    });
+
     describe('openVault', () => {
       beforeEach(() => {
         sinon.spy(store, 'setBusyUnlock');
diff --git a/js/src/views/Vaults/vaults.test.js b/js/src/views/Vaults/vaults.test.js
index 6138733bd76..47cae8f844d 100644
--- a/js/src/views/Vaults/vaults.test.js
+++ b/js/src/views/Vaults/vaults.test.js
@@ -63,7 +63,8 @@ export function createApi () {
       getVaultMeta: sinon.stub().resolves(TEST_VAULTS_META),
       newVault: sinon.stub().resolves(true),
       openVault: sinon.stub().resolves(true),
-      setVaultMeta: sinon.stub().resolves(true)
+      setVaultMeta: sinon.stub().resolves(true),
+      changeVaultPassword: sinon.stub().resolves(true)
     }
   };
 }

From d20f23f3a5e054dc0e66cc7b6517843203c23e28 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 22 Feb 2017 14:45:33 +0100
Subject: [PATCH 04/23] Added SelectionList component for selections

---
 js/src/ui/SelectionList/index.js         | 17 +++++
 js/src/ui/SelectionList/selectionList.js | 91 ++++++++++++++++++++++++
 js/src/ui/index.js                       |  1 +
 3 files changed, 109 insertions(+)
 create mode 100644 js/src/ui/SelectionList/index.js
 create mode 100644 js/src/ui/SelectionList/selectionList.js

diff --git a/js/src/ui/SelectionList/index.js b/js/src/ui/SelectionList/index.js
new file mode 100644
index 00000000000..bd762aef032
--- /dev/null
+++ b/js/src/ui/SelectionList/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 './selectionList';
diff --git a/js/src/ui/SelectionList/selectionList.js b/js/src/ui/SelectionList/selectionList.js
new file mode 100644
index 00000000000..5a215a2df99
--- /dev/null
+++ b/js/src/ui/SelectionList/selectionList.js
@@ -0,0 +1,91 @@
+// 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 React, { Component, PropTypes } from 'react';
+
+import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
+import SectionList from '~/ui/SectionList';
+import { arrayOrObjectProptype } from '~/util/proptypes';
+
+import styles from './selectionList.css';
+
+export default class SelectionList extends Component {
+  static propTypes = {
+    items: arrayOrObjectProptype().isRequired,
+    noStretch: PropTypes.bool,
+    onDefaultClick: PropTypes.func,
+    onSelectClick: PropTypes.func.isRequired,
+    renderItem: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { items, noStretch } = this.props;
+
+    return (
+      <div className={ styles.container }>
+        <SectionList
+          items={ items }
+          noStretch={ noStretch }
+          renderItem={ this.renderItem }
+        />
+      </div>
+    );
+  }
+
+  renderItem = (item, index) => {
+    const { onDefaultClick, onSelectClick, renderItem } = this.props;
+
+    const makeDefault = () => {
+      onDefaultClick(item);
+      return false;
+    };
+    const selectItem = () => {
+      onSelectClick(item);
+      return false;
+    };
+
+    let defaultIcon = null;
+
+    if (onDefaultClick) {
+      defaultIcon = item.checked && item.default
+        ? <StarIcon />
+        : <StarOutlineIcon className={ styles.iconDisabled } onClick={ makeDefault } />;
+    }
+
+    const classes = item.checked
+      ? [styles.item, styles.selected]
+      : [styles.item, styles.unselected];
+
+    return (
+      <div className={ classes.join(' ') }>
+        <div
+          className={ styles.content }
+          onClick={ selectItem }
+        >
+          { renderItem(item, index) }
+        </div>
+        <div className={ styles.overlay }>
+          { defaultIcon }
+          {
+            item.checked
+              ? <CheckIcon onClick={ selectItem } />
+              : <CheckIcon className={ styles.iconDisabled } onClick={ selectItem } />
+          }
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
index 5693cf05307..7bc80d72d75 100644
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@@ -46,6 +46,7 @@ export ParityBackground from './ParityBackground';
 export Portal from './Portal';
 export QrCode from './QrCode';
 export SectionList from './SectionList';
+export SelectionList from './SelectionList';
 export ShortenedHash from './ShortenedHash';
 export SignerIcon from './SignerIcon';
 export Tags from './Tags';

From c7e3491d79691ec41548e81a9a951b4aa4cf7621 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 22 Feb 2017 14:45:51 +0100
Subject: [PATCH 05/23] Use SelectionList in DappPermisions

---
 .../DappPermissions/dappPermissions.css       | 45 ------------
 .../modals/DappPermissions/dappPermissions.js | 72 +++++++------------
 js/src/ui/AccountCard/accountCard.css         |  1 -
 js/src/ui/AccountCard/accountCard.js          |  8 ++-
 .../ui/Form/AddressSelect/addressSelect.css   |  4 ++
 js/src/ui/Form/AddressSelect/addressSelect.js |  1 +
 js/src/ui/SelectionList/selectionList.css     | 55 ++++++++++++++
 7 files changed, 90 insertions(+), 96 deletions(-)
 create mode 100644 js/src/ui/SelectionList/selectionList.css

diff --git a/js/src/modals/DappPermissions/dappPermissions.css b/js/src/modals/DappPermissions/dappPermissions.css
index 3f2559bb387..44d9015722a 100644
--- a/js/src/modals/DappPermissions/dappPermissions.css
+++ b/js/src/modals/DappPermissions/dappPermissions.css
@@ -15,51 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.container {
-  overflow-y: auto;
-}
-
-.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;
-  }
-}
-
-.unselected {
-  background: rgba(0, 0, 0, 0.4) !important;
-}
-
-.selected {
-  background: rgba(255, 255, 255, 0.15) !important;
-
-  &.default {
-    background: rgba(255, 255, 255, 0.35) !important;
-  }
-}
-
-.unselected {
-}
-
-.iconDisabled {
-  opacity: 0.15;
-}
-
 .legend {
   opacity: 0.75;
 
diff --git a/js/src/modals/DappPermissions/dappPermissions.js b/js/src/modals/DappPermissions/dappPermissions.js
index 410dcf4b70e..adb96c38b66 100644
--- a/js/src/modals/DappPermissions/dappPermissions.js
+++ b/js/src/modals/DappPermissions/dappPermissions.js
@@ -19,8 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { AccountCard, Portal, SectionList } from '~/ui';
-import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
+import { AccountCard, Portal, SelectionList } from '~/ui';
+import { CheckIcon, StarIcon } from '~/ui/Icons';
 
 import styles from './dappPermissions.css';
 
@@ -61,60 +61,36 @@ class DappPermissions extends Component {
           />
         }
       >
-        <div className={ styles.container }>
-          <SectionList
-            items={ permissionStore.accounts }
-            noStretch
-            renderItem={ this.renderAccount }
-          />
-        </div>
+        <SelectionList
+          items={ permissionStore.accounts }
+          noStretch
+          onDefaultClick={ this.onMakeDefault }
+          onSelectClick={ this.onSelect }
+          renderItem={ this.renderAccount }
+        />
       </Portal>
     );
   }
 
-  renderAccount = (account) => {
-    const { balances, permissionStore } = this.props;
-    const balance = balances[account.address];
-
-    const onMakeDefault = () => {
-      permissionStore.setDefaultAccount(account.address);
-    };
-
-    const onSelect = () => {
-      permissionStore.selectAccount(account.address);
-    };
+  onMakeDefault = (account) => {
+    console.log('onMakeDefault', account);
+    this.props.permissionStore.setDefaultAccount(account.address);
+  }
 
-    let className;
+  onSelect = (account) => {
+    console.log('onSelect', account);
+    this.props.permissionStore.selectAccount(account.address);
+  }
 
-    if (account.checked) {
-      className = account.default
-        ? `${styles.selected} ${styles.default}`
-        : styles.selected;
-    } else {
-      className = styles.unselected;
-    }
+  renderAccount = (account) => {
+    const { balances } = this.props;
+    const balance = balances[account.address];
 
     return (
-      <div className={ styles.item }>
-        <AccountCard
-          account={ account }
-          balance={ balance }
-          className={ className }
-          onClick={ onSelect }
-        />
-        <div className={ styles.overlay }>
-          {
-            account.checked && account.default
-              ? <StarIcon />
-              : <StarOutlineIcon className={ styles.iconDisabled } onClick={ onMakeDefault } />
-          }
-          {
-            account.checked
-              ? <CheckIcon onClick={ onSelect } />
-              : <CheckIcon className={ styles.iconDisabled } onClick={ onSelect } />
-          }
-        </div>
-      </div>
+      <AccountCard
+        account={ account }
+        balance={ balance }
+      />
     );
   }
 }
diff --git a/js/src/ui/AccountCard/accountCard.css b/js/src/ui/AccountCard/accountCard.css
index ae382374c62..8610a22da0f 100644
--- a/js/src/ui/AccountCard/accountCard.css
+++ b/js/src/ui/AccountCard/accountCard.css
@@ -20,7 +20,6 @@
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   flex-direction: row;
-  margin: 0.5em 0;
   overflow: hidden;
   transition: transform ease-out 0.1s;
   transform: scale(1);
diff --git a/js/src/ui/AccountCard/accountCard.js b/js/src/ui/AccountCard/accountCard.js
index 9167f38e6b5..6a6ebb22c4c 100644
--- a/js/src/ui/AccountCard/accountCard.js
+++ b/js/src/ui/AccountCard/accountCard.js
@@ -39,7 +39,7 @@ export default class AccountCard extends Component {
   };
 
   render () {
-    const { account, balance, className } = this.props;
+    const { account, balance, className, onFocus } = this.props;
     const { copied } = this.state;
     const { address, description, meta = {}, name } = account;
     const { tags = [] } = meta;
@@ -49,14 +49,18 @@ export default class AccountCard extends Component {
       classes.push(styles.copied);
     }
 
+    const props = onFocus
+      ? { tabIndex: 0 }
+      : {};
+
     return (
       <div
         key={ address }
-        tabIndex={ 0 }
         className={ classes.join(' ') }
         onClick={ this.onClick }
         onFocus={ this.onFocus }
         onKeyDown={ this.handleKeyDown }
+        { ...props }
       >
         <div className={ styles.mainContainer }>
           <div className={ styles.infoContainer }>
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.css b/js/src/ui/Form/AddressSelect/addressSelect.css
index 839c025b54c..84afbd15a99 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.css
+++ b/js/src/ui/Form/AddressSelect/addressSelect.css
@@ -146,4 +146,8 @@
 
     margin: 1em 0;
   }
+
+  .account {
+    margin: 0.5em 0;
+  }
 }
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index 2f47484b2ca..07c133d7c2f 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -346,6 +346,7 @@ class AddressSelect extends Component {
       <AccountCard
         account={ account }
         balance={ balance }
+        className={ styles.account }
         key={ `account_${index}` }
         onClick={ this.handleClick }
         onFocus={ this.focusItem }
diff --git a/js/src/ui/SelectionList/selectionList.css b/js/src/ui/SelectionList/selectionList.css
new file mode 100644
index 00000000000..abc7d35c53d
--- /dev/null
+++ b/js/src/ui/SelectionList/selectionList.css
@@ -0,0 +1,55 @@
+/* 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/>.
+*/
+
+.item {
+  display: flex;
+  flex: 1;
+  position: relative;
+
+  .content {
+    height: 100%;
+    width: 100%;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .overlay {
+    position: absolute;
+    right: 0.5em;
+    top: 0.5em;
+  }
+}
+
+.selected,
+.unselected {
+  width: 100%;
+}
+
+.selected {
+  filter: none;
+}
+
+.unselected {
+  filter: grayscale(100%);
+  opacity: 0.5;
+}
+
+.iconDisabled {
+  opacity: 0.15;
+}

From 1e27a10a791ec07abba067ff5c81c800abaf4bcb Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 22 Feb 2017 15:09:18 +0100
Subject: [PATCH 06/23] AddDapps uses SelectionList

---
 js/src/modals/AddDapps/addDapps.css      | 23 -------------
 js/src/modals/AddDapps/addDapps.js       | 44 +++++++++++-------------
 js/src/ui/SelectionList/selectionList.js | 12 ++++---
 3 files changed, 29 insertions(+), 50 deletions(-)

diff --git a/js/src/modals/AddDapps/addDapps.css b/js/src/modals/AddDapps/addDapps.css
index 1bca5b33641..c987a874df0 100644
--- a/js/src/modals/AddDapps/addDapps.css
+++ b/js/src/modals/AddDapps/addDapps.css
@@ -49,26 +49,3 @@
     opacity: 0.75;
   }
 }
-
-.selectIcon {
-  position: absolute;
-  right: 0.5em;
-  top: 0.5em;
-}
-
-.selected,
-.unselected {
-  position: relative;
-}
-
-.unselected {
-  background: rgba(0, 0, 0, 0.4) !important;
-
-  .selectIcon {
-    opacity: 0.15;
-  }
-}
-
-.selected {
-  background: rgba(255, 255, 255, 0.15) !important;
-}
diff --git a/js/src/modals/AddDapps/addDapps.js b/js/src/modals/AddDapps/addDapps.js
index 9b1fcc76008..fe8882342f2 100644
--- a/js/src/modals/AddDapps/addDapps.js
+++ b/js/src/modals/AddDapps/addDapps.js
@@ -18,8 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { DappCard, Portal, SectionList } from '~/ui';
-import { CheckIcon } from '~/ui/Icons';
+import { DappCard, Portal, SelectionList } from '~/ui';
 
 import styles from './addDapps.css';
 
@@ -102,9 +101,11 @@ export default class AddDapps extends Component {
           <div className={ styles.header }>{ header }</div>
           <div className={ styles.byline }>{ byline }</div>
         </div>
-        <SectionList
+        <SelectionList
+          isChecked={ this.isVisible }
           items={ items }
           noStretch
+          onSelectClick={ this.onSelect }
           renderItem={ this.renderApp }
         />
       </div>
@@ -112,30 +113,27 @@ export default class AddDapps extends Component {
   }
 
   renderApp = (app) => {
-    const { store } = this.props;
-    const isVisible = store.displayApps[app.id].visible;
-
-    const onClick = () => {
-      if (isVisible) {
-        store.hideApp(app.id);
-      } else {
-        store.showApp(app.id);
-      }
-    };
-
     return (
       <DappCard
         app={ app }
-        className={
-          isVisible
-            ? styles.selected
-            : styles.unselected
-        }
         key={ app.id }
-        onClick={ onClick }
-      >
-        <CheckIcon className={ styles.selectIcon } />
-      </DappCard>
+      />
     );
   }
+
+  isVisible = (app) => {
+    const { store } = this.props;
+
+    return store.displayApps[app.id].visible;
+  }
+
+  onSelect = (app) => {
+    const { store } = this.props;
+
+    if (this.isVisible(app)) {
+      store.hideApp(app.id);
+    } else {
+      store.showApp(app.id);
+    }
+  }
 }
diff --git a/js/src/ui/SelectionList/selectionList.js b/js/src/ui/SelectionList/selectionList.js
index 5a215a2df99..49d71ad689f 100644
--- a/js/src/ui/SelectionList/selectionList.js
+++ b/js/src/ui/SelectionList/selectionList.js
@@ -24,6 +24,7 @@ import styles from './selectionList.css';
 
 export default class SelectionList extends Component {
   static propTypes = {
+    isChecked: PropTypes.func,
     items: arrayOrObjectProptype().isRequired,
     noStretch: PropTypes.bool,
     onDefaultClick: PropTypes.func,
@@ -46,7 +47,10 @@ export default class SelectionList extends Component {
   }
 
   renderItem = (item, index) => {
-    const { onDefaultClick, onSelectClick, renderItem } = this.props;
+    const { isChecked, onDefaultClick, onSelectClick, renderItem } = this.props;
+    const isSelected = isChecked
+      ? isChecked(item)
+      : item.checked;
 
     const makeDefault = () => {
       onDefaultClick(item);
@@ -60,12 +64,12 @@ export default class SelectionList extends Component {
     let defaultIcon = null;
 
     if (onDefaultClick) {
-      defaultIcon = item.checked && item.default
+      defaultIcon = isSelected && item.default
         ? <StarIcon />
         : <StarOutlineIcon className={ styles.iconDisabled } onClick={ makeDefault } />;
     }
 
-    const classes = item.checked
+    const classes = isSelected
       ? [styles.item, styles.selected]
       : [styles.item, styles.unselected];
 
@@ -80,7 +84,7 @@ export default class SelectionList extends Component {
         <div className={ styles.overlay }>
           { defaultIcon }
           {
-            item.checked
+            isSelected
               ? <CheckIcon onClick={ selectItem } />
               : <CheckIcon className={ styles.iconDisabled } onClick={ selectItem } />
           }

From a5abb28428659f44fdcb671360a5b0afc6fade3e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 22 Feb 2017 15:13:11 +0100
Subject: [PATCH 07/23] Fix AccountCard to consistent height

---
 js/src/ui/AccountCard/accountCard.css     | 1 +
 js/src/ui/SelectionList/selectionList.css | 7 ++-----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/js/src/ui/AccountCard/accountCard.css b/js/src/ui/AccountCard/accountCard.css
index 8610a22da0f..44012cab031 100644
--- a/js/src/ui/AccountCard/accountCard.css
+++ b/js/src/ui/AccountCard/accountCard.css
@@ -20,6 +20,7 @@
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   flex-direction: row;
+  height: 100%;
   overflow: hidden;
   transition: transform ease-out 0.1s;
   transform: scale(1);
diff --git a/js/src/ui/SelectionList/selectionList.css b/js/src/ui/SelectionList/selectionList.css
index abc7d35c53d..7cb8b6a4f92 100644
--- a/js/src/ui/SelectionList/selectionList.css
+++ b/js/src/ui/SelectionList/selectionList.css
@@ -18,7 +18,9 @@
 .item {
   display: flex;
   flex: 1;
+  height: 100%;
   position: relative;
+  width: 100%;
 
   .content {
     height: 100%;
@@ -36,11 +38,6 @@
   }
 }
 
-.selected,
-.unselected {
-  width: 100%;
-}
-
 .selected {
   filter: none;
 }

From 69105a99fdb073cf143eb4bc4a64deb63d97f70c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Wed, 22 Feb 2017 17:37:42 +0100
Subject: [PATCH 08/23] Convert Signer defaults to SelectionList

---
 js/src/views/ParityBar/accountStore.js |  4 +--
 js/src/views/ParityBar/parityBar.js    | 37 +++++++++++---------------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/js/src/views/ParityBar/accountStore.js b/js/src/views/ParityBar/accountStore.js
index 4c27368643c..f13881df031 100644
--- a/js/src/views/ParityBar/accountStore.js
+++ b/js/src/views/ParityBar/accountStore.js
@@ -37,7 +37,7 @@ export default class AccountStore {
   @action setDefaultAccount = (defaultAccount) => {
     transaction(() => {
       this.accounts = this.accounts.map((account) => {
-        account.default = account.address === defaultAccount;
+        account.checked = account.address === defaultAccount;
 
         return account;
       });
@@ -90,7 +90,7 @@ export default class AccountStore {
                 const account = accounts[address];
 
                 account.address = address;
-                account.default = address === this.defaultAccount;
+                account.checked = address === this.defaultAccount;
 
                 return account;
               })
diff --git a/js/src/views/ParityBar/parityBar.js b/js/src/views/ParityBar/parityBar.js
index 7f95cd6d5dc..3d34f430fdf 100644
--- a/js/src/views/ParityBar/parityBar.js
+++ b/js/src/views/ParityBar/parityBar.js
@@ -24,7 +24,7 @@ import { connect } from 'react-redux';
 import store from 'store';
 
 import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
-import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, ParityBackground, SectionList } from '~/ui';
+import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, ParityBackground, SelectionList } from '~/ui';
 import { CancelIcon, FingerprintIcon } from '~/ui/Icons';
 import DappsStore from '~/views/Dapps/dappsStore';
 import { Embedded as Signer } from '~/views/Signer';
@@ -328,10 +328,11 @@ class ParityBar extends Component {
           {
             displayType === DISPLAY_ACCOUNTS
               ? (
-                <SectionList
+                <SelectionList
                   className={ styles.accountsSection }
                   items={ this.accountStore.accounts }
                   noStretch
+                  onSelectClick={ this.onMakeDefault }
                   renderItem={ this.renderAccount }
                 />
               )
@@ -344,31 +345,23 @@ class ParityBar extends Component {
     );
   }
 
+  onMakeDefault = (account) => {
+    this.toggleAccountsDisplay();
+
+    return this.accountStore
+      .makeDefaultAccount(account.address)
+      .then(() => this.accountStore.loadAccounts());
+  }
+
   renderAccount = (account) => {
     const { balances } = this.props;
     const balance = balances[account.address];
-    const makeDefaultAccount = () => {
-      this.toggleAccountsDisplay();
-      return this.accountStore
-        .makeDefaultAccount(account.address)
-        .then(() => this.accountStore.loadAccounts());
-    };
 
     return (
-      <div
-        className={ styles.account }
-        onClick={ makeDefaultAccount }
-      >
-        <AccountCard
-          account={ account }
-          balance={ balance }
-          className={
-            account.default
-              ? styles.selected
-              : styles.unselected
-          }
-        />
-      </div>
+      <AccountCard
+        account={ account }
+        balance={ balance }
+      />
     );
   }
 

From 7b6f50dafa83b9b2234baeb71e21a2709d0c66d8 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Thu, 23 Feb 2017 08:17:45 +0100
Subject: [PATCH 09/23] Subtle selection border

---
 js/src/ui/SelectionList/selectionList.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/js/src/ui/SelectionList/selectionList.css b/js/src/ui/SelectionList/selectionList.css
index 7cb8b6a4f92..eee61dbb5ee 100644
--- a/js/src/ui/SelectionList/selectionList.css
+++ b/js/src/ui/SelectionList/selectionList.css
@@ -22,6 +22,10 @@
   position: relative;
   width: 100%;
 
+  &:hover {
+    box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
+  }
+
   .content {
     height: 100%;
     width: 100%;
@@ -39,6 +43,7 @@
 }
 
 .selected {
+  box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
   filter: none;
 }
 

From 1a87840cfdcf3cd1e5641bab4f4a5f8b682f281a Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Thu, 23 Feb 2017 09:38:58 +0100
Subject: [PATCH 10/23] Display account vault information

---
 js/src/views/Account/Header/header.css | 10 ++++++++++
 js/src/views/Account/Header/header.js  | 24 ++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/js/src/views/Account/Header/header.css b/js/src/views/Account/Header/header.css
index 6709851bdc0..62f07257402 100644
--- a/js/src/views/Account/Header/header.css
+++ b/js/src/views/Account/Header/header.css
@@ -36,6 +36,7 @@
 .addressline,
 .infoline,
 .uuidline,
+.vault,
 .title {
   margin-left: 72px;
 }
@@ -59,6 +60,15 @@
   display: inline-block;
 }
 
+.vault {
+  line-height: 32px;
+
+  .text {
+    display: inline-block;
+    opacity: 0.25;
+  }
+}
+
 .addressline {
   display: flex;
 }
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
index 93e129360b7..dbb22138146 100644
--- a/js/src/views/Account/Header/header.js
+++ b/js/src/views/Account/Header/header.js
@@ -48,6 +48,8 @@ export default class Header extends Component {
     const { address } = account;
     const meta = account.meta || {};
 
+    console.log('meta', meta);
+
     return (
       <div className={ className }>
         <Container>
@@ -65,6 +67,7 @@ export default class Header extends Component {
               <CopyToClipboard data={ address } />
               <div className={ styles.address }>{ address }</div>
             </div>
+            { this.renderVault() }
             { this.renderUuid() }
             <div className={ styles.infoline }>
               { meta.description }
@@ -154,4 +157,25 @@ export default class Header extends Component {
       </div>
     );
   }
+
+  renderVault () {
+    const { account } = this.props;
+    const { meta } = account;
+
+    if (!meta || !meta.vault) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.vault }>
+        <IdentityIcon
+          address={ meta.vault }
+          inline
+        />
+        <div className={ styles.text }>
+          { meta.vault }
+        </div>
+      </div>
+    );
+  }
 }

From caf44037e895135d58592bd2518220ada0b412eb Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Thu, 23 Feb 2017 10:11:01 +0100
Subject: [PATCH 11/23] Allow invalid addresses to display icons (e.g. vaults)

---
 js/src/ui/Form/InputAddress/inputAddress.js | 5 +++--
 js/src/views/Account/Header/header.js       | 2 --
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js
index 92fc494f271..6198d61e6d1 100644
--- a/js/src/ui/Form/InputAddress/inputAddress.js
+++ b/js/src/ui/Form/InputAddress/inputAddress.js
@@ -30,6 +30,7 @@ class InputAddress extends Component {
   static propTypes = {
     accountsInfo: PropTypes.object,
     allowCopy: PropTypes.bool,
+    allowInvalid: PropTypes.bool,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     error: PropTypes.string,
@@ -110,9 +111,9 @@ class InputAddress extends Component {
   }
 
   renderIcon () {
-    const { value, disabled, label, allowCopy, hideUnderline, readOnly } = this.props;
+    const { allowInvalid, value, disabled, label, allowCopy, hideUnderline, readOnly } = this.props;
 
-    if (!value || !value.length || !util.isAddressValid(value)) {
+    if (!value || !value.length || (!util.isAddressValid(value) && !allowInvalid)) {
       return null;
     }
 
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
index dbb22138146..e92f545a167 100644
--- a/js/src/views/Account/Header/header.js
+++ b/js/src/views/Account/Header/header.js
@@ -48,8 +48,6 @@ export default class Header extends Component {
     const { address } = account;
     const meta = account.meta || {};
 
-    console.log('meta', meta);
-
     return (
       <div className={ className }>
         <Container>

From 34a00b31244e8738ba80a9aa063e5a58f467d79e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Thu, 23 Feb 2017 10:11:31 +0100
Subject: [PATCH 12/23] Display vault on edit meta

---
 js/src/modals/EditMeta/editMeta.js | 32 +++++++++++++++++++++++++++++-
 js/src/modals/EditMeta/store.js    |  2 +-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js
index 04b1320a464..84564170c46 100644
--- a/js/src/modals/EditMeta/editMeta.js
+++ b/js/src/modals/EditMeta/editMeta.js
@@ -21,7 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '~/redux/actions';
-import { Button, Form, Input, InputChip, Portal } from '~/ui';
+import { Button, Form, Input, InputAddress, InputChip, Portal } from '~/ui';
 import { CancelIcon, SaveIcon } from '~/ui/Icons';
 
 import Store from './store';
@@ -101,6 +101,7 @@ class EditMeta extends Component {
             onTokensChange={ this.store.setTags }
             tokens={ tags.slice() }
           />
+          { this.renderVault() }
         </Form>
       </Portal>
     );
@@ -153,6 +154,35 @@ class EditMeta extends Component {
     );
   }
 
+  renderVault () {
+    const { isAccount, meta } = this.store;
+
+    if (!isAccount) {
+      return null;
+    }
+
+    return (
+      <InputAddress
+        allowCopy={ false }
+        allowInvalid
+        disabled
+        hint={
+          <FormattedMessage
+            id='editMeta.vault.hint'
+            defaultMessage='the vault this account is attached to'
+          />
+        }
+        label={
+          <FormattedMessage
+            id='editMeta.vault.label'
+            defaultMessage='associated vault'
+          />
+        }
+        value={ meta.vault }
+      />
+    );
+  }
+
   onClose = () => {
     this.props.onClose();
   }
diff --git a/js/src/modals/EditMeta/store.js b/js/src/modals/EditMeta/store.js
index bddb49a9d18..83211ffad1d 100644
--- a/js/src/modals/EditMeta/store.js
+++ b/js/src/modals/EditMeta/store.js
@@ -34,10 +34,10 @@ export default class Store {
     this._api = api;
 
     transaction(() => {
-      this.isAccount = !!uuid;
       this.address = address;
       this.meta = meta || {};
       this.name = name || '';
+      this.isAccount = !!uuid || meta.hardware;
 
       this.description = this.meta.description || '';
       this.passwordHint = this.meta.passwordHint || '';

From 02e13e71555f4b283c407d5e90764e692158be2a Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Thu, 23 Feb 2017 10:25:10 +0100
Subject: [PATCH 13/23] Convert VaultAccounts to SelectionList

---
 js/src/modals/VaultAccounts/vaultAccounts.css | 48 -------------
 js/src/modals/VaultAccounts/vaultAccounts.js  | 70 ++++++++-----------
 .../VaultAccounts/vaultAccounts.spec.js       |  4 +-
 3 files changed, 32 insertions(+), 90 deletions(-)
 delete mode 100644 js/src/modals/VaultAccounts/vaultAccounts.css

diff --git a/js/src/modals/VaultAccounts/vaultAccounts.css b/js/src/modals/VaultAccounts/vaultAccounts.css
deleted file mode 100644
index 1960376f3ab..00000000000
--- a/js/src/modals/VaultAccounts/vaultAccounts.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/* 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;
-}
diff --git a/js/src/modals/VaultAccounts/vaultAccounts.js b/js/src/modals/VaultAccounts/vaultAccounts.js
index 833b5805e73..748969ffbe5 100644
--- a/js/src/modals/VaultAccounts/vaultAccounts.js
+++ b/js/src/modals/VaultAccounts/vaultAccounts.js
@@ -22,11 +22,9 @@ import { bindActionCreators } from 'redux';
 
 import { newError } from '~/redux/actions';
 import { personalAccountsInfo } from '~/redux/providers/personalActions';
-import { AccountCard, Button, Portal, SectionList } from '~/ui';
+import { AccountCard, Button, Portal, SelectionList } from '~/ui';
 import { CancelIcon, CheckIcon } from '~/ui/Icons';
 
-import styles from './vaultAccounts.css';
-
 @observer
 class VaultAccounts extends Component {
   static contextTypes = {
@@ -92,55 +90,47 @@ class VaultAccounts extends Component {
           />
         }
       >
-        <SectionList
-          items={ vaultAccounts }
-          noStretch
-          renderItem={ this.renderAccount }
-          selectedAccounts={ selectedAccounts }
-        />
+        { this.renderList(vaultAccounts, 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)
+  renderList (vaultAccounts) {
+    return (
+      <SelectionList
+        isChecked={ this.isSelected }
+        items={ vaultAccounts }
+        noStretch
+        onSelectClick={ this.onSelect }
+        renderItem={ this.renderAccount }
+      />
+    );
+  }
+
   renderAccount = (account) => {
     const { balances } = this.props;
-    const { vaultName, selectedAccounts } = this.props.vaultStore;
     const balance = balances[account.address];
-    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 }
-          balance={ balance }
-          className={
-            isSelected
-              ? styles.selected
-              : styles.unselected
-          }
-          onClick={ onSelect }
-        />
-        <div className={ styles.overlay }>
-          {
-            isSelected
-              ? <CheckIcon onClick={ onSelect } />
-              : <CheckIcon className={ styles.iconDisabled } onClick={ onSelect } />
-          }
-        </div>
-      </div>
+      <AccountCard
+        account={ account }
+        balance={ balance }
+      />
     );
   }
 
+  isSelected = (account) => {
+    const { vaultName, selectedAccounts } = this.props.vaultStore;
+
+    return account.meta.vault === vaultName
+      ? !selectedAccounts[account.address]
+      : selectedAccounts[account.address];
+  }
+
+  onSelect = (account) => {
+    this.props.vaultStore.toggleSelectedAccount(account.address);
+  }
+
   onClose = () => {
     this.props.vaultStore.closeAccountsModal();
   }
diff --git a/js/src/modals/VaultAccounts/vaultAccounts.spec.js b/js/src/modals/VaultAccounts/vaultAccounts.spec.js
index 2dc8e321953..6a0d43b6e88 100644
--- a/js/src/modals/VaultAccounts/vaultAccounts.spec.js
+++ b/js/src/modals/VaultAccounts/vaultAccounts.spec.js
@@ -130,11 +130,11 @@ describe('modals/VaultAccounts', () => {
   });
 
   describe('components', () => {
-    describe('SectionList', () => {
+    describe('SelectionList', () => {
       let sectionList;
 
       beforeEach(() => {
-        sectionList = component.find('SectionList');
+        sectionList = component.find('SelectionList');
       });
 
       it('has the filtered accounts', () => {

From 9ef1e2c74d5f16044e0ebc85851dcdc89102104d Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Thu, 23 Feb 2017 11:45:28 +0100
Subject: [PATCH 14/23] Allow editing of Vault in meta

---
 js/src/modals/EditMeta/editMeta.js           | 48 +++++++++-
 js/src/modals/EditMeta/editMeta.test.js      |  4 +-
 js/src/modals/EditMeta/store.js              | 17 +++-
 js/src/modals/EditMeta/store.spec.js         | 61 ++++++++----
 js/src/modals/VaultSelector/index.js         | 17 ++++
 js/src/modals/VaultSelector/vaultSelector.js | 99 ++++++++++++++++++++
 js/src/modals/index.js                       |  1 +
 js/src/ui/VaultCard/vaultCard.js             | 49 +++++++---
 js/src/views/Vaults/store.js                 | 20 ++++
 js/src/views/Vaults/store.spec.js            | 20 ++++
 js/src/views/Vaults/vaults.spec.js           |  2 +-
 11 files changed, 299 insertions(+), 39 deletions(-)
 create mode 100644 js/src/modals/VaultSelector/index.js
 create mode 100644 js/src/modals/VaultSelector/vaultSelector.js

diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js
index 84564170c46..c3b3bc7de65 100644
--- a/js/src/modals/EditMeta/editMeta.js
+++ b/js/src/modals/EditMeta/editMeta.js
@@ -23,7 +23,9 @@ import { bindActionCreators } from 'redux';
 import { newError } from '~/redux/actions';
 import { Button, Form, Input, InputAddress, InputChip, Portal } from '~/ui';
 import { CancelIcon, SaveIcon } from '~/ui/Icons';
+import VaultStore from '~/views/Vaults/store';
 
+import VaultSelector from '../VaultSelector';
 import Store from './store';
 
 @observer
@@ -39,6 +41,11 @@ class EditMeta extends Component {
   }
 
   store = new Store(this.context.api, this.props.account);
+  vaultStore = VaultStore.get(this.context.api);
+
+  componentWillMount () {
+    this.vaultStore.loadVaults();
+  }
 
   render () {
     const { description, name, nameError, tags } = this.store;
@@ -55,6 +62,7 @@ class EditMeta extends Component {
           />
         }
       >
+        { this.renderVaultSelector() }
         <Form>
           <Input
             error={ nameError }
@@ -155,7 +163,7 @@ class EditMeta extends Component {
   }
 
   renderVault () {
-    const { isAccount, meta } = this.store;
+    const { isAccount, vaultName } = this.store;
 
     if (!isAccount) {
       return null;
@@ -178,7 +186,25 @@ class EditMeta extends Component {
             defaultMessage='associated vault'
           />
         }
-        value={ meta.vault }
+        onClick={ this.toggleVaultSelector }
+        value={ vaultName }
+      />
+    );
+  }
+
+  renderVaultSelector () {
+    const { isAccount, isVaultSelectorOpen, vaultName } = this.store;
+
+    if (!isAccount || !isVaultSelectorOpen) {
+      return null;
+    }
+
+    return (
+      <VaultSelector
+        onClose={ this.toggleVaultSelector }
+        onSelect={ this.setVaultName }
+        selected={ vaultName }
+        vaultStore={ this.vaultStore }
       />
     );
   }
@@ -188,17 +214,35 @@ class EditMeta extends Component {
   }
 
   onSave = () => {
+    const { address, isAccount, meta, vaultName } = this.store;
+
     if (this.store.hasError) {
       return;
     }
 
     return this.store
       .save()
+      .then(() => {
+        if (isAccount && (meta.vault !== vaultName)) {
+          return this.vaultStore.moveAccount(vaultName, address);
+        }
+
+        return true;
+      })
       .then(this.onClose)
       .catch((error) => {
         this.props.newError(error);
       });
   }
+
+  setVaultName = (vaultName) => {
+    this.store.setVaultName(vaultName);
+    this.toggleVaultSelector();
+  }
+
+  toggleVaultSelector = () => {
+    this.store.toggleVaultSelector();
+  }
 }
 
 function mapDispatchToProps (dispatch) {
diff --git a/js/src/modals/EditMeta/editMeta.test.js b/js/src/modals/EditMeta/editMeta.test.js
index 8193ca63e5e..c0cbf83a15b 100644
--- a/js/src/modals/EditMeta/editMeta.test.js
+++ b/js/src/modals/EditMeta/editMeta.test.js
@@ -45,7 +45,9 @@ function createApi () {
   return {
     parity: {
       setAccountName: sinon.stub().resolves(),
-      setAccountMeta: sinon.stub().resolves()
+      setAccountMeta: sinon.stub().resolves(),
+      listVaults: sinon.stub().resolves([]),
+      listOpenedVaults: sinon.stub().resolves([])
     }
   };
 }
diff --git a/js/src/modals/EditMeta/store.js b/js/src/modals/EditMeta/store.js
index 83211ffad1d..46951f095a6 100644
--- a/js/src/modals/EditMeta/store.js
+++ b/js/src/modals/EditMeta/store.js
@@ -21,12 +21,14 @@ import { validateName } from '~/util/validation';
 export default class Store {
   @observable address = null;
   @observable isAccount = false;
+  @observable isVaultSelectorOpen = false;
   @observable description = null;
   @observable meta = null;
   @observable name = null;
   @observable nameError = null;
   @observable passwordHint = null;
   @observable tags = null;
+  @observable vaultName = null;
 
   constructor (api, account) {
     const { address, name, meta, uuid } = account;
@@ -37,11 +39,12 @@ export default class Store {
       this.address = address;
       this.meta = meta || {};
       this.name = name || '';
-      this.isAccount = !!uuid || meta.hardware;
+      this.isAccount = !!uuid;
 
       this.description = this.meta.description || '';
       this.passwordHint = this.meta.passwordHint || '';
       this.tags = this.meta.tags && this.meta.tags.peek() || [];
+      this.vaultName = this.meta.vault;
     });
   }
 
@@ -74,6 +77,14 @@ export default class Store {
     this.tags = tags.slice();
   }
 
+  @action setVaultName = (vaultName) => {
+    this.vaultName = vaultName;
+  }
+
+  @action setVaultSelectorOpen = (isOpen) => {
+    this.isVaultSelectorOpen = isOpen;
+  }
+
   save () {
     const meta = {
       description: this.description,
@@ -94,4 +105,8 @@ export default class Store {
         throw error;
       });
   }
+
+  toggleVaultSelector () {
+    this.setVaultSelectorOpen(!this.isVaultSelectorOpen);
+  }
 }
diff --git a/js/src/modals/EditMeta/store.spec.js b/js/src/modals/EditMeta/store.spec.js
index 98335783622..4ff775718b8 100644
--- a/js/src/modals/EditMeta/store.spec.js
+++ b/js/src/modals/EditMeta/store.spec.js
@@ -142,31 +142,54 @@ describe('modals/EditMeta/Store', () => {
         expect(store.tags.peek()).to.deep.equal(['taga', 'tagb']);
       });
     });
-  });
 
-  describe('save', () => {
-    beforeEach(() => {
-      createStore(ACCOUNT);
+    describe('setVaultName', () => {
+      it('sets the name', () => {
+        store.setVaultName('testing');
+        expect(store.vaultName).to.equal('testing');
+      });
     });
 
-    it('calls parity.setAccountName with the set value', () => {
-      store.setName('test name');
-      store.save();
+    describe('setVaultSelectorOpen', () => {
+      it('sets the state', () => {
+        store.setVaultSelectorOpen('testing');
+        expect(store.isVaultSelectorOpen).to.equal('testing');
+      });
+    });
+  });
 
-      expect(api.parity.setAccountName).to.be.calledWith(ACCOUNT.address, 'test name');
+  describe('operations', () => {
+    describe('save', () => {
+      beforeEach(() => {
+        createStore(ACCOUNT);
+      });
+
+      it('calls parity.setAccountName with the set value', () => {
+        store.setName('test name');
+        store.save();
+
+        expect(api.parity.setAccountName).to.be.calledWith(ACCOUNT.address, 'test name');
+      });
+
+      it('calls parity.setAccountMeta with the adjusted values', () => {
+        store.setDescription('some new description');
+        store.setPasswordHint('some new passwordhint');
+        store.setTags(['taga']);
+        store.save();
+
+        expect(api.parity.setAccountMeta).to.have.been.calledWith(ACCOUNT.address, Object.assign({}, ACCOUNT.meta, {
+          description: 'some new description',
+          passwordHint: 'some new passwordhint',
+          tags: ['taga']
+        }));
+      });
     });
+  });
 
-    it('calls parity.setAccountMeta with the adjusted values', () => {
-      store.setDescription('some new description');
-      store.setPasswordHint('some new passwordhint');
-      store.setTags(['taga']);
-      store.save();
-
-      expect(api.parity.setAccountMeta).to.have.been.calledWith(ACCOUNT.address, Object.assign({}, ACCOUNT.meta, {
-        description: 'some new description',
-        passwordHint: 'some new passwordhint',
-        tags: ['taga']
-      }));
+  describe('toggleVaultSelector', () => {
+    it('inverts the selector state', () => {
+      store.toggleVaultSelector();
+      expect(store.isVaultSelectorOpen).to.be.true;
     });
   });
 });
diff --git a/js/src/modals/VaultSelector/index.js b/js/src/modals/VaultSelector/index.js
new file mode 100644
index 00000000000..95e5998a428
--- /dev/null
+++ b/js/src/modals/VaultSelector/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 './vaultSelector';
diff --git a/js/src/modals/VaultSelector/vaultSelector.js b/js/src/modals/VaultSelector/vaultSelector.js
new file mode 100644
index 00000000000..a2ae48294ff
--- /dev/null
+++ b/js/src/modals/VaultSelector/vaultSelector.js
@@ -0,0 +1,99 @@
+// 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 { Portal, SelectionList, VaultCard } from '~/ui';
+
+@observer
+export default class VaultSelector extends Component {
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    selected: PropTypes.string,
+    vaultStore: PropTypes.object.isRequired
+  };
+
+  render () {
+    return (
+      <Portal
+        isChildModal
+        onClose={ this.onClose }
+        open
+        title={
+          <FormattedMessage
+            id='vaults.selector.title'
+            defaultMessage='Select Account Vault'
+          />
+        }
+      >
+        { this.renderList() }
+      </Portal>
+    );
+  }
+
+  renderList () {
+    const { vaults } = this.props.vaultStore;
+    const openVaults = vaults.filter((vault) => vault.isOpen);
+
+    if (openVaults.length === 0) {
+      return (
+        <FormattedMessage
+          id='vaults.selector.noneAvailable'
+          defaultMessage='There are currently no vaults opened and available for selection. Create and open some first before attempting to select a vault for an account move.'
+        />
+      );
+    }
+
+    return (
+      <SelectionList
+        items={ openVaults }
+        isChecked={ this.isSelected }
+        noStretch
+        onSelectClick={ this.onSelect }
+        renderItem={ this.renderVault }
+      />
+    );
+  }
+
+  renderVault = (vault) => {
+    return (
+      <VaultCard
+        hideAccounts
+        hideButtons
+        vault={ vault }
+      />
+    );
+  }
+
+  isSelected = (vault) => {
+    return this.props.selected === vault.name;
+  }
+
+  onSelect = (vault) => {
+    this.props.onSelect(
+      this.props.selected === vault.name
+        ? ''
+        : vault.name
+    );
+  }
+
+  onClose = () => {
+    this.props.onClose();
+  }
+}
diff --git a/js/src/modals/index.js b/js/src/modals/index.js
index 83e80d8da3f..e64c90dce2c 100644
--- a/js/src/modals/index.js
+++ b/js/src/modals/index.js
@@ -35,6 +35,7 @@ export VaultAccounts from './VaultAccounts';
 export VaultCreate from './VaultCreate';
 export VaultLock from './VaultLock';
 export VaultMeta from './VaultMeta';
+export VaultSelector from './VaultSelector';
 export VaultUnlock from './VaultUnlock';
 export Verification from './Verification';
 export WalletSettings from './WalletSettings';
diff --git a/js/src/ui/VaultCard/vaultCard.js b/js/src/ui/VaultCard/vaultCard.js
index 1d2131c283f..62dae2049b5 100644
--- a/js/src/ui/VaultCard/vaultCard.js
+++ b/js/src/ui/VaultCard/vaultCard.js
@@ -31,13 +31,15 @@ export default class VaultCard extends Component {
     accounts: PropTypes.array,
     buttons: PropTypes.array,
     children: PropTypes.node,
+    hideAccounts: PropTypes.bool,
+    hideButtons: PropTypes.bool,
     vault: PropTypes.object.isRequired
   };
 
   static Layout = Layout;
 
   render () {
-    const { buttons, children, vault } = this.props;
+    const { children, vault } = this.props;
     const { isOpen } = vault;
 
     return (
@@ -49,19 +51,7 @@ export default class VaultCard extends Component {
             : null
         }
       >
-        <div className={ styles.buttons }>
-          <Button
-            className={ styles.status }
-            disabled
-            icon={
-              isOpen
-                ? <UnlockedIcon />
-                : <LockedIcon />
-            }
-            key='status'
-          />
-          { buttons }
-        </div>
+        { this.renderButtons() }
         <Layout vault={ vault }>
           { children }
         </Layout>
@@ -70,7 +60,11 @@ export default class VaultCard extends Component {
   }
 
   renderAccounts () {
-    const { accounts } = this.props;
+    const { accounts, hideAccounts } = this.props;
+
+    if (hideAccounts) {
+      return null;
+    }
 
     if (!accounts || !accounts.length) {
       return (
@@ -104,4 +98,29 @@ export default class VaultCard extends Component {
       </div>
     );
   }
+
+  renderButtons () {
+    const { buttons, hideButtons, vault } = this.props;
+    const { isOpen } = vault;
+
+    if (hideButtons) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.buttons }>
+        <Button
+          className={ styles.status }
+          disabled
+          icon={
+            isOpen
+              ? <UnlockedIcon />
+              : <LockedIcon />
+          }
+          key='status'
+        />
+        { buttons }
+      </div>
+    );
+  }
 }
diff --git a/js/src/views/Vaults/store.js b/js/src/views/Vaults/store.js
index acebf07d240..75a52954d72 100644
--- a/js/src/views/Vaults/store.js
+++ b/js/src/views/Vaults/store.js
@@ -393,8 +393,28 @@ export default class Store {
         outAccounts.map((address) => this._api.parity.changeVault(address, ''))
       ])
       .then(this.loadVaults)
+      .then(() => {
+        this.setBusyAccounts(false);
+      })
       .catch((error) => {
         console.error('moveAccounts', error);
+        this.setBusyAccounts(false);
+        throw error;
+      });
+  }
+
+  moveAccount (vaultName, address) {
+    this.setBusyAccounts(true);
+
+    return this._api.parity
+      .changeVault(address, vaultName)
+      .then(this.loadVaults)
+      .then(() => {
+        this.setBusyAccounts(false);
+      })
+      .catch((error) => {
+        console.error('moveAccount', error);
+        this.setBusyAccounts(false);
         throw error;
       });
   }
diff --git a/js/src/views/Vaults/store.spec.js b/js/src/views/Vaults/store.spec.js
index 3aab128602d..9f971d383d3 100644
--- a/js/src/views/Vaults/store.spec.js
+++ b/js/src/views/Vaults/store.spec.js
@@ -626,5 +626,25 @@ describe('modals/Vaults/Store', () => {
         expect(api.parity.changeVault).to.have.been.calledWith('C', '');
       });
     });
+
+    describe('moveAccount', () => {
+      beforeEach(() => {
+        sinon.spy(store, 'setBusyAccounts');
+
+        return store.moveAccount('testVault', 'A');
+      });
+
+      afterEach(() => {
+        store.setBusyAccounts.restore();
+      });
+
+      it('sets the busy flag', () => {
+        expect(store.setBusyAccounts).to.have.been.calledWith(true);
+      });
+
+      it('calls into parity_changeVault', () => {
+        expect(api.parity.changeVault).to.have.been.calledWith('A', 'testVault');
+      });
+    });
   });
 });
diff --git a/js/src/views/Vaults/vaults.spec.js b/js/src/views/Vaults/vaults.spec.js
index d053ea6364a..1f1fd449dde 100644
--- a/js/src/views/Vaults/vaults.spec.js
+++ b/js/src/views/Vaults/vaults.spec.js
@@ -42,7 +42,7 @@ function render (props = {}) {
   return component;
 }
 
-describe('modals/Vaults', () => {
+describe('views/Vaults', () => {
   beforeEach(() => {
     render();
   });

From 3812efd4e107fb4b48c301de1e623854817ca1b5 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Thu, 23 Feb 2017 13:42:39 +0100
Subject: [PATCH 15/23] Add tests for SectionList component

---
 js/src/ui/SelectionList/selectionList.spec.js | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 js/src/ui/SelectionList/selectionList.spec.js

diff --git a/js/src/ui/SelectionList/selectionList.spec.js b/js/src/ui/SelectionList/selectionList.spec.js
new file mode 100644
index 00000000000..4dfaed3967f
--- /dev/null
+++ b/js/src/ui/SelectionList/selectionList.spec.js
@@ -0,0 +1,100 @@
+// 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 SelectionList from './';
+
+const ITEMS = ['A', 'B', 'C'];
+
+let component;
+let instance;
+let renderItem;
+let onDefaultClick;
+let onSelectClick;
+
+function render (props = {}) {
+  renderItem = sinon.stub();
+  onDefaultClick = sinon.stub();
+  onSelectClick = sinon.stub();
+
+  component = shallow(
+    <SelectionList
+      items={ ITEMS }
+      noStretch='testNoStretch'
+      onDefaultClick={ onDefaultClick }
+      onSelectClick={ onSelectClick }
+      renderItem={ renderItem }
+    />
+  );
+  instance = component.instance();
+
+  return component;
+}
+
+describe('ui/SelectionList', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('SectionList', () => {
+    let section;
+
+    beforeEach(() => {
+      section = component.find('SectionList');
+    });
+
+    it('renders the SectionList', () => {
+      expect(section.get(0)).to.be.ok;
+    });
+
+    it('passes the items through', () => {
+      expect(section.props().items).to.deep.equal(ITEMS);
+    });
+
+    it('passes internal render method', () => {
+      expect(section.props().renderItem).to.equal(instance.renderItem);
+    });
+
+    it('passes noStretch prop through', () => {
+      expect(section.props().noStretch).to.equal('testNoStretch');
+    });
+  });
+
+  describe('instance methods', () => {
+    describe('renderItem', () => {
+      let result;
+
+      beforeEach(() => {
+        result = instance.renderItem('testItem', 'testIndex');
+      });
+
+      it('renders', () => {
+        expect(result).to.be.ok;
+      });
+
+      it('calls into parent renderItem', () => {
+        expect(renderItem).to.have.been.calledWith('testItem', 'testIndex');
+      });
+    });
+  });
+});

From c8789cc8f7bbb8c384ba64d183b3e08809ad3c6c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Thu, 23 Feb 2017 14:20:37 +0100
Subject: [PATCH 16/23] Add tests for VaultSelector component

---
 .../VaultSelector/vaultSelector.spec.js       | 169 ++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 js/src/modals/VaultSelector/vaultSelector.spec.js

diff --git a/js/src/modals/VaultSelector/vaultSelector.spec.js b/js/src/modals/VaultSelector/vaultSelector.spec.js
new file mode 100644
index 00000000000..2be5c4637a0
--- /dev/null
+++ b/js/src/modals/VaultSelector/vaultSelector.spec.js
@@ -0,0 +1,169 @@
+// 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 VaultSelector from './';
+
+const VAULTS_OPENED = [
+  { name: 'A', isOpen: true },
+  { name: 'B', isOpen: true }
+];
+const VAULTS_CLOSED = [
+  { name: 'C' },
+  { name: 'D' }
+];
+
+let component;
+let instance;
+let onClose;
+let onSelect;
+let vaultStore;
+
+function createVaultStore () {
+  vaultStore = {
+    vaults: VAULTS_OPENED.concat(VAULTS_CLOSED)
+  };
+
+  return vaultStore;
+}
+
+function render () {
+  onClose = sinon.stub();
+  onSelect = sinon.stub();
+
+  component = shallow(
+    <VaultSelector
+      onClose={ onClose }
+      onSelect={ onSelect }
+      selected='firstValue'
+      vaultStore={ createVaultStore() }
+    />
+  );
+  instance = component.instance();
+
+  return component;
+}
+
+describe('ui/VaultSelector', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('components', () => {
+    describe('Portal', () => {
+      let portal;
+
+      beforeEach(() => {
+        portal = component.find('Portal');
+      });
+
+      it('renders', () => {
+        expect(portal.get(0)).to.be.ok;
+      });
+
+      it('opens as a child modal', () => {
+        expect(portal.props().isChildModal).to.be.true;
+      });
+
+      it('passes the instance onClose', () => {
+        expect(portal.props().onClose).to.equal(instance.onClose);
+      });
+    });
+
+    describe('SelectionList', () => {
+      let list;
+
+      beforeEach(() => {
+        list = component.find('SelectionList');
+      });
+
+      it('renders', () => {
+        expect(list.get(0)).to.be.ok;
+      });
+
+      it('passes the open vaults', () => {
+        expect(list.props().items).to.deep.equal(VAULTS_OPENED);
+      });
+
+      it('passes internal renderItem', () => {
+        expect(list.props().renderItem).to.equal(instance.renderVault);
+      });
+
+      it('passes internal isChecked', () => {
+        expect(list.props().isChecked).to.equal(instance.isSelected);
+      });
+
+      it('passes internal onSelectClick', () => {
+        expect(list.props().onSelectClick).to.equal(instance.onSelect);
+      });
+    });
+  });
+
+  describe('instance methods', () => {
+    describe('renderVault', () => {
+      let card;
+
+      beforeEach(() => {
+        card = instance.renderVault({ name: 'testVault' });
+      });
+
+      it('renders VaultCard', () => {
+        expect(card).to.be.ok;
+      });
+    });
+
+    describe('isSelected', () => {
+      it('returns true when vault name matches', () => {
+        expect(instance.isSelected({ name: 'firstValue' })).to.be.true;
+      });
+
+      it('returns false when vault name does not match', () => {
+        expect(instance.isSelected({ name: 'testValue' })).to.be.false;
+      });
+    });
+
+    describe('onSelect', () => {
+      it('calls into props onSelect', () => {
+        instance.onSelect({ name: 'testing' });
+        expect(onSelect).to.have.been.called;
+      });
+
+      it('passes name when new selection made', () => {
+        instance.onSelect({ name: 'newValue' });
+        expect(onSelect).to.have.been.calledWith('newValue');
+      });
+
+      it('passes empty name when current selection made', () => {
+        instance.onSelect({ name: 'firstValue' });
+        expect(onSelect).to.have.been.calledWith('');
+      });
+    });
+
+    describe('onClose', () => {
+      it('calls props onClose', () => {
+        instance.onClose();
+        expect(onClose).to.have.been.called;
+      });
+    });
+  });
+});

From 442b20c6004585d005b545c3ff0efec11222349a Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Fri, 24 Feb 2017 07:54:55 +0100
Subject: [PATCH 17/23] Auto-focus description field (aligns with #4657)

---
 js/src/modals/VaultMeta/vaultMeta.js | 225 ++++++++++++++-------------
 1 file changed, 114 insertions(+), 111 deletions(-)

diff --git a/js/src/modals/VaultMeta/vaultMeta.js b/js/src/modals/VaultMeta/vaultMeta.js
index 66c052404b8..361efcf0676 100644
--- a/js/src/modals/VaultMeta/vaultMeta.js
+++ b/js/src/modals/VaultMeta/vaultMeta.js
@@ -22,7 +22,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '~/redux/actions';
-import { Button, Input, Portal, VaultCard } from '~/ui';
+import { Button, Form, Input, Portal, VaultCard } from '~/ui';
 import PasswordStrength from '~/ui/Form/PasswordStrength';
 import { CheckIcon, CloseIcon } from '~/ui/Icons';
 
@@ -86,120 +86,123 @@ class VaultMeta extends Component {
         }
       >
         <VaultCard.Layout vault={ vault }>
-          <div className={ styles.group }>
-            <Input
-              hint={
-                <FormattedMessage
-                  id='vaults.editMeta.description.hint'
-                  defaultMessage='the description for this vault'
-                />
-              }
-              label={
-                <FormattedMessage
-                  id='vaults.editMeta.description.label'
-                  defaultMessage='vault description'
-                />
-              }
-              onChange={ this.onEditDescription }
-              value={ vaultDescription }
-            />
-            <Input
-              hint={
-                <FormattedMessage
-                  id='vaults.editMeta.passwordHint.hint'
-                  defaultMessage='your password hint for this vault'
-                />
-              }
-              label={
-                <FormattedMessage
-                  id='vaults.editMeta.passwordHint.label'
-                  defaultMessage='password hint'
-                />
-              }
-              onChange={ this.onEditPasswordHint }
-              value={ vaultPasswordHint }
-            />
-          </div>
-          <div className={ styles.group }>
-            <Checkbox
-              label={
-                <FormattedMessage
-                  id='vaults.editMeta.allowPassword'
-                  defaultMessage='Change vault password'
-                />
-              }
-              checked={ passwordEdit }
-              onCheck={ this.onTogglePassword }
-            />
-            <div className={ [styles.passwords, passwordEdit ? null : styles.disabled].join(' ') }>
-              <div className={ styles.password }>
-                <Input
-                  disabled={ !passwordEdit }
-                  hint={
-                    <FormattedMessage
-                      id='vaults.editMeta.currentPassword.hint'
-                      defaultMessage='your current vault password'
-                    />
-                  }
-                  label={
-                    <FormattedMessage
-                      id='vaults.editMeta.currentPassword.label'
-                      defaultMessage='current password'
-                    />
-                  }
-                  onChange={ this.onEditPasswordCurrent }
-                  type='password'
-                  value={ vaultPasswordOld }
-                />
-              </div>
+          <Form>
+            <div className={ styles.group }>
+              <Input
+                autoFocus
+                hint={
+                  <FormattedMessage
+                    id='vaults.editMeta.description.hint'
+                    defaultMessage='the description for this vault'
+                  />
+                }
+                label={
+                  <FormattedMessage
+                    id='vaults.editMeta.description.label'
+                    defaultMessage='vault description'
+                  />
+                }
+                onChange={ this.onEditDescription }
+                value={ vaultDescription }
+              />
+              <Input
+                hint={
+                  <FormattedMessage
+                    id='vaults.editMeta.passwordHint.hint'
+                    defaultMessage='your password hint for this vault'
+                  />
+                }
+                label={
+                  <FormattedMessage
+                    id='vaults.editMeta.passwordHint.label'
+                    defaultMessage='password hint'
+                  />
+                }
+                onChange={ this.onEditPasswordHint }
+                value={ vaultPasswordHint }
+              />
             </div>
-            <div className={ [styles.passwords, passwordEdit ? null : styles.disabled].join(' ') }>
-              <div className={ styles.password }>
-                <Input
-                  disabled={ !passwordEdit }
-                  hint={
-                    <FormattedMessage
-                      id='vaults.editMeta.password.hint'
-                      defaultMessage='a strong, unique password'
-                    />
-                  }
-                  label={
-                    <FormattedMessage
-                      id='vaults.editMeta.password.label'
-                      defaultMessage='new password'
-                    />
-                  }
-                  onChange={ this.onEditPassword }
-                  type='password'
-                  value={ vaultPassword }
-                />
+            <div className={ styles.group }>
+              <Checkbox
+                label={
+                  <FormattedMessage
+                    id='vaults.editMeta.allowPassword'
+                    defaultMessage='Change vault password'
+                  />
+                }
+                checked={ passwordEdit }
+                onCheck={ this.onTogglePassword }
+              />
+              <div className={ [styles.passwords, passwordEdit ? null : styles.disabled].join(' ') }>
+                <div className={ styles.password }>
+                  <Input
+                    disabled={ !passwordEdit }
+                    hint={
+                      <FormattedMessage
+                        id='vaults.editMeta.currentPassword.hint'
+                        defaultMessage='your current vault password'
+                      />
+                    }
+                    label={
+                      <FormattedMessage
+                        id='vaults.editMeta.currentPassword.label'
+                        defaultMessage='current password'
+                      />
+                    }
+                    onChange={ this.onEditPasswordCurrent }
+                    type='password'
+                    value={ vaultPasswordOld }
+                  />
+                </div>
               </div>
-              <div className={ styles.password }>
-                <Input
-                  disabled={ !passwordEdit }
-                  error={ vaultPasswordRepeatError }
-                  hint={
-                    <FormattedMessage
-                      id='vaults.editMeta.password2.hint'
-                      defaultMessage='verify your new password'
-                    />
-                  }
-                  label={
-                    <FormattedMessage
-                      id='vaults.editMeta.password2.label'
-                      defaultMessage='new password (repeat)'
-                    />
-                  }
-                  onChange={ this.onEditPasswordRepeat }
-                  type='password'
-                  value={ vaultPasswordRepeat }
-                />
+              <div className={ [styles.passwords, passwordEdit ? null : styles.disabled].join(' ') }>
+                <div className={ styles.password }>
+                  <Input
+                    disabled={ !passwordEdit }
+                    hint={
+                      <FormattedMessage
+                        id='vaults.editMeta.password.hint'
+                        defaultMessage='a strong, unique password'
+                      />
+                    }
+                    label={
+                      <FormattedMessage
+                        id='vaults.editMeta.password.label'
+                        defaultMessage='new password'
+                      />
+                    }
+                    onChange={ this.onEditPassword }
+                    type='password'
+                    value={ vaultPassword }
+                  />
+                </div>
+                <div className={ styles.password }>
+                  <Input
+                    disabled={ !passwordEdit }
+                    error={ vaultPasswordRepeatError }
+                    hint={
+                      <FormattedMessage
+                        id='vaults.editMeta.password2.hint'
+                        defaultMessage='verify your new password'
+                      />
+                    }
+                    label={
+                      <FormattedMessage
+                        id='vaults.editMeta.password2.label'
+                        defaultMessage='new password (repeat)'
+                      />
+                    }
+                    onChange={ this.onEditPasswordRepeat }
+                    type='password'
+                    value={ vaultPasswordRepeat }
+                  />
+                </div>
+              </div>
+              <div className={ passwordEdit ? null : styles.disabled }>
+                <PasswordStrength input={ vaultPassword } />
               </div>
             </div>
-            <div className={ passwordEdit ? null : styles.disabled }>
-              <PasswordStrength input={ vaultPassword } />
-            </div>
-          </div>
+          </Form>
         </VaultCard.Layout>
       </Portal>
     );

From 93c4eef63d9c3a3579fa4a2b871772c254191b06 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Fri, 24 Feb 2017 08:58:02 +0100
Subject: [PATCH 18/23] Apply scroll fixes from lates commit in #4621

---
 js/src/modals/AddDapps/addDapps.css |  4 --
 js/src/modals/AddDapps/addDapps.js  | 76 ++++++++++++++---------------
 2 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/js/src/modals/AddDapps/addDapps.css b/js/src/modals/AddDapps/addDapps.css
index c987a874df0..2c8779a8485 100644
--- a/js/src/modals/AddDapps/addDapps.css
+++ b/js/src/modals/AddDapps/addDapps.css
@@ -19,10 +19,6 @@
   flex-direction: column;
 }
 
-.container {
-  overflow-y: auto;
-}
-
 .description {
   margin-top: .5em !important;
 }
diff --git a/js/src/modals/AddDapps/addDapps.js b/js/src/modals/AddDapps/addDapps.js
index fe8882342f2..871b4f505ea 100644
--- a/js/src/modals/AddDapps/addDapps.js
+++ b/js/src/modals/AddDapps/addDapps.js
@@ -47,45 +47,43 @@ export default class AddDapps extends Component {
           />
         }
       >
-        <div className={ styles.container }>
-          <div className={ styles.warning } />
-          {
-            this.renderList(store.sortedLocal, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.local.label'
-                defaultMessage='Applications locally available'
-              />,
-              <FormattedMessage
-                id='dapps.add.local.desc'
-                defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.'
-              />
-            )
-          }
-          {
-            this.renderList(store.sortedBuiltin, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.builtin.label'
-                defaultMessage='Applications bundled with Parity'
-              />,
-              <FormattedMessage
-                id='dapps.add.builtin.desc'
-                defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.'
-              />
-            )
-          }
-          {
-            this.renderList(store.sortedNetwork, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.network.label'
-                defaultMessage='Applications on the global network'
-              />,
-              <FormattedMessage
-                id='dapps.add.network.desc'
-                defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.'
-              />
-            )
-          }
-        </div>
+        <div className={ styles.warning } />
+        {
+          this.renderList(store.sortedLocal, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.local.label'
+              defaultMessage='Applications locally available'
+            />,
+            <FormattedMessage
+              id='dapps.add.local.desc'
+              defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.'
+            />
+          )
+        }
+        {
+          this.renderList(store.sortedBuiltin, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.builtin.label'
+              defaultMessage='Applications bundled with Parity'
+            />,
+            <FormattedMessage
+              id='dapps.add.builtin.desc'
+              defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.'
+            />
+          )
+        }
+        {
+          this.renderList(store.sortedNetwork, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.network.label'
+              defaultMessage='Applications on the global network'
+            />,
+            <FormattedMessage
+              id='dapps.add.network.desc'
+              defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.'
+            />
+          )
+        }
       </Portal>
     );
   }

From fe098aa90a7b0d7da5ff2a2553820bffbf53c3a9 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Fri, 24 Feb 2017 11:29:43 +0100
Subject: [PATCH 19/23] Remove unneeded logs

---
 js/src/modals/DappPermissions/dappPermissions.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/js/src/modals/DappPermissions/dappPermissions.js b/js/src/modals/DappPermissions/dappPermissions.js
index adb96c38b66..ddb4b040d83 100644
--- a/js/src/modals/DappPermissions/dappPermissions.js
+++ b/js/src/modals/DappPermissions/dappPermissions.js
@@ -73,12 +73,10 @@ class DappPermissions extends Component {
   }
 
   onMakeDefault = (account) => {
-    console.log('onMakeDefault', account);
     this.props.permissionStore.setDefaultAccount(account.address);
   }
 
   onSelect = (account) => {
-    console.log('onSelect', account);
     this.props.permissionStore.selectAccount(account.address);
   }
 

From 9e81b227ae36e27596cb40ff6f42793180923471 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Fri, 24 Feb 2017 11:37:07 +0100
Subject: [PATCH 20/23] Remove extra div, fixing ParityBar overflow

---
 js/src/ui/SelectionList/selectionList.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/js/src/ui/SelectionList/selectionList.js b/js/src/ui/SelectionList/selectionList.js
index 49d71ad689f..2293cf9c3c7 100644
--- a/js/src/ui/SelectionList/selectionList.js
+++ b/js/src/ui/SelectionList/selectionList.js
@@ -36,13 +36,11 @@ export default class SelectionList extends Component {
     const { items, noStretch } = this.props;
 
     return (
-      <div className={ styles.container }>
-        <SectionList
-          items={ items }
-          noStretch={ noStretch }
-          renderItem={ this.renderItem }
-        />
-      </div>
+      <SectionList
+        items={ items }
+        noStretch={ noStretch }
+        renderItem={ this.renderItem }
+      />
     );
   }
 

From d8dca9cd8928be747fca4e8980da1de225021e79 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Fri, 24 Feb 2017 17:06:26 +0100
Subject: [PATCH 21/23] Disable save if password don't match

---
 js/src/modals/VaultMeta/vaultMeta.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/js/src/modals/VaultMeta/vaultMeta.js b/js/src/modals/VaultMeta/vaultMeta.js
index 361efcf0676..4b0d326f61c 100644
--- a/js/src/modals/VaultMeta/vaultMeta.js
+++ b/js/src/modals/VaultMeta/vaultMeta.js
@@ -64,7 +64,7 @@ class VaultMeta extends Component {
             onClick={ this.onClose }
           />,
           <Button
-            disabled={ isBusyMeta }
+            disabled={ isBusyMeta || vaultPasswordRepeatError }
             icon={ <CheckIcon /> }
             key='vault'
             label={
@@ -257,8 +257,13 @@ class VaultMeta extends Component {
   }
 
   onExecute = () => {
+    const { vaultPasswordRepeatError } = this.props.vaultStore;
     const { passwordEdit } = this.state;
 
+    if (vaultPasswordRepeatError) {
+      return;
+    }
+
     return Promise
       .all([
         passwordEdit

From b98f115662c436d11895ee305319787725b368ad Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Fri, 24 Feb 2017 17:15:17 +0100
Subject: [PATCH 22/23] s/disabled/readOnly/

---
 js/src/modals/EditMeta/editMeta.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js
index 22149d45241..71e222ca643 100644
--- a/js/src/modals/EditMeta/editMeta.js
+++ b/js/src/modals/EditMeta/editMeta.js
@@ -174,7 +174,7 @@ class EditMeta extends Component {
       <InputAddress
         allowCopy={ false }
         allowInvalid
-        disabled
+        readOnly
         hint={
           <FormattedMessage
             id='editMeta.vault.hint'

From c22a1a406c330862704d924225eb73611495f6aa Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jaco@ethcore.io>
Date: Fri, 24 Feb 2017 17:56:10 +0100
Subject: [PATCH 23/23] string -> bool

---
 js/src/modals/VaultMeta/vaultMeta.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/modals/VaultMeta/vaultMeta.js b/js/src/modals/VaultMeta/vaultMeta.js
index 4b0d326f61c..5089af642f3 100644
--- a/js/src/modals/VaultMeta/vaultMeta.js
+++ b/js/src/modals/VaultMeta/vaultMeta.js
@@ -64,7 +64,7 @@ class VaultMeta extends Component {
             onClick={ this.onClose }
           />,
           <Button
-            disabled={ isBusyMeta || vaultPasswordRepeatError }
+            disabled={ isBusyMeta || !!vaultPasswordRepeatError }
             icon={ <CheckIcon /> }
             key='vault'
             label={