From af015d435bb7a6960da922d91c34d267c4df3673 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Thu, 16 Aug 2018 22:22:15 +0200
Subject: [PATCH] Integrating Clipboard.js and implemeting copy code

---
 BTCPayServer/Views/Apps/PayButton.cshtml | 26 ++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/BTCPayServer/Views/Apps/PayButton.cshtml b/BTCPayServer/Views/Apps/PayButton.cshtml
index 08f0d6e4f..eec4d3f84 100644
--- a/BTCPayServer/Views/Apps/PayButton.cshtml
+++ b/BTCPayServer/Views/Apps/PayButton.cshtml
@@ -109,7 +109,10 @@
         <div class="row" v-show="!errors.any()">
             <div class="col-lg-8">
                 <pre><code id="mainCode" class="html"></code></pre>
-                <i class="fa fa-copy"></i> <a href="#">Copy Code</a>
+                <button class="btn btn-primary" id="copyCode">
+                    <i class="fa fa-copy"></i> Copy Code
+                </button>
+                <span class="copyLabelPopup" style="display:none;">Copied</span>
             </div>
             <div class="col-lg-4">
                 <img id="previewButton" src="~/img/paywithbtcpay.png" />
@@ -133,6 +136,8 @@
     <!-- jsdelivr cdn -->
     <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
 
+    <script src="~/vendor/clipboard.js/clipboard.js"></script>
+
     <script type="text/javascript">
         var srvModel = @Html.Raw(Json.Serialize(Model));
         Vue.use(VeeValidate);
@@ -185,7 +190,7 @@
             }
             $("#previewButton").css("width", width);
             html += '\n    &lt;input type="image" src="' + srvModel.urlRoot + '/img/paywithbtcpay.png" name="submit" style="width:' + width +
-                '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">';
+                '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor"&gt;';
 
             html += '\n&lt;/form&gt;';
 
@@ -194,6 +199,8 @@
             $('pre code').each(function (i, block) {
                 hljs.highlightBlock(block);
             });
+
+            return html;
         }
 
         function addinput(name, value) {
@@ -204,5 +211,20 @@
         $(function () {
             inputChanges();
         });
+
+        String.prototype.replaceAll = function (search, replacement) {
+            var target = this;
+            return target.replace(new RegExp(search, 'g'), replacement);
+        };
+
+        // Clipboard Copy
+        new Clipboard('#copyCode', {
+            text: function (trigger) {
+                $(".copyLabelPopup").show().delay(1000).fadeOut(500);
+                return inputChanges().replaceAll("&lt;", "<").replaceAll("&gt;", ">");
+            }
+        });
+
+
     </script>
 }