From 64a68b95b00fa32b64421f06ffcb8db95f40486d Mon Sep 17 00:00:00 2001
From: Andrew Camilleri <kukks@btcpayserver.org>
Date: Thu, 7 Jan 2021 09:56:35 +0100
Subject: [PATCH] Add API Key QR scan + click to reveal api key in List view
 (#2174)

---
 BTCPayServer/Views/Manage/APIKeys.cshtml      | 127 ++++++++++++------
 BTCPayServer/Views/Shared/ShowQR.cshtml       |   9 +-
 .../Views/Wallets/WalletSettings.cshtml       |   2 +-
 3 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/BTCPayServer/Views/Manage/APIKeys.cshtml b/BTCPayServer/Views/Manage/APIKeys.cshtml
index 41065055d..6b308322a 100644
--- a/BTCPayServer/Views/Manage/APIKeys.cshtml
+++ b/BTCPayServer/Views/Manage/APIKeys.cshtml
@@ -4,62 +4,101 @@
     ViewData.SetActivePageAndTitle(ManageNavPages.APIKeys, "Manage your API Keys");
 }
 
-<partial name="_StatusMessage" />
+<partial name="_StatusMessage"/>
 
 <p>
     The <a asp-controller="Home" asp-action="SwaggerDocs" target="_blank">BTCPay Server Greenfield API</a> offers programmatic access to your instance. You can manage your BTCPay
-    Server (e.g. stores, invoices, users) as well as automate workflows and integrations (see <a href="https://docs.btcpayserver.org/GreenFieldExample/">use case examples</a>). 
+    Server (e.g. stores, invoices, users) as well as automate workflows and integrations (see <a href="https://docs.btcpayserver.org/GreenFieldExample/">use case examples</a>).
     For that you need the API keys, which can be generated here. Find more information in the <a href="@Url.Action("SwaggerDocs", "Home")#section/Authentication" target="_blank">API authentication docs</a>.
 </p>
 <table class="table table-lg">
     <thead>
-        <tr>
-            <th>Label</th>
-            <th>Key</th>
-            <th>Permissions</th>
-            <th class="text-right">Actions</th>
-        </tr>
+    <tr>
+        <th>Label</th>
+        <th>Key</th>
+        <th>Permissions</th>
+        <th class="text-right">Actions</th>
+    </tr>
     </thead>
     <tbody>
-        @foreach (var keyData in Model.ApiKeyDatas)
-        {
-            <tr>
-                <td>@keyData.Label</td>
-                <td><code>@keyData.Id</code></td>
-                <td>
-                    @{
-                        var permissions = keyData.GetBlob().Permissions;
-                    }
-                    @if (!permissions.Any())
-                    {
-                        <span class="text-warning">No permissions</span>
-                    }
-                    else
-                    {
-                        <ul>
-                            @foreach (var permission in Permission.ToPermissions(permissions).Select(c => c.ToString()).Distinct().ToArray())
-                            {
-                                <li><code>@permission</code></li>
-                            }
-                        </ul>
-                    }
-                </td>
-                <td class="text-right">
-                    <a asp-action="RemoveAPIKey" asp-route-id="@keyData.Id" asp-controller="Manage">Remove</a>
-                </td>
-            </tr>
-        }
-        @if (!Model.ApiKeyDatas.Any())
-        {
-            <tr>
-                <td colspan="4" class="text-center h5 py-2">
-                    No API keys
-                </td>
-            </tr>
-        }
+    @{
+        var index = 0;
+    }
+    @foreach (var keyData in Model.ApiKeyDatas)
+    {
+        <tr>
+            <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>
+            </td>
+            <td>
+                @{
+                    var permissions = keyData.GetBlob().Permissions;
+                }
+                @if (!permissions.Any())
+                {
+                    <span class="text-warning">No permissions</span>
+                }
+                else
+                {
+                    <ul>
+                        @foreach (var permission in Permission.ToPermissions(permissions).Select(c => c.ToString()).Distinct().ToArray())
+                        {
+                            <li>
+                                <code>@permission</code>
+                            </li>
+                        }
+                    </ul>
+                }
+            </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>
+                <button type="button" class="btn btn-link only-for-js" data-qr="@index">Show QR</button>
+            </td>
+        </tr>
+        index++;
+    }
+    @if (!Model.ApiKeyDatas.Any())
+    {
+        <tr>
+            <td colspan="4" class="text-center h5 py-2">
+                No API keys
+            </td>
+        </tr>
+    }
     </tbody>
 </table>
 <a class="btn btn-primary" asp-action="AddApiKey" id="AddApiKey">
     <span class="fa fa-plus"></span>
     Generate new key
 </a>
+
+<script src="~/vendor/vuejs/vue.min.js" asp-append-version="true"></script>
+<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>
+<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")); 
+        });
+        
+        var apiKeys = @Safe.Json(Model.ApiKeyDatas.Select(data => new
+                      {
+                          ApiKey = data.Id,
+                          Host = Context.Request.GetAbsoluteRoot()
+                      }));
+        var qrApp = initQRShow("API Key QR", "", "scan-qr-modal");
+        $("button[data-qr]").on("click", function (){
+            var data =  apiKeys[parseInt($(this).data("qr"))];
+            qrApp.data = JSON.stringify(data);
+            qrApp.useBCUR = false;
+            $("#scan-qr-modal").modal("show");
+        });
+    });
+</script>
diff --git a/BTCPayServer/Views/Shared/ShowQR.cshtml b/BTCPayServer/Views/Shared/ShowQR.cshtml
index fe25db48e..a56a63405 100644
--- a/BTCPayServer/Views/Shared/ShowQR.cshtml
+++ b/BTCPayServer/Views/Shared/ShowQR.cshtml
@@ -39,7 +39,8 @@
  			data: data,
  			fragments: [],
  			active: false,
- 			modalId: modalId
+ 			modalId: modalId,
+ 			useBCUR: true
  		},
  		computed:
  		{
@@ -78,7 +79,11 @@
  					this.fragments = [];
  					return;
  				}
- 				this.fragments = window.bcur.encodeUR(this.data.toString(), 200);
+ 				if (this.useBCUR){
+ 				    this.fragments = window.bcur.encodeUR(this.data.toString(), 200);
+ 				}else{
+ 				    this.fragments = [this.data.toString()];
+ 				}
  			},
  			start: function ()
  			{
diff --git a/BTCPayServer/Views/Wallets/WalletSettings.cshtml b/BTCPayServer/Views/Wallets/WalletSettings.cshtml
index cdc16a103..dd5d86c16 100644
--- a/BTCPayServer/Views/Wallets/WalletSettings.cshtml
+++ b/BTCPayServer/Views/Wallets/WalletSettings.cshtml
@@ -98,7 +98,7 @@
 
 <partial name="ShowQR"/>
 <script>
-    var wallets = @Safe.Json(Model.AccountKeys.Select(model =>  Encoders.Hex.EncodeData(Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(model)))));
+    var wallets = @Safe.Json(Model.AccountKeys.Select(model =>  Encoders.Hex.EncodeData(Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(model, Formatting.None)))));
     $(document).ready(function(){        
         var qrApp = initQRShow("Wallet QR", "", "scan-qr-modal");
         $("button[data-wallet]").on("click", function (){