btcpayserver/BTCPayServer/Views/Manage/APIKeys.cshtml

@namespace BTCPayServer.Client
@model BTCPayServer.Controllers.ManageController.ApiKeysViewModel
@{
    ViewData.SetActivePageAndTitle(ManageNavPages.APIKeys, "Manage your API Keys");
}

<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>).
    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 class="w-125px">Key</th>
        <th>Permissions</th>
        <th class="text-end">Actions</th>
    </tr>
    </thead>
    <tbody>
    @{
        var index = 0;
    }
    @foreach (var keyData in Model.ApiKeyDatas)
    {
        <tr>
            <td>@keyData.Label</td>
            <td>
                <code class="hide-when-js">@keyData.Id</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>
                @{
                    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-end">
                <a asp-action="RemoveAPIKey" asp-route-id="@keyData.Id" asp-controller="Manage">Remove</a>
                <span>-</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>

@section PageHeadContent {
    <link href="~/vendor/vue-qrcode-reader/vue-qrcode-reader.css" rel="stylesheet" asp-append-version="true"/>
}

@section PageFootContent {
<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>
<script src="~/js/copy-to-clipboard.js" asp-append-version="true"></script>
<script>
    document.addEventListener("DOMContentLoaded", 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
                      {
                          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>
}

<partial name="ShowQR"/>