btcpayserver/BTCPayServer/Views/Manage/AddU2FDevice.cshtml

@model BTCPayServer.U2F.Models.AddU2FDeviceViewModel
@{
    ViewData.SetActivePageAndTitle(ManageNavPages.U2F, "Add U2F device");
}

<form asp-action="AddU2FDevice" method="post" id="registerForm" class="hidden">

    <input type="hidden" asp-for="AppId"/>
    <input type="hidden" asp-for="Version"/>
    <input type="hidden" asp-for="Challenge"/>
    <input type="hidden" asp-for="Name"/>
    <input type="hidden" asp-for="DeviceResponse"/>
</form>


<div class="card">
    <div class="card-header">
        <h4 class="mb-0">
            Registering U2F Device
        </h4>
    </div>

    <div class="card-body">
        <span id="spinner" class="fa fa-spinner fa-spin float-right" style="font-size:2.5em"></span>
        <p class="mb-0 mr-5">Insert your U2F device or a hardware wallet into your computer's USB port. If it has a button, tap on it.</p>
        <p id="error-message" class="d-none text-danger mt-3 mb-0"></p>
    </div>

    <div class="card-footer">
        <a class="btn btn-secondary" asp-action="U2FAuthentication" id="btn-back">Abort</a>
    </div>
</div>

@section Scripts {
    <script src="~/vendor/u2f/u2f-api-1.1.1.js" asp-append-version="true"></script>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
            window.u2fApi.register([{
                appId: @Safe.Json(Model.AppId),
                version: @Safe.Json(Model.Version),
                challenge: @Safe.Json(Model.Challenge)
            }])
            .then(data => {
                document.getElementById("DeviceResponse").value = JSON.stringify(data);
                document.getElementById("registerForm").submit();
            })
            .catch(message => {
                document.getElementById("error-message").classList.remove("d-none");
                document.getElementById("error-message").innerText = message;
                document.getElementById("btn-back").innerText = "Retry";
                document.getElementById("spinner").classList.add("d-none");
            });
        });
    </script>
}