btcpayserver/BTCPayServer/Views/UIManage/APIKeys.cshtml

@namespace BTCPayServer.Client
@using BTCPayServer.Abstractions.Models
@inject BTCPayServer.Security.ContentSecurityPolicies Csp
@model BTCPayServer.Controllers.UIManageController.ApiKeysViewModel
@{
	ViewData.SetActivePage(ManageNavPages.APIKeys, "API Keys");
	Csp.UnsafeEval();
}

<div class="row">
    <div class="col-xl-10 col-xxl-constrain">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h3 class="mb-0">@ViewData["Title"]</h3>
            <a class="btn btn-primary" asp-action="AddApiKey" id="AddApiKey">
                Generate Key
            </a>
        </div>
        <p>
            The <a asp-controller="UIHome" 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/Development/GreenFieldExample/" rel="noreferrer noopener">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", "UIHome")#section/Authentication" target="_blank" rel="noreferrer noopener">API authentication docs</a>.
        </p>

        @if (Model.ApiKeyDatas.Any())
        {
            <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 type="button" class="btn btn-link only-for-js p-0" data-reveal-btn>Reveal</button>
                                <div hidden class="gap-2 align-items-center">
                                    <code>@keyData.Id</code>
                                    <button type="button" class="btn btn-link d-flex p-0" data-clipboard="@keyData.Id">
                                        <vc:icon symbol="copy" />
                                    </button>
                                </div>
                            </td>
                            <td>
                                @{
                                    var permissions = keyData.GetBlob().Permissions;
                                }
                                @if (!permissions.Any())
                                {
                                    <span class="info-note text-warning">
                                        <vc:icon symbol="warning"/>
                                        No permissions
                                    </span>
                                }
                                else
                                {
                                    @foreach (var permission in Permission.ToPermissions(permissions).Select(c => c.ToString()).Distinct().ToArray())
                                    {
                                        <div><code class="text-break">@permission</code></div>
                                    }
                                }
                            </td>
                            <td>
                                <div class="d-flex align-items-center justify-content-end gap-1">
                                    <a asp-action="DeleteAPIKey" asp-route-id="@keyData.Id" asp-controller="UIManage" data-bs-toggle="modal" data-bs-target="#ConfirmModal" data-description="Any application using the API key <strong>@Html.Encode(keyData.Label ?? keyData.Id)</strong> will immediately lose access." data-confirm-input="DELETE">Delete</a>
                                    <span>-</span>
                                    <button type="button" class="btn btn-link only-for-js p-0" data-qr="@index">Show QR</button>
                                </div>
                            </td>
                        </tr>
                        index++;
                    }
                </tbody>
            </table>
        }
    </div>
</div>

<partial name="_Confirm" model="@(new ConfirmModel("Delete API key", "Any application using the API key will immediately lose access.", "Delete"))" />

<partial name="ShowQR" />

@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/ur-registry/urlib.min.js" asp-append-version="true"></script>
    <script src="~/vendor/vue-qrcode-reader/VueQrcodeReader.umd.min.js" asp-append-version="true"></script>

    <script>
        delegate('click', '[data-reveal-btn]', e => {
            const $container = e.target.parentElement.querySelector('[hidden]')
            e.target.setAttribute('hidden', 'true')
            $container.removeAttribute('hidden')
            $container.classList.add('d-inline-flex')
        })
        document.addEventListener("DOMContentLoaded", function () {
            const apiKeys = @Safe.Json(Model.ApiKeyDatas.Select(data => new
                            {
                                ApiKey = data.Id,
                                Host = Context.Request.GetAbsoluteRoot()
                            }));
            const qrApp = initQRShow({ title: "API Key QR" });
            delegate("click", "button[data-qr]", e => {
                e.preventDefault();
                const { qr } = e.target.dataset;
                const data = apiKeys[qr];
                qrApp.showData(JSON.stringify(data));
            });
        });
    </script>
}