Add API Key QR scan + click to reveal api key in List view (#2174)

This commit is contained in:
Andrew Camilleri 2021-01-07 09:56:35 +01:00 committed by GitHub
parent 58d01738ab
commit 64a68b95b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 91 additions and 47 deletions

View file

@ -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>

View file

@ -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 ()
{

View file

@ -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 (){