openethereum/js/src/ui/VaultCard/vaultCard.js
Jaco Greeff 9e210e5eda 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
2017-02-20 16:40:01 +01:00

103 lines
2.7 KiB
JavaScript

// 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 { FormattedMessage } from 'react-intl';
import { Link } from 'react-router';
import Button from '~/ui/Button';
import Container from '~/ui/Container';
import IdentityIcon from '~/ui/IdentityIcon';
import { LockedIcon, UnlockedIcon } from '~/ui/Icons';
import Layout from './Layout';
import styles from './vaultCard.css';
export default class VaultCard extends Component {
static propTypes = {
accounts: PropTypes.array,
buttons: PropTypes.array,
vault: PropTypes.object.isRequired
};
static Layout = Layout;
render () {
const { buttons, vault } = this.props;
const { isOpen } = vault;
return (
<Container
className={ styles.container }
hover={
isOpen
? this.renderAccounts()
: null
}
>
<div className={ styles.buttons }>
<Button
className={ styles.status }
disabled
icon={
isOpen
? <UnlockedIcon />
: <LockedIcon />
}
key='status'
/>
{ buttons }
</div>
<Layout vault={ vault } />
</Container>
);
}
renderAccounts () {
const { accounts } = this.props;
if (!accounts || !accounts.length) {
return (
<div className={ styles.empty }>
<FormattedMessage
id='vaults.accounts.empty'
defaultMessage='There are no accounts in this vault'
/>
</div>
);
}
return (
<div className={ styles.accounts }>
{
accounts.map((address) => {
return (
<Link to={ `/accounts/${address}` }>
<IdentityIcon
address={ address }
center
className={ styles.account }
key={ address }
/>
</Link>
);
})
}
</div>
);
}
}