From 08e8050ca532bdbeca6904e03935b0d2ef6b259e Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Mon, 26 Apr 2021 19:30:26 -0700
Subject: [PATCH] Add button to copy API key to clipboard (#2439)

* Add button to copy API key to clipboard

* Update "copy API key to clipboard" button appearance
---
 BTCPayServer/Views/Manage/APIKeys.cshtml | 30 +++++++++++++++++++-----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/BTCPayServer/Views/Manage/APIKeys.cshtml b/BTCPayServer/Views/Manage/APIKeys.cshtml
index aa443b3ed..4aa654921 100644
--- a/BTCPayServer/Views/Manage/APIKeys.cshtml
+++ b/BTCPayServer/Views/Manage/APIKeys.cshtml
@@ -13,7 +13,7 @@
     <thead>
     <tr>
         <th>Label</th>
-        <th>Key</th>
+        <th class="w-125px">Key</th>
         <th>Permissions</th>
         <th class="text-right">Actions</th>
     </tr>
@@ -28,7 +28,13 @@
             <td>@keyData.Label</td>
             <td>
                 <code class="hide-when-js">@keyData.Id</code>
-                <code class="only-for-js cursor-pointer" data-reveal="@keyData.Id">Click to reveal</code>
+                <button class="btn btn-sm btn-outline-primary only-for-js" data-reveal-btn>Click to reveal</button>
+                <div hidden>
+                    <code data-api-key>@keyData.Id</code>
+                    <button class="btn btn-sm btn-outline-primary mt-2" data-clipboard-confirm>
+                        Copy to clipboard
+                    </button>
+                </div>
             </td>
             <td>
                 @{
@@ -52,7 +58,7 @@
             </td>
             <td class="text-right">
                 <a asp-action="RemoveAPIKey" asp-route-id="@keyData.Id" asp-controller="Manage">Remove</a>
-                <span class="only-for-js">-</span>
+                <span>-</span>
                 <button type="button" class="btn btn-link only-for-js" data-qr="@index">Show QR</button>
             </td>
         </tr>
@@ -77,13 +83,25 @@
 <script src="~/vendor/vue-qrcode/vue-qrcode.min.js" asp-append-version="true"></script>
 <script src="~/vendor/bc-ur/web-bundle.js" asp-append-version="true"></script>
 <script src="~/vendor/vue-qrcode-reader/vue-qrcode-reader.browser.js" asp-append-version="true"></script>
+<script src="~/js/copy-to-clipboard.js" asp-append-version="true"></script>
 <link href="~/vendor/vue-qrcode-reader/vue-qrcode-reader.css" rel="stylesheet" asp-append-version="true"/>
 
 <partial name="ShowQR"/>
 <script>
-    $(document).ready(function(){       
-        $("[data-reveal]").on("click", function (){
-          $(this).text($(this).data("reveal")); 
+    $(document).ready(function(){   
+        $("[data-reveal-btn]").on("click", function (){
+            var $revealButton = $(this);
+            $revealButton.attr("hidden", "true");
+
+            var $apiKeyContainer = $revealButton.next("[hidden]");
+            $apiKeyContainer.removeAttr("hidden");
+
+            (function setupCopyToClipboardButton() {
+                var $clipboardBtn = $apiKeyContainer.children("[data-clipboard-confirm]");
+                var apiKey = $apiKeyContainer.children("[data-api-key]").text().trim();
+                $clipboardBtn.attr("data-clipboard", apiKey);
+                $clipboardBtn.click(window.copyToClipboard);
+            })();
         });
         
         var apiKeys = @Safe.Json(Model.ApiKeyDatas.Select(data => new