grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

usability improvements to security token Dialog #7112 (#7134)

Browse Source
This commit is contained in:
Brennan Novak 2017-12-11 12:59:24 +01:00 committed by Jaco Greeff
parent 16d6f98d7c
commit b25f93dda5
2 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/src/Connection/connection.css
View File

@ -53,9 +53,9 @@
}
.form {
margin-top: 0.75em;
margin-top: 1em;
padding: 0 4em;
text-align: left;
text-align: center;
}
.timestamp {
@ -71,14 +71,15 @@
}
.icons {
padding-top: 1.5em;
margin-top: 2em;
margin-bottom: 0px;
}
.icon,
.iconSmall {
display: inline-block;
padding: 1em;
padding-bottom: 1em;
margin-top: 2em;
padding: 0 1.5em;
vertical-align: middle;
}
@ -92,10 +93,13 @@
}
.console {
width: 80%;
font-family: 'Roboto Mono', monospace;
background: rgba(0, 0, 0, 0.25);
background: rgba(0, 0, 0, 0.65);
font-size: 16px;
padding: 0 0.25em;
padding: 0.5em 0.25em;
margin: 1em auto;
border-radius: 3px;
}
@keyframes pulse {
@ -123,10 +127,11 @@
color: rgb(208, 208, 208);
}
.formInput input {
.formInput input[type=text] {
background: rgba(0, 0, 0, 0.25) !important;
text-align: center;
}
.formInput input:focus {
.formInput input[type=text]:focus {
background: rgba(0, 0, 0, 0.25) !important;
}

16
js/src/Connection/connection.js
View File

@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
import GradientBg from '@parity/ui/lib/GradientBg';
import Input from '@parity/ui/lib/Form/Input';
import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon } from '@parity/ui/lib/Icons';
import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon, KeyIcon } from '@parity/ui/lib/Icons';
import styles from './connection.css';
@ -64,7 +64,7 @@ class Connection extends Component {
<div className={ styles.icon }>
{
needsToken
? <VpnIcon className={ styles.svg } />
? <KeyIcon className={ styles.svg } />
: <DashboardIcon className={ styles.svg } />
}
</div>
@ -90,18 +90,12 @@ class Connection extends Component {
<div>
<FormattedMessage
id='connection.noConnection'
defaultMessage='Unable to make a connection to the Parity Secure API. To update your secure token or to generate a new one, run: {newToken} and paste the generated token into the space below.'
defaultMessage='To proceed you need to generate a new security token by running the following command in your terminal {newToken} Then copy &amp; paste the newly generated token here'
values={ {
newToken: <div className={ styles.console }>parity signer new-token</div>
newToken: <div className={ styles.console }>$ parity signer new-token</div>
} }
/>
</div>
<div className={ styles.timestamp }>
<FormattedMessage
id='connection.timestamp'
defaultMessage='Ensure that both the Parity node and this machine connecting have computer clocks in-sync with each other and with a timestamp server, ensuring both successful token validation and block operations.'
/>
</div>
<div className={ styles.form }>
<Input
className={ styles.formInput }
@ -120,7 +114,7 @@ class Connection extends Component {
hint={
<FormattedMessage
id='connection.token.hint'
defaultMessage='Insert the generated token here'
defaultMessage='xxXX-Xxxx-xXxx-XxXX'
/>
}
onChange={ this.onChangeToken }