poa-dapps-keys-generation/src/Keys.js

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');
      // this.clipboard = new Clipboard(this.refs.copyBtn);
      new Clipboard(this.refs.miningKeyAddress);
      new Clipboard(this.refs.miningKeyPass);
      new Clipboard(this.refs.payoutKeyAddress);
      new Clipboard(this.refs.payoutKeyPass);
      new Clipboard(this.refs.votingKeyAddress);
      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">
      <div className="keys-i">
        <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>
          <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">
          <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
          validate blocks in the network. Mined coins will be
          deposited to your payout account.
        </p>
        <div className="keys-footer">
          <a className="keys-download" id="miningKeyDownload" href={encodeJson(this.props.mining.jsonStore)} download={`mining_${this.props.mining.jsonStore.address}.json`}>Download Mining Key</a>
        </div>
      </div>
      <div className="keys-i">
        <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>
          <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"> 
          <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
          node/wallet to spend earned coins.
        </p>
        <div className="keys-footer">
          <a className="keys-download" id="payoutKeyDownload" href={encodeJson(this.props.payout.jsonStore)} download={`payout_${this.props.payout.jsonStore.address}.json`}>Download Payout Key</a>
        </div>
      </div>
      <div className="keys-i">
        <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>
          <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">
          <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
          vote for necessary ballots,  such as adding or
          removing miners from the network.
        </p>
        <div className="keys-footer">  
          <a className="keys-download" id="votingKeyDownload" href={encodeJson(this.props.voting.jsonStore)} download={`voting_${this.props.voting.jsonStore.address}.json`}>Download Voting Key</a>
        </div>
      </div>
    </div>
    <div className="keys-note">
      <p className="keys-note-title">Important</p>
      <p className="keys-note-description">
        Do not close this tab until you download all keys and save passwords. Keep keys secure and protected. If you lose your keys, you will need to get a new initial key using Voting DAPP.
      </p>
    </div>
  </div>
  )
  }
}