Password copy button

assets/javascripts/application/index.js

@@ -155,9 +155,7 @@ function startDapp(web3, isOraclesNetwork) {
 				contractAddress,
 				function(txHash, err) {
 					if (err) {
-						$(".loading-container").hide();
+						loadingFinished();
-						$('.waiting-container').hide();
-						$(".content").show();
 						if (err.type != "REQUEST_REJECTED") swal("Error", "Error in addresses addition to contract", "error");
 						return;
 					}
@@ -174,9 +172,7 @@ function startDapp(web3, isOraclesNetwork) {
 						contractAddress,
 						function(res, err) {
 							if (err) {
-								$(".loading-container").hide();
+								loadingFinished();
-								$('.waiting-container').hide();
-								$(".content").show();
 								console.log(err.message);
 								if (err.type != "REQUEST_REJECTED") swal("Error", "Error in addresses addition to contract", "error");
 								return;
@@ -196,9 +192,7 @@ function startDapp(web3, isOraclesNetwork) {
 			$('.waiting-container').empty();
 			$('.waiting-container').append("<h2>Transfering ether from initial key to payout key...</h2>");
 			if (err) {
-				$(".loading-container").hide();
+				loadingFinished();
-				$('.waiting-container').hide();
-				$(".content").show();
 				swal("Error", err.message, "error");
 				return;
 			}
@@ -224,9 +218,7 @@ function startDapp(web3, isOraclesNetwork) {
     		estimateGas(web3, address, to, null, parseInt(balance/2), function(estimatedGas, err) {
     			if (err) {
 		          console.log(err);
-		          $(".loading-container").hide();
+		          loadingFinished();
-		          $('.waiting-container').hide();
-				  $(".content").show();
 		          return;
 		        }
 
@@ -250,14 +242,10 @@ function startDapp(web3, isOraclesNetwork) {
 					"value": ammountToSend}, function(err, txHash) {
 	        	    if (err) {
 			          console.log(err);
-			          $(".loading-container").hide();
+			          loadingFinished();
-			          $('.waiting-container').hide();
-				  	  $(".content").show();
 			          return;
 			        }
-			        $(".loading-container").hide();
+			        loadingFinished();
-			        $('.waiting-container').hide();
-				  	$(".content").show();
 					swal("Sucess", "Keys are created", "success");
 					$('.content').empty();
 					$('.content').load("./keys.html", function() {
@@ -269,6 +257,14 @@ function startDapp(web3, isOraclesNetwork) {
 						$("#payoutKeyPass").text(keys.payoutKey.password);
 						$("#votingKeyPass").text(keys.votingKey.password);
 
+						$("#copyMiningPass").attr("data-clipboard-text", keys.miningKey.password);
+						$("#copyPayoutPass").attr("data-clipboard-text", keys.payoutKey.password);
+						$("#copyVotingPass").attr("data-clipboard-text", keys.votingKey.password);
+
+						buildCopyPassControl("copyMiningPass");
+						buildCopyPassControl("copyPayoutPass");
+						buildCopyPassControl("copyVotingPass");
+
 						$("#miningKeyDownload").click(function() {
 							download("mining_key_" + keys.miningKey.miningKeyObject.address, JSON.stringify(keys.miningKey.miningKeyObject));
 						});
@@ -284,6 +280,21 @@ function startDapp(web3, isOraclesNetwork) {
 			    });
 			});
 		}
+
+		function loadingFinished() {
+			$(".loading-container").hide();
+          	$(".waiting-container").hide();
+	  		$(".content").show();
+		}
+
+		function buildCopyPassControl(id) {
+			var el = document.getElementById(id);
+			var clipboard = new Clipboard( el );
+		  	
+		  	clipboard.on( "success", function( event ) {
+		  		toastr.success('Password copied');
+		    });
+		}
 	});
 }
 

assets/javascripts/vendor/index.js

@@ -1,2 +1,3 @@
 //=require jquery.min.js
 //=require web3.js
+//=require clipboard.min.js

assets/stylesheets/index/_3_base.scss

@@ -40,3 +40,13 @@ body {
   margin-left: 140px;
   margin-right: 140px;
 }
+
+.copy {
+  @include image-2x('../images/copy@2x.png', 14px, 14px);
+  background-image: url('../images/copy.png');
+  background-size: 14px 14px;
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  margin-left: 5px;
+}

assets/stylesheets/index/keys.scss

@@ -12,7 +12,7 @@
     vertical-align: top;
     width: 33.33%;
     box-sizing: border-box;
-    padding: 0 15px 60px 15px;
+    padding: 0 0px 60px 15px;
 
     &:first-child {
       padding-left: 0;

index.html

@@ -13,6 +13,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./assets/stylesheets/index.css">
   <link rel="stylesheet" type="text/css" href="./assets/stylesheets/sweetalert2.min.css">
+  <link rel="stylesheet" type="text/css" href="./assets/stylesheets/toastr.min.css">
   <link rel="apple-touch-icon" href="./favicons/favicon-192x192.png">
   <link rel="icon" type="image/png" sizes="192x192" href="./favicons/favicon-192x192.png">
   <link rel="mask-icon" color="#6151cc" href="./favicons/safari-pinned-tab.svg">
@@ -78,7 +79,8 @@
     </div>
   </footer>
   <script src="./assets/javascripts/sweetalert2.min.js" type="text/javascript"></script>
-  <script src="./assets/javascripts/application.js?v=1.32" type="text/javascript"></script>
+  <script src="./assets/javascripts/application.js?v=1.33" type="text/javascript"></script>
   <script src="./assets/javascripts/keythereum.min.js" type="text/javascript"></script>
+  <script src="./assets/javascripts/toastr.min.js" type="text/javascript"></script>
 </body>
 </html>

keys.html

@@ -2,8 +2,12 @@
   <div class="keys">
     <div class="keys-i">
       <p class="keys-title">Mining key</p>
-      <p class="keys-hash" id="miningKey"></p>
+      <p class="keys-hash" id="miningKey">0x600B023698a0E6d58E79432b1EA5EfB859A6f62C</p>
-      <p class="keys-hash"><span class="password-label">Password: </span><span id="miningKeyPass"></span></p>
+      <p class="keys-hash">
+        <span class="password-label">Password: </span>
+        <span id="miningKeyPass" class="pass">PQwBCtsj</span>
+        <span id="copyMiningPass" class="copy"></span>
+      </p>
       <p class="keys-description">
         Download this key and use it in your mining node to
         validate blocks in the network. Mined coins will be
@@ -15,8 +19,12 @@
     </div>
     <div class="keys-i">
       <p class="keys-title">Payout key</p>
-      <p class="keys-hash" id="payoutKey"></p>
+      <p class="keys-hash" id="payoutKey">0x00b8B538709007c511902Fd8A12691dAaFE915BA</span></p>
-      <p class="keys-hash"><span class="password-label">Password: </span><span id="payoutKeyPass"></span></p>
+      <p class="keys-hash">
+        <span class="password-label">Password: </span>
+        <span id="payoutKeyPass" class="pass">VOGN5y0U</span>
+        <span id="copyPayoutPass" class="copy"></span>
+      </p>
       <p class="keys-description">
         Download this key and use it on your client
         node/wallet to spend earned coins.
@@ -27,8 +35,12 @@
     </div>
     <div class="keys-i">
       <p class="keys-title">Voting key</p>
-      <p class="keys-hash" id="votingKey"></p>
+      <p class="keys-hash" id="votingKey">0x29EFc7C1d7c12b5641DF2011e17A7A8cE19cc949</span></p>
-      <p class="keys-hash"><span class="password-label">Password: </span><span id="votingKeyPass"></span></p>
+      <p class="keys-hash">
+        <span class="password-label">Password: </span>
+        <span id="votingKeyPass" class="pass">7aMeywLm</span>
+        <span id="copyVotingPass" class="copy"></span>
+      </p>
       <p class="keys-description">
         Download this key and use it on your client node to
         vote for necessary ballots,  such as adding or