btcpayserver/BTCPayServer/Views/UIStores/ModifyWebhook.cshtml

@model EditWebhookViewModel
@using BTCPayServer.HostedServices.Webhooks
@inject WebhookSender WebhookSender 
@{
    var storeId = Context.GetStoreData().Id;
    ViewData.SetActivePage(StoreNavPages.Webhooks, "Webhook", storeId);
}

@section PageHeadContent {
    <style>
        #event-selector { display: none; }
        #Everything[data-value='false'] + #event-selector { display: block; }
    </style>
}

<form method="post">
    <div class="sticky-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a asp-action="Webhooks" asp-route-storeId="@storeId">Webhooks</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">@ViewData["Title"]</li>
            </ol>
            <h2>@ViewData["Title"]</h2>
        </nav>
        @if (Model.IsNew)
        {
            <button name="add" type="submit" class="btn btn-primary" value="New" id="New">Add Webhook</button>
        }
        else
        {
            <button name="update" type="submit" class="btn btn-primary" value="Save" id="Save">Update Webhook</button>
        }
    </div>
    <partial name="_StatusMessage" />
    <div class="row">
        <div class="col-xxl-constrain col-xl-8">
            <div class="form-group">
                <label asp-for="PayloadUrl" class="form-label">Payload URL</label>
                <input asp-for="PayloadUrl" class="form-control" />
                <span asp-validation-for="PayloadUrl" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Secret" class="form-label"></label>
                <div class="input-group">
                    <input asp-for="Secret" type="password" class="form-control" value="@Model.Secret">
                    <button type="button" class="btn btn-secondary px-3 only-for-js" title="Toggle password visibility" data-toggle-password="#Secret">
                        <vc:icon symbol="actions-show" />
                    </button>
                </div>
                <div class="form-text">The endpoint receiving the payload must validate the payload by checking that the HTTP header <code>BTCPAY-SIG</code> of the callback matches the HMAC256 of the secret on the payload's body bytes.</div>
            </div>
            <div class="form-group">
                <label class="form-group d-flex align-items-center">
                    <input asp-for="AutomaticRedelivery" type="checkbox" class="btcpay-toggle me-3" />
                    <div>
                        <span>Automatic redelivery</span>
                        <div class="form-text">We will try to redeliver any failed delivery after 10 seconds, 1 minute and up to 6 times after 10 minutes</div>
                    </div>
                </label>
            </div>
            <div class="form-group">
                <label class="d-flex align-items-center mb-2">
                    <input asp-for="Active" type="checkbox" class="btcpay-toggle me-3" />
                    <span>Enabled</span>
                </label>
            </div>

            <h3 class="mb-3 mt-5">Events</h3>
            <label asp-for="Everything" class="form-label">Which events would you like to trigger this webhook?</label>
            <select asp-for="Everything" class="form-select w-auto mb-3">
                <option value="true">Send me everything</option>
                <option value="false">Send specific events</option>
            </select>
            <div id="event-selector" class="collapse">
                <div class="pb-3">
                    @foreach (var evt in WebhookSender.GetSupportedWebhookTypes())
                    {
                        <div class="form-check my-1">
                            <input name="Events" id="@evt.Key" value="@evt.Key" @(Model.Events.Contains(evt.Key) ? "checked" : "") type="checkbox" class="form-check-input" />
                            <label for="@evt.Key" class="form-check-label">@evt.Value</label>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</form>
<div class="row">
    <div class="col-xxl-constrain col-xl-8">
        @if (!Model.IsNew && Model.Deliveries.Count > 0)
        {
            <h4 class="mb-3">Recent deliveries</h4>
            <ul class="list-group">
                @foreach (var delivery in Model.Deliveries)
                {
                    <li class="list-group-item ">
                        <form asp-action="RedeliverWebhook"
                              asp-route-storeId="@Context.GetRouteValue("storeId")"
                              asp-route-webhookId="@Context.GetRouteValue("webhookId")"
                              asp-route-deliveryId="@delivery.Id"
                              method="post">
                            <div class="d-flex align-items-center">
                                <span class="d-flex align-items-center flex-fill me-3">
                                    @if (delivery.Success)
                                    {
                                        <vc:icon symbol="checkmark" css-class="text-success" />
                                    }
                                    else
                                    {
                                        <span title="@delivery.ErrorMessage">
                                            <vc:icon symbol="cross" css-class="text-danger" />
                                        </span>
                                    }
                                    @if (!delivery.Pruned) {
                                        <span class="ms-3">
                                            <a asp-action="WebhookDelivery"
                                               asp-route-storeId="@this.Context.GetRouteValue("storeId")"
                                               asp-route-webhookId="@this.Context.GetRouteValue("webhookId")"
                                               asp-route-deliveryId="@delivery.Id"
                                               class="btn btn-link delivery-content" target="_blank">
                                                @delivery.Id
                                            </a>
                                        </span>
                                    }
                                </span>
                                <span class="d-flex align-items-center">
                                    <strong class="d-flex align-items-center text-muted small">
                                        @delivery.Time.ToBrowserDate()
                                    </strong>

                                    <button id="#redeliver-@delivery.Id"
                                            type="submit"
                                            class="btn btn-info py-1 ms-3 redeliver">
                                        Redeliver
                                    </button>
                                </span>
                            </div>
                        </form>
                    </li>
                }
            </ul>
        }
    </div>
</div>

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />
    <script>
        delegate('change', '#Everything', function (e) {
            e.target.dataset.value = e.target.value;
        });

        document.querySelector('#Everything').dataset.value = @Html.Raw(Json.Serialize(Model.Everything));
    </script>
}