Feature 1: hide passwords(Fixes#18)
Feature 2: add tooltip
This commit is contained in:
Roman Storm
parent
3893d00c8d
commit
5adbac6026
|
|
@ -73,6 +73,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"add-dom-event-listener": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz",
|
||||
"integrity": "sha1-j67SxBAIchzxEdodMNmVuFvkK+0=",
|
||||
"requires": {
|
||||
"object-assign": "4.1.1"
|
||||
}
|
||||
},
|
||||
"address": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
|
||||
|
|
@ -1801,6 +1809,19 @@
|
|||
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
|
||||
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
|
||||
},
|
||||
"component-classes": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
|
||||
"integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
|
||||
"requires": {
|
||||
"component-indexof": "0.0.3"
|
||||
}
|
||||
},
|
||||
"component-indexof": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
|
||||
"integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
|
||||
},
|
||||
"compressible": {
|
||||
"version": "2.0.12",
|
||||
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.12.tgz",
|
||||
|
|
@ -1993,6 +2014,16 @@
|
|||
"sha.js": "2.4.9"
|
||||
}
|
||||
},
|
||||
"create-react-class": {
|
||||
"version": "15.6.2",
|
||||
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.2.tgz",
|
||||
"integrity": "sha1-zx7RXxKq1/FO9fLf4F5sQvke8Co=",
|
||||
"requires": {
|
||||
"fbjs": "0.8.16",
|
||||
"loose-envify": "1.3.1",
|
||||
"object-assign": "4.1.1"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
|
||||
|
|
@ -2028,6 +2059,15 @@
|
|||
"randomfill": "1.0.3"
|
||||
}
|
||||
},
|
||||
"css-animation": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.4.1.tgz",
|
||||
"integrity": "sha1-W4gTEl3g+7uwu+G0cq6EIhRpt6g=",
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"component-classes": "1.2.6"
|
||||
}
|
||||
},
|
||||
"css-color-names": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
|
||||
|
|
@ -2559,6 +2599,11 @@
|
|||
"esutils": "2.0.2"
|
||||
}
|
||||
},
|
||||
"dom-align": {
|
||||
"version": "1.6.6",
|
||||
"resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.6.6.tgz",
|
||||
"integrity": "sha512-yBCGmhzj6SRaeAJlFUK/iMDh6bBpQE7EuChyPnrV8LQFV3vo3XghZw2lgHgj/8o9USFunVlvJ6YXfQWVdGnV8Q=="
|
||||
},
|
||||
"dom-converter": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
|
||||
|
|
@ -6398,6 +6443,11 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
|
||||
"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
|
||||
},
|
||||
"lodash._getnative": {
|
||||
"version": "3.9.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
|
||||
"integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
|
||||
},
|
||||
"lodash._reinterpolate": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
||||
|
|
@ -6428,6 +6478,26 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
|
||||
"integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
|
||||
},
|
||||
"lodash.isarguments": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
|
||||
"integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
|
||||
},
|
||||
"lodash.isarray": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
|
||||
"integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
|
||||
},
|
||||
"lodash.keys": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
|
||||
"integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
|
||||
"requires": {
|
||||
"lodash._getnative": "3.9.1",
|
||||
"lodash.isarguments": "3.1.0",
|
||||
"lodash.isarray": "3.0.4"
|
||||
}
|
||||
},
|
||||
"lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||
|
|
@ -9080,6 +9150,61 @@
|
|||
"strip-json-comments": "2.0.1"
|
||||
}
|
||||
},
|
||||
"rc-align": {
|
||||
"version": "2.3.5",
|
||||
"resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.3.5.tgz",
|
||||
"integrity": "sha512-V1AN/gMNiJ3vOzbY/H3CTxhzYH+Ri2KlsEpo1SN8/SYmI4I/ZfQpScFAgmERuIGcLStA2sOEeBNVpH2FaOd2hA==",
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"dom-align": "1.6.6",
|
||||
"prop-types": "15.6.0",
|
||||
"rc-util": "4.3.1"
|
||||
}
|
||||
},
|
||||
"rc-animate": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.4.1.tgz",
|
||||
"integrity": "sha512-hixobyAvDv0Oz4gHPOh67K4ck5Rz3JBBojBuKzYcu4b8JKMIiJxym83DfkkkYxXEEx/rwGf0mU0Dno/lbWghIQ==",
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"css-animation": "1.4.1",
|
||||
"prop-types": "15.6.0"
|
||||
}
|
||||
},
|
||||
"rc-tooltip": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.0.tgz",
|
||||
"integrity": "sha512-xEoUMatXp8OEL61UFH0+NrC39nkKzpOBhLrJCnnRpDRduU8L3DOhF6CNlIMkvg68hxlGGdquFtFw2t+1xNLX5A==",
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"prop-types": "15.6.0",
|
||||
"rc-trigger": "2.3.3"
|
||||
}
|
||||
},
|
||||
"rc-trigger": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.3.3.tgz",
|
||||
"integrity": "sha512-j8MHq0jES4vXShFbSExyty/WVR238lrZzUfsSaIDeiziBIiUAOP6SR2HBEi2gSGK239Jm3bWIJvwGA85kFMgmQ==",
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"create-react-class": "15.6.2",
|
||||
"prop-types": "15.6.0",
|
||||
"rc-align": "2.3.5",
|
||||
"rc-animate": "2.4.1",
|
||||
"rc-util": "4.3.1"
|
||||
}
|
||||
},
|
||||
"rc-util": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.3.1.tgz",
|
||||
"integrity": "sha512-OVNMKLePnwn0dCX/Gpc+/kGEDpmMo1Rfesg9xFcAckRd+D+YwVqV+dUJMHugP+4nRtbXi55o0HwPlkKIApYfQA==",
|
||||
"requires": {
|
||||
"add-dom-event-listener": "1.0.2",
|
||||
"babel-runtime": "6.26.0",
|
||||
"prop-types": "15.6.0",
|
||||
"shallowequal": "0.2.2"
|
||||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "16.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz",
|
||||
|
|
@ -10663,6 +10788,14 @@
|
|||
"nan": "2.8.0"
|
||||
}
|
||||
},
|
||||
"shallowequal": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
|
||||
"integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
|
||||
"requires": {
|
||||
"lodash.keys": "3.1.2"
|
||||
}
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"node-sass-chokidar": "0.0.3",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"password-generator": "^2.2.0",
|
||||
"rc-tooltip": "^3.7.0",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-scripts": "1.0.17",
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ class App extends Component {
|
|||
content: content
|
||||
});
|
||||
})
|
||||
console.log(this.state);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
|
|
|
|||
133
src/Keys.js
133
src/Keys.js
|
|
@ -1,10 +1,46 @@
|
|||
import React, { Component } from 'react';
|
||||
import Tooltip from 'rc-tooltip';
|
||||
import 'rc-tooltip/assets/bootstrap.css';
|
||||
|
||||
const encodeJson = (json) => {
|
||||
const encoded = window.encodeURIComponent(JSON.stringify(json));
|
||||
return `data:application/json;charset=utf-8,${encoded}`;
|
||||
}
|
||||
|
||||
export default class Keys extends Component{
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onVisibleChange = this.onVisibleChange.bind(this)
|
||||
this.onCopyBtnClick = this.onCopyBtnClick.bind(this)
|
||||
this.state = {
|
||||
copyBtns: {
|
||||
copyMiningPass: {
|
||||
visible: false,
|
||||
text: 'Copy'
|
||||
},
|
||||
copyVotingPass: {
|
||||
visible: false,
|
||||
text: 'Copy'
|
||||
},
|
||||
copyPayoutPass: {
|
||||
visible: false,
|
||||
text: 'Copy'
|
||||
},
|
||||
copyMiningKey: {
|
||||
visible: false,
|
||||
text: 'Copy'
|
||||
},
|
||||
copyVotingKey: {
|
||||
visible: false,
|
||||
text: 'Copy'
|
||||
},
|
||||
copyPayoutKey: {
|
||||
visible: false,
|
||||
text: 'Copy'
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
componentWillUpdate(nextProps, nextState) {
|
||||
if (this.refs.miningKeyAddress) {
|
||||
const Clipboard = require('clipboard');
|
||||
|
|
@ -17,6 +53,25 @@ export default class Keys extends Component{
|
|||
new Clipboard(this.refs.votingKeyPass);
|
||||
}
|
||||
}
|
||||
onVisibleChange(id) {
|
||||
console.log(id);
|
||||
let copyBtns = this.state.copyBtns;
|
||||
copyBtns[id].visible = !copyBtns[id].visible
|
||||
copyBtns[id].text = 'Copy'
|
||||
this.setState({
|
||||
copyBtns
|
||||
})
|
||||
|
||||
// const id = e.target.id;
|
||||
}
|
||||
onCopyBtnClick(e){
|
||||
const id = e.target.id;
|
||||
let copyBtns = this.state.copyBtns;
|
||||
copyBtns[id].text = 'Copied!'
|
||||
this.setState({
|
||||
copyBtns
|
||||
})
|
||||
}
|
||||
render(){
|
||||
return ( <div className="container">
|
||||
<div className="keys">
|
||||
|
|
@ -24,12 +79,30 @@ export default class Keys extends Component{
|
|||
<p className="keys-title">Mining key</p>
|
||||
<div className="keys-hash-container">
|
||||
<p className="keys-hash" id="miningKey">0x{this.props.mining.jsonStore.address}</p>
|
||||
<span id="copyMiningKey" className="copy" ref="miningKeyAddress" data-clipboard-text={"0x"+this.props.mining.jsonStore.address}></span>
|
||||
<Tooltip
|
||||
visible={this.state.copyBtns.copyMiningKey.visible}
|
||||
animation="zoom"
|
||||
trigger="hover"
|
||||
onVisibleChange={() => { this.onVisibleChange('copyMiningKey')}}
|
||||
placement="right"
|
||||
overlay={this.state.copyBtns.copyMiningKey.text}
|
||||
>
|
||||
<span id="copyMiningKey" onClick={this.onCopyBtnClick} className="copy" ref="miningKeyAddress" data-clipboard-text={"0x"+this.props.mining.jsonStore.address} ></span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<p className="keys-hash">
|
||||
<span className="password-label">Password:</span>
|
||||
<span id="miningKeyPass" className="pass">{this.props.mining.password}</span>
|
||||
<span id="copyMiningPass" className="copy" ref="miningKeyPass" data-clipboard-text={this.props.mining.password} ></span>
|
||||
<label className="password-label">Password:</label>
|
||||
<input disabled={true} defaultValue={this.props.mining.password} type="password" id="miningKeyPass" className="pass"/>
|
||||
<Tooltip
|
||||
visible={this.state.copyBtns.copyMiningPass.visible}
|
||||
animation="zoom"
|
||||
trigger="hover"
|
||||
onVisibleChange={() => { this.onVisibleChange('copyMiningPass')}}
|
||||
placement="right"
|
||||
overlay={this.state.copyBtns.copyMiningPass.text}
|
||||
>
|
||||
<span id="copyMiningPass" onClick={this.onCopyBtnClick} className="copy" ref="miningKeyPass" data-clipboard-text={this.props.mining.password} ></span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="keys-description">
|
||||
Download this key and use it in your mining node to
|
||||
|
|
@ -44,12 +117,30 @@ export default class Keys extends Component{
|
|||
<p className="keys-title">Payout key</p>
|
||||
<div className="keys-hash-container">
|
||||
<p className="keys-hash" id="payoutKey">0x{this.props.payout.jsonStore.address}</p>
|
||||
<span id="copyPayoutKey" className="copy" ref="payoutKeyAddress" data-clipboard-text={"0x"+this.props.payout.jsonStore.address}></span>
|
||||
<Tooltip
|
||||
visible={this.state.copyBtns.copyPayoutKey.visible}
|
||||
animation="zoom"
|
||||
trigger="hover"
|
||||
onVisibleChange={() => { this.onVisibleChange('copyPayoutKey')}}
|
||||
placement="right"
|
||||
overlay={this.state.copyBtns.copyPayoutKey.text}
|
||||
>
|
||||
<span id="copyPayoutKey" onClick={this.onCopyBtnClick} className="copy" ref="payoutKeyAddress" data-clipboard-text={"0x"+this.props.payout.jsonStore.address} ></span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<p className="keys-hash">
|
||||
<span className="password-label">Password:</span>
|
||||
<span id="payoutKeyPass" className="pass">{this.props.payout.password}</span>
|
||||
<span id="copyPayoutPass" className="copy" ref="payoutKeyPass" data-clipboard-text={this.props.payout.password}></span>
|
||||
<label className="password-label">Password:</label>
|
||||
<input type="password" disabled={true} id="payoutKeyPass" className="pass" defaultValue={this.props.payout.password}/>
|
||||
<Tooltip
|
||||
visible={this.state.copyBtns.copyPayoutPass.visible}
|
||||
animation="zoom"
|
||||
trigger="hover"
|
||||
onVisibleChange={() => { this.onVisibleChange('copyPayoutPass')}}
|
||||
placement="right"
|
||||
overlay={this.state.copyBtns.copyPayoutPass.text}
|
||||
>
|
||||
<span id="copyPayoutPass" onClick={this.onCopyBtnClick} className="copy" ref="payoutKeyPass" data-clipboard-text={this.props.payout.password} ></span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="keys-description">
|
||||
Download this key and use it on your client
|
||||
|
|
@ -63,12 +154,30 @@ export default class Keys extends Component{
|
|||
<p className="keys-title">Voting key</p>
|
||||
<div className="keys-hash-container">
|
||||
<p className="keys-hash" id="votingKey">0x{this.props.voting.jsonStore.address}</p>
|
||||
<span id="copyVotingKey" className="copy" ref="votingKeyAddress" data-clipboard-text={"0x"+this.props.voting.jsonStore.address}></span>
|
||||
<Tooltip
|
||||
visible={this.state.copyBtns.copyVotingKey.visible}
|
||||
animation="zoom"
|
||||
trigger="hover"
|
||||
onVisibleChange={() => { this.onVisibleChange('copyVotingKey')}}
|
||||
placement="right"
|
||||
overlay={this.state.copyBtns.copyVotingKey.text}
|
||||
>
|
||||
<span id="copyVotingKey" onClick={this.onCopyBtnClick} className="copy" ref="votingKeyAddress" data-clipboard-text={"0x"+this.props.voting.jsonStore.address} ></span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<p className="keys-hash">
|
||||
<span className="password-label">Password:</span>
|
||||
<span id="votingKeyPass" className="pass">{this.props.voting.password}</span>
|
||||
<span id="copyVotingPass" className="copy" ref="votingKeyPass" data-clipboard-text={this.props.voting.password} ></span>
|
||||
<label className="password-label">Password:</label>
|
||||
<input type="password" disabled={true} id="votingKeyPass" className="pass" defaultValue={this.props.voting.password}/>
|
||||
<Tooltip
|
||||
visible={this.state.copyBtns.copyVotingPass.visible}
|
||||
animation="zoom"
|
||||
trigger="hover"
|
||||
onVisibleChange={() => { this.onVisibleChange('copyVotingPass')}}
|
||||
placement="right"
|
||||
overlay={this.state.copyBtns.copyVotingPass.text}
|
||||
>
|
||||
<span id="copyVotingPass" onClick={this.onCopyBtnClick} className="copy" ref="votingKeyPass" data-clipboard-text={this.props.voting.password} ></span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="keys-description">
|
||||
Download this key and use it on your client node to
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ p, h1, h2, h3, h4 {
|
|||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
background: #fdfdfd;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -98,3 +98,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.rc-tooltip-inner {
|
||||
min-height: 0;
|
||||
}
|
||||
|
|
@ -67,6 +67,11 @@ p, h1, h2, h3, h4 {
|
|||
padding: 0;
|
||||
font-family: 'Open Sans', sans-serif; }
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
background: #fdfdfd;
|
||||
margin-left: 5px; }
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -216,6 +221,9 @@ button:focus {
|
|||
.create-keys input[type="radio"]:checked + .radio:after {
|
||||
opacity: 1; }
|
||||
|
||||
.rc-tooltip-inner {
|
||||
min-height: 0; }
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@ import KeysManagerAbi from './keysManagerAbi.json'
|
|||
import Web3 from 'web3';
|
||||
import addressGenerator from './addressGenerator';
|
||||
|
||||
const KEYS_MANAGER_ADDRESS = '0x3111c94b9243a8a99d5a867e00609900e437e2c0'
|
||||
export default class KeysManager {
|
||||
constructor(){
|
||||
if(window.web3.currentProvider){
|
||||
let web3_10 = new Web3(window.web3.currentProvider);
|
||||
this.keysInstance = new web3_10.eth.Contract(KeysManagerAbi, '0x758492834ed6454f41d6d3d6b73d6e46d4555429');
|
||||
this.keysInstance = new web3_10.eth.Contract(KeysManagerAbi, KEYS_MANAGER_ADDRESS);
|
||||
}
|
||||
}
|
||||
async isInitialKeyValid(initialKey) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue