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
This commit is contained in:
Jaco Greeff
Gav Wood
17
js/src/modals/VaultCreate/index.js
Normal file
17
js/src/modals/VaultCreate/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './vaultCreate';
|
||||
38
js/src/modals/VaultCreate/vaultCreate.css
Normal file
38
js/src/modals/VaultCreate/vaultCreate.css
Normal file
@@ -0,0 +1,38 @@
|
||||
/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
/* This file is part of Parity.
|
||||
/*
|
||||
/* Parity is free software: you can redistribute it and/or modify
|
||||
/* it under the terms of the GNU General Public License as published by
|
||||
/* the Free Software Foundation, either version 3 of the License, or
|
||||
/* (at your option) any later version.
|
||||
/*
|
||||
/* Parity is distributed in the hope that it will be useful,
|
||||
/* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
/* GNU General Public License for more details.
|
||||
/*
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.body {
|
||||
/* TODO: These styles are shared with CreateAccount - DRY up */
|
||||
.passwords {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.password {
|
||||
box-sizing: border-box;
|
||||
flex: 0 1 50%;
|
||||
width: 50%;
|
||||
|
||||
&:nth-child(odd) {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
227
js/src/modals/VaultCreate/vaultCreate.js
Normal file
227
js/src/modals/VaultCreate/vaultCreate.js
Normal file
@@ -0,0 +1,227 @@
|
||||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { observer } from 'mobx-react';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { newError } from '~/redux/actions';
|
||||
import { Button, Input, Portal } from '~/ui';
|
||||
import PasswordStrength from '~/ui/Form/PasswordStrength';
|
||||
import { CheckIcon, CloseIcon } from '~/ui/Icons';
|
||||
|
||||
import styles from './vaultCreate.css';
|
||||
|
||||
@observer
|
||||
class VaultCreate extends Component {
|
||||
static propTypes = {
|
||||
newError: PropTypes.func.isRequired,
|
||||
vaultStore: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
render () {
|
||||
const { isBusyCreate, isModalCreateOpen, vaultDescription, vaultName, vaultNameError, vaultPassword, vaultPasswordHint, vaultPasswordRepeat, vaultPasswordRepeatError } = this.props.vaultStore;
|
||||
const hasError = !!vaultNameError || !!vaultPasswordRepeatError;
|
||||
|
||||
if (!isModalCreateOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Portal
|
||||
busy={ isBusyCreate }
|
||||
buttons={ [
|
||||
<Button
|
||||
disabled={ isBusyCreate }
|
||||
icon={ <CloseIcon /> }
|
||||
key='close'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='vaults.create.button.close'
|
||||
defaultMessage='close'
|
||||
/>
|
||||
}
|
||||
onClick={ this.onClose }
|
||||
/>,
|
||||
<Button
|
||||
disabled={ hasError || isBusyCreate }
|
||||
icon={ <CheckIcon /> }
|
||||
key='vault'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='vaults.create.button.vault'
|
||||
defaultMessage='create vault'
|
||||
/>
|
||||
}
|
||||
onClick={ this.onCreate }
|
||||
/>
|
||||
] }
|
||||
onClose={ this.onClose }
|
||||
open
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='vaults.create.title'
|
||||
defaultMessage='Create a new vault'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className={ styles.body }>
|
||||
<Input
|
||||
error={ vaultNameError }
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='vaults.create.name.hint'
|
||||
defaultMessage='a name for the vault'
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='vaults.create.name.label'
|
||||
defaultMessage='vault name'
|
||||
/>
|
||||
}
|
||||
onChange={ this.onEditName }
|
||||
value={ vaultName }
|
||||
/>
|
||||
<Input
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='vaults.create.description.hint'
|
||||
defaultMessage='an extended description for the vault'
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='vaults.create.descriptions.label'
|
||||
defaultMessage='(optional) description'
|
||||
/>
|
||||
}
|
||||
onChange={ this.onEditDescription }
|
||||
value={ vaultDescription }
|
||||
/>
|
||||
<Input
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='vaults.create.hint.hint'
|
||||
defaultMessage='(optional) a hint to help with remembering the password'
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='vaults.create.hint.label'
|
||||
defaultMessage='password hint'
|
||||
/>
|
||||
}
|
||||
onChange={ this.onEditPasswordHint }
|
||||
value={ vaultPasswordHint }
|
||||
/>
|
||||
<div className={ styles.passwords }>
|
||||
<div className={ styles.password }>
|
||||
<Input
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='vaults.create.password.hint'
|
||||
defaultMessage='a strong, unique password'
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='vaults.create.password.label'
|
||||
defaultMessage='password'
|
||||
/>
|
||||
}
|
||||
onChange={ this.onEditPassword }
|
||||
type='password'
|
||||
value={ vaultPassword }
|
||||
/>
|
||||
</div>
|
||||
<div className={ styles.password }>
|
||||
<Input
|
||||
error={ vaultPasswordRepeatError }
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='vaults.create.password2.hint'
|
||||
defaultMessage='verify your password'
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='vaults.create.password2.label'
|
||||
defaultMessage='password (repeat)'
|
||||
/>
|
||||
}
|
||||
onChange={ this.onEditPasswordRepeat }
|
||||
type='password'
|
||||
value={ vaultPasswordRepeat }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<PasswordStrength input={ vaultPassword } />
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
}
|
||||
|
||||
onEditDescription = (event, description) => {
|
||||
this.props.vaultStore.setVaultDescription(description);
|
||||
}
|
||||
|
||||
onEditName = (event, name) => {
|
||||
this.props.vaultStore.setVaultName(name);
|
||||
}
|
||||
|
||||
onEditPassword = (event, password) => {
|
||||
this.props.vaultStore.setVaultPassword(password);
|
||||
}
|
||||
|
||||
onEditPasswordHint = (event, hint) => {
|
||||
this.props.vaultStore.setVaultPasswordHint(hint);
|
||||
}
|
||||
|
||||
onEditPasswordRepeat = (event, password) => {
|
||||
this.props.vaultStore.setVaultPasswordRepeat(password);
|
||||
}
|
||||
|
||||
onCreate = () => {
|
||||
const { vaultNameError, vaultPasswordRepeatError } = this.props.vaultStore;
|
||||
|
||||
if (vaultNameError || vaultPasswordRepeatError) {
|
||||
return;
|
||||
}
|
||||
|
||||
return this.props.vaultStore
|
||||
.createVault()
|
||||
.catch(this.props.newError)
|
||||
.then(this.onClose);
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
this.props.vaultStore.closeCreateModal();
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({
|
||||
newError
|
||||
}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
null,
|
||||
mapDispatchToProps
|
||||
)(VaultCreate);
|
||||
162
js/src/modals/VaultCreate/vaultCreate.spec.js
Normal file
162
js/src/modals/VaultCreate/vaultCreate.spec.js
Normal file
@@ -0,0 +1,162 @@
|
||||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import VaultCreate from './';
|
||||
|
||||
let component;
|
||||
let instance;
|
||||
let reduxStore;
|
||||
let vaultStore;
|
||||
|
||||
function vaultReduxStore () {
|
||||
reduxStore = {
|
||||
dispatch: sinon.stub(),
|
||||
subscribe: sinon.stub(),
|
||||
getState: sinon.stub()
|
||||
};
|
||||
|
||||
return reduxStore;
|
||||
}
|
||||
|
||||
function vaultVaultStore () {
|
||||
vaultStore = {
|
||||
isBusyCreate: false,
|
||||
isModalCreateOpen: true,
|
||||
vaultDescription: 'initialDesc',
|
||||
vaultName: 'initialName',
|
||||
vaultPassword: 'initialPassword',
|
||||
vaultPasswordRepeat: 'initialPassword',
|
||||
vaultPasswordHint: 'initialHint',
|
||||
closeCreateModal: sinon.stub(),
|
||||
createVault: sinon.stub().resolves(true),
|
||||
setVaultDescription: sinon.stub(),
|
||||
setVaultName: sinon.stub(),
|
||||
setVaultPassword: sinon.stub(),
|
||||
setVaultPasswordHint: sinon.stub(),
|
||||
setVaultPasswordRepeat: sinon.stub()
|
||||
};
|
||||
|
||||
return vaultStore;
|
||||
}
|
||||
|
||||
function render () {
|
||||
component = shallow(
|
||||
<VaultCreate vaultStore={ vaultVaultStore() } />,
|
||||
{
|
||||
context: {
|
||||
store: vaultReduxStore()
|
||||
}
|
||||
}
|
||||
).find('VaultCreate').shallow();
|
||||
instance = component.instance();
|
||||
|
||||
return component;
|
||||
}
|
||||
|
||||
describe('modals/VaultCreate', () => {
|
||||
beforeEach(() => {
|
||||
render();
|
||||
});
|
||||
|
||||
it('renders defaults', () => {
|
||||
expect(component).to.be.ok;
|
||||
});
|
||||
|
||||
describe('event handlers', () => {
|
||||
describe('onClose', () => {
|
||||
beforeEach(() => {
|
||||
instance.onClose();
|
||||
});
|
||||
|
||||
it('calls into closeCreateModal', () => {
|
||||
expect(vaultStore.closeCreateModal).to.have.been.called;
|
||||
});
|
||||
});
|
||||
|
||||
describe('onCreate', () => {
|
||||
beforeEach(() => {
|
||||
sinon.spy(instance, 'onClose');
|
||||
return instance.onCreate();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
instance.onClose.restore();
|
||||
});
|
||||
|
||||
it('calls into createVault', () => {
|
||||
expect(vaultStore.createVault).to.have.been.called;
|
||||
});
|
||||
|
||||
it('closes modal', () => {
|
||||
expect(instance.onClose).to.have.been.called;
|
||||
});
|
||||
});
|
||||
|
||||
describe('onEditDescription', () => {
|
||||
beforeEach(() => {
|
||||
instance.onEditDescription(null, 'testDescription');
|
||||
});
|
||||
|
||||
it('calls setVaultDescription', () => {
|
||||
expect(vaultStore.setVaultDescription).to.have.been.calledWith('testDescription');
|
||||
});
|
||||
});
|
||||
|
||||
describe('onEditName', () => {
|
||||
beforeEach(() => {
|
||||
instance.onEditName(null, 'testName');
|
||||
});
|
||||
|
||||
it('calls setVaultName', () => {
|
||||
expect(vaultStore.setVaultName).to.have.been.calledWith('testName');
|
||||
});
|
||||
});
|
||||
|
||||
describe('onEditPassword', () => {
|
||||
beforeEach(() => {
|
||||
instance.onEditPassword(null, 'testPassword');
|
||||
});
|
||||
|
||||
it('calls setVaultPassword', () => {
|
||||
expect(vaultStore.setVaultPassword).to.have.been.calledWith('testPassword');
|
||||
});
|
||||
});
|
||||
|
||||
describe('onEditPasswordHint', () => {
|
||||
beforeEach(() => {
|
||||
instance.onEditPasswordHint(null, 'testPasswordHint');
|
||||
});
|
||||
|
||||
it('calls setVaultPasswordHint', () => {
|
||||
expect(vaultStore.setVaultPasswordHint).to.have.been.calledWith('testPasswordHint');
|
||||
});
|
||||
});
|
||||
|
||||
describe('onEditPasswordRepeat', () => {
|
||||
beforeEach(() => {
|
||||
instance.onEditPasswordRepeat(null, 'testPassword');
|
||||
});
|
||||
|
||||
it('calls setVaultPasswordRepeat', () => {
|
||||
expect(vaultStore.setVaultPasswordRepeat).to.have.been.calledWith('testPassword');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user