From 5adbac6026daa5c9111adc9ed0d235e4cd71c518 Mon Sep 17 00:00:00 2001 From: Roman Storm Date: Mon, 11 Dec 2017 16:54:27 -0800 Subject: [PATCH] Feature 1: hide passwords(Fixes#18) Feature 2: add tooltip --- package-lock.json | 133 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 1 - src/Keys.js | 133 +++++++++++++++++++++++++++++++++---- src/index/_3_base.scss | 6 ++ src/index/create-keys.scss | 3 + src/index/index.css | 8 +++ src/keysManager.js | 3 +- 8 files changed, 274 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index b09e523..b43524c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index e64a0e0..53327ee 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.js b/src/App.js index fe260b4..8b16829 100644 --- a/src/App.js +++ b/src/App.js @@ -89,7 +89,6 @@ class App extends Component { content: content }); }) - console.log(this.state); } } render() { diff --git a/src/Keys.js b/src/Keys.js index eef9cc5..886bd46 100644 --- a/src/Keys.js +++ b/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 (
@@ -24,12 +79,30 @@ export default class Keys extends Component{

Mining key

0x{this.props.mining.jsonStore.address}

- + { this.onVisibleChange('copyMiningKey')}} + placement="right" + overlay={this.state.copyBtns.copyMiningKey.text} + > + +

- Password: - {this.props.mining.password} - + + + { this.onVisibleChange('copyMiningPass')}} + placement="right" + overlay={this.state.copyBtns.copyMiningPass.text} + > + +

Download this key and use it in your mining node to @@ -44,12 +117,30 @@ export default class Keys extends Component{

Payout key

0x{this.props.payout.jsonStore.address}

- + { this.onVisibleChange('copyPayoutKey')}} + placement="right" + overlay={this.state.copyBtns.copyPayoutKey.text} + > + +

- Password: - {this.props.payout.password} - + + + { this.onVisibleChange('copyPayoutPass')}} + placement="right" + overlay={this.state.copyBtns.copyPayoutPass.text} + > + +

Download this key and use it on your client @@ -63,12 +154,30 @@ export default class Keys extends Component{

Voting key

0x{this.props.voting.jsonStore.address}

- + { this.onVisibleChange('copyVotingKey')}} + placement="right" + overlay={this.state.copyBtns.copyVotingKey.text} + > + +

- Password: - {this.props.voting.password} - + + + { this.onVisibleChange('copyVotingPass')}} + placement="right" + overlay={this.state.copyBtns.copyVotingPass.text} + > + +

Download this key and use it on your client node to diff --git a/src/index/_3_base.scss b/src/index/_3_base.scss index 0423c58..b53d21a 100644 --- a/src/index/_3_base.scss +++ b/src/index/_3_base.scss @@ -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; diff --git a/src/index/create-keys.scss b/src/index/create-keys.scss index f653b36..7eb72bd 100644 --- a/src/index/create-keys.scss +++ b/src/index/create-keys.scss @@ -98,3 +98,6 @@ } } } +.rc-tooltip-inner { + min-height: 0; +} \ No newline at end of file diff --git a/src/index/index.css b/src/index/index.css index c8a4739..de747f4 100644 --- a/src/index/index.css +++ b/src/index/index.css @@ -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; diff --git a/src/keysManager.js b/src/keysManager.js index 5fd8758..be01278 100644 --- a/src/keysManager.js +++ b/src/keysManager.js @@ -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) {