Vault Management UI (first round) (#4446)

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

* WIP

* WIP

* WIP

* WIP (create should create)

* Create & close working

* WIP

* WIP

* WIP

* Open & Close now working

* WIP

* WIP

* Merge relevant changes from js-home

* Hover actions

* WIP (start of account assignment)

* Open, Close & Account assignment works

* Fix margins

* UI updates

* Update tests

* Add the parity_{get|set}VaultMeta calls

* Handle metadata

* Adjust padding in Open/Close modals

* moveAccounts take both in and out

* Adjust padding

* Fix stretch

* Optimize hover stretch

* pre-merge

* Cleanup variable naming (duplication)

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

* clearVaultFields uses setters

* TODO for small Portal sizes

* Vaults rendering tests

* .only

* libusb compile

* VaultCard rendering tests

* Update message keys (rename gone rouge)

* Display passwordHint op vault unlock

* Update failing tests

* Manually dispatch allAccountsInfo when move completed

* Open/Close always shows vault image in colour

* Password submit submits modal (PR comment)

* Add link to account

js/src/modals/CreateAccount/createAccount.css

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

js/src/modals/CreateAccount/errors.js

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